body {
  background-color: #0088ff;
  height: 100%;
  overflow: hidden; 
}
h1 {
  color: #ffea00;
  text-align: center;
  margin-top: 80px;
}
.list {
  position: relative; 
}
.happy {
  height: 40px;
  width: 40px;
  position: fixed;
  top: -20%;
  left: 80%;
  background-image: url(https://kitit.com.ua/students/frontend/2017-2018/perestaronin_card/images/Snezhinka.png);
  background-size: 40px 40px;
  opacity: 0.5;
}

#n1.happy {
  top: -10%;
  left: 30%;
  animation: snow1 5s linear infinite;
}
@keyframes snow1 {
  from {
  }
  to {
    top: 130%;
    left: 20%;
  }
}
#n2.happy {
  top: -20%;
  left: 15%;
  animation: snow2 12s ease-in-out infinite;
}
@keyframes snow2 {
  from {
  }
  to {
    top: 110%;
    left: 5%;
  }
}
#n3.happy {
  top: -2%;
  left: 70%;
  animation: snow3 3s ease-in infinite;
}
@keyframes snow3 {
  from {
  }
  to {
    top: 170%;
    left: 55%;
  }
}
#n4.happy {
  top: -30%;
  left: 90%;
  animation: snow4 8s linear infinite;
}
@keyframes snow4 {
  from {
  }
  to {
    top: 140%;
    left: 95%;
  }
}
#n5.happy {
  top: -40%;
  left: 5%;
  animation: snow5 15s ease-in infinite;
}
@keyframes snow5 {
  from {
  }
  to {
    top: 230%;
  }
}
#n6.happy {
  top: -50%;
  left: 8%;
  animation: snow6 17s ease-out infinite;
}
@keyframes snow6 {
  from {
  }
  to {
    top: 190%;
  }
}
#n7.happy {
  top: -8%;
  left: 19%;
  animation: snow7 3s ease-out infinite;
}
@keyframes snow7 {
  from {
  }
  to {
    top: 105%;
    left: 69%;
  }
}
#n8.happy {
  top: -90%;
  left: 85%;
  animation: snow8 9s linear infinite;
}
@keyframes snow8 {
  from {
  }
  to {
    top: 145%;
  }
}
#n9.happy {
  top: -100%;
  left: 50%;
  animation: snow9 18s linear infinite;
}
@keyframes snow9 {
  from {
  }
  to {
    top: 257%;
    left: 70%;
  }
}
#n10.happy {
  top: -170%;
  left: 30%;
  animation: snow10 20s ease-out infinite;
}
@keyframes snow10 {
  from {
  }
  to {
    top: 102%;
  }
}

.list img.liiist {
  width: 300px;
  height: 150px;
  display: block;
  margin: auto;
}
.list img.listt {
  width: 50px;
  height: 50px;
  z-index: 9999;
  position: absolute;
  left: 49%;
  top: 18%;
}
.pressbox {
  width: 0;
  height: 0;
  position: absolute;
  overflow: hidden;
  /* left: 48%; */
  top: 0;
  z-index: 9999;
  text-align: center;
}
.pressbox img {
  opacity: 0;
  padding: 10px;
  margin-top: 40px;
  width: 400px; 
  height: auto;
  background: #ffffff;
  box-shadow: 0px 0px 15px #444;
  transition: opacity 0.25s ease-in-out;
}
.pressbox:target {
  width: 100%; 
  height: 100%; 
  bottom: 0;
  right: 0;
}
.pressbox:target img {
  opacity: 1;
}
.din {
  position: relative;
  top: 15%;
  left: 5px;
  width: 25px;
  height: 30px;
  background-image: url(https://i.ibb.co/Sm6ng3Z/imgonline-com-ua-Resize-Zo-Q8an-Jyt-Wv-EG0.png);
  animation: play 1s steps(6) infinite, move 10s linear forwards;
}
@keyframes play {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -180px 0;
  }
}
@keyframes move {
  from {
    top: 15%;
    left: 5px;
  }
  to {
    top: 15%;
    left: 110%;
  }
}