@import url(https://fonts.googleapis.com/css?family=Mountains+of+Christmas:700);

body {
  overflow: hidden;
}

.ozadje {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 88vh;
}

h2 {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: auto;
  font-family: "Mountains of Christmas", cursive;
  font-size: 6.5vw;
  padding-top: 3vh;
  font-weight: 90vh;
  text-align: center;
  letter-spacing: 1px;
  background-clip: text;
  background: -o-linear-gradient(transparent, transparent) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  z-index: 20;
}

/* SNEG. JA VEM! ŠE VEČ SNEGA. */
#snow {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: -6vh;
  left: 0;
  background-image: url("flake1.png"), url("flake2.png"), url("flake3.png");
  -webkit-animation: snow 10s linear infinite;
  -moz-animation: snow 10s linear infinite;
  -ms-animation: snow 10s linear infinite;
  animation: snow 10s linear infinite;
  background-size: 100vw 100vh;
  z-index: 9999999999;
}

.snow,
.snow:before,
.snow:after {
  position: absolute;
  top: -6vh;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: radial-gradient(5px 5px at 34px 172px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 86px 25px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 388px 47px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 53px 303px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 373px 475px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 196px 261px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 434px 424px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 234px 213px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 393px 356px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 537px 497px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 151px 362px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 11.956vh 99px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 270px 111px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 351px 424px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 459px 279px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 584px 126px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 303px 486px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 132px 292px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 13.043vh 162px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 396px 460px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 169px 508px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 177px 298px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 575px 410px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 29px 140px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 82px 378px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 482px 473px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 56px 24px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 157px 73px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 97px 496px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 240px 225px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 12px 102px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 518px 417px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 323px 155px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 534px 119px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 294px 245px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 270px 432px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 406px 292px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 42px 233px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 109px 160px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 158px 359px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 212px 133px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 303px 536px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 513px 314px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 54px 346px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 127px 115px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 559px 29px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 493px 581px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 339px 414px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 349px 481px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 331px 86px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 497px 385px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 65px 332px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 432px 593px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 377px 240px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 293px 224px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 455px 336px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 93px 50px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 129px 453px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 393px 78px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 364px 6vw, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 66px 19px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 254px 199px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 178px 454px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 499px 280px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 419px 40px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 179px 593px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 66px 529px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(6px 6px at 498px 329px, #ffffff 50%, rgba(0, 0, 0, 0)), radial-gradient(5px 5px at 381px 464px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(4px 4px at 172px 17px, #ffffff 50%, rgba(0, 0, 0, 0));
  background-size: 100vw 100vh;
  animation: snow 5s linear infinite;
  -webkit-animation: snow 5s linear infinite;
}


@keyframes snow {
  0% {
    background-position: 0px 0px, 0px 0px, 0px 0px;
  }

  50% {
    background-position: 500px 500px, 10.869vh 200px, -100px 150px;
  }

  100% {
    background-position: 500px 1000px, 200px 400px, -100px 300px;
  }
}

@-moz-keyframes snow {
  0% {
    background-position: 0px 0px, 0px 0px, 0px 0px;
  }

  50% {
    background-position: 500px 500px, 10.869vh 200px, -100px 150px;
  }

  100% {
    background-position: 400px 1000px, 200px 400px, 10.869vh 300px;
  }
}

@-webkit-keyframes snow {
  0% {
    background-position: 0px 0px, 0px 0px, 0px 0px;
  }

  50% {
    background-position: 500px 500px, 10.869vh 200px, -100px 150px;
  }

  100% {
    background-position: 500px 1000px, 200px 400px, -100px 300px;
  }
}

@-ms-keyframes snow {
  0% {
    background-position: 0px 0px, 0px 0px, 0px 0px;
  }

  50% {
    background-position: 500px 500px, 10.869vh 200px, -100px 150px;
  }

  100% {
    background-position: 500px 1000px, 200px 400px, -100px 300px;
  }
}

/*TEKST BLEŠČICE STIL */
.Gold-Glitter {
  position: fixed;
  top: 1.5vh;
  left: 2vw;
  color: gold;
  background: -webkit-linear-gradient(transparent, transparent), url(goldGlitter.gif) repeat;
  z-index: 2;
}

/* PREKLOP */
.Absolute-Center {
  position: absolute;
  margin: auto;
  top: 9vh;
  left: 0;
  bottom: 0;
  right: 0;
  width: 10vw;
  height: auto;
}

/* SNEŽAK */
#SnowMan {
  margin: 0;
  top: 12vh;
  left: 35vw;  /* Postavitev snežaka na sredino strani */
  width: auto;
  height: 75vh;
  cursor: pointer;
}

.HeadAnimate {
  position: absolute;
  top: 4vh;
  left: 6vw;
  width: 28vw;
  height: 60vh;
  animation: Happy_Snowman 3s infinite;
  -moz-animation: Happy_Snowman 3s infinite;
  -webkit-animation: Happy_Snowman 3s infinite;
  z-index: 10;
}

.Absolute{
  width: 17vw;
  height: 42vh;
}

@keyframes Happy_Snowman {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  25% {
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    -o-transform: rotate(7deg);
}

  50% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  75% {
    transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
}

.BodyAnimate {
  position: absolute;
  top: 18vh;
  width: auto;
  height: 55vh;
  animation: bottom_animation 3s infinite;
  -moz-animation: bottom_animation 3s infinite;
  -webkit-animation: bottom_animation 3s infinite;
}

@keyframes bottom_animation {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@-moz-keyframes bottom_animation {
  0% {
    -moz-transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(-3deg);
  }

  50% {
    -moz-transform: rotate(0deg);
  }

  75% {
    -moz-transform: rotate(3deg);
  }

  100% {
    -moz-transform: rotate(0deg);
  }
}

@-webkit-keyframes bottom_animation {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(-3deg);
  }

  50% {
    -webkit-transform: rotate(0deg);
  }

  75% {
    -webkit-transform: rotate(3deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
  }
}

.eye {
  position: absolute;
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 2vw;
  height: 2vh;
  background: #000;
  color: #000;
  border-radius: 50%;
  -webkit-animation: blink 5s ease-in-out infinite;
  animation: blink 5s ease-in-out infinite;
  z-index: 9999998999;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

  .eye.left {
    top: 16vh;
    left: 5vw;
  }

  .eye.right {
    top: 14vh;
    left: 12vw;
  }


@-webkit-keyframes blink {
  90% {
    -webkit-transform: none;
    transform: none;
  }

  95% {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
  }
}

@keyframes blink {
  90% {
    -webkit-transform: none;
    transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
  }

  95% {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
  }
}