html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #0a477b;
}

h1 {
  font-family: Brush Script MT;
  font-size: 77px;
  color: #d4bf6a;
  text-align: center;
  margin-top: 200px;
}

.snow {
  position: relative;
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
  margin: 20px auto;
  background: #0a477b;
}

.snowflake {
  height: 40px;
  width: 40px;
  position: absolute;
  top: -20%;
  left: 80%;
  background-image: url(images/snowflake1.png);
  background-size: 40px 40px;
  opacity: 0.5;
  animation: movement_snowflake 10s linear infinite;
  animation-duration: 5s;
  animation-delay: 0s;
}

#n2.snowflake {
  height: 30px;
  width: 30px;
  top: -90%;
  left: 10%;
  opacity: 0.5;
  transform: rotate(10deg);
  background-size: 30px 30px;
  animation-duration: 4s;
  animation-delay: 0s;
}

#n3.snowflake {
  height: 40px;
  width: 40px;
  top: -70%;
  left: 80%;
  opacity: 0.6;
  transform: rotate(-60deg);
  background-size: 40px 40px;
  animation-duration: 8s;
  animation-delay: 0.5s;
}

#n4.snowflake {
  height: 50px;
  width: 50px;
  top: -50%;
  left: 45%;
  opacity: 0.5;
  transform: rotate(10deg);
  background-size: 50px 50px;
  animation-duration: 7s;
  animation-delay: 0.7s;
}

#n5.snowflake {
  height: 25px;
  width: 25px;
  top: -95%;
  left: 70%;
  opacity: 0.8;
  transform: rotate(-45deg);
  background-size: 25px 25px;
  animation-duration: 6s;
  animation-delay: 0.4s;
}

#n6.snowflake {
  height: 50px;
  width: 50px;
  top: -80%;
  left: 5%;
  opacity: 0.7;
  background-size: 50px 50px;
  transform: rotate(20deg);
  animation-duration: 9s;
  animation-delay: 0.1s;
}

#n7.snowflake {
  height: 40px;
  width: 40px;
  top: -115%;
  left: 35%;
  opacity: 0.8;
  background-size: 40px 40px;
  transform: rotate(-20deg);
  animation-duration: 5.5s;
  animation-delay: 0.4s;
}

#n8.snowflake {
  height: 30px;
  width: 30px;
  top: -80%;
  left: 20%;
  opacity: 0.6;
  transform: rotate(-30deg);
  background-size: 30px 30px;
  animation-duration: 4.5s;
  animation-delay: 0.2s;
}

@keyframes movement_snowflake {
  from {
  }
  to {
    top: 130%;
  }
}

#santa {
  position: relative;
  top: 166px;
  left: calc(100% / 2 - 600px / 13);
  width: 43px;
  height: 237px;
  /* border: solid black; */
  background-image: url(./images/513331145e2f9c101f73a50c39006045.png);
  animation: play 1s steps(13) infinite;
}

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

  100% {
    background-position: 600px 0;
  }
}