Flying Rocket by
Krystal Campioni
On: 6 Aug 2016
Personal site: http://s.codepen.io/krystalcampioni/
<div class="rocket">
<ul class="rocket__windows">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="rocket__front-fin">
<li></li>
<li></li>
</ul>
<div class="rocket__body"></div>
<div class="rocket__nose"></div>
<div class="rocket__jets-cover"></div>
<ul class="flames">
<li class="flames__red"></li>
<li class="flames__orange"></li>
<li class="flames__yellow"></li>
<li class="flames__white"></li>
</ul>
<ul class="rocket__fins">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<ul class="rocket__jets">
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<ul class="stars">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
@-webkit-keyframes reflection {
0% {
box-shadow: inset 52px 8px 60px -25px #fad000, inset 13px -6px 22px 2px rgba(0, 0, 0, 0.6);
}
100% {
box-shadow: inset 62px 8px 50px -25px yellow, inset 13px -6px 22px 2px rgba(0, 0, 0, 0.6);
}
}
@keyframes reflection {
0% {
box-shadow: inset 52px 8px 60px -25px #fad000, inset 13px -6px 22px 2px rgba(0, 0, 0, 0.6);
}
100% {
box-shadow: inset 62px 8px 50px -25px yellow, inset 13px -6px 22px 2px rgba(0, 0, 0, 0.6);
}
}
@-webkit-keyframes float {
0% {
-webkit-transform: translate(0px, 0px) rotate(-5deg);
transform: translate(0px, 0px) rotate(-5deg);
}
100% {
-webkit-transform: translate(10px, 100px) rotate(5deg);
transform: translate(10px, 100px) rotate(5deg);
}
}
@keyframes float {
0% {
-webkit-transform: translate(0px, 0px) rotate(-5deg);
transform: translate(0px, 0px) rotate(-5deg);
}
100% {
-webkit-transform: translate(10px, 100px) rotate(5deg);
transform: translate(10px, 100px) rotate(5deg);
}
}
@-webkit-keyframes fire {
0% {
box-shadow: inset 6px 0px 7px 0px #e4ae69;
}
100% {
box-shadow: inset 12px 0px 7px -4px #fff;
}
}
@keyframes fire {
0% {
box-shadow: inset 6px 0px 7px 0px #e4ae69;
}
100% {
box-shadow: inset 12px 0px 7px -4px #fff;
}
}
@-webkit-keyframes stars {
0% {
-webkit-transform: translateX(100vw);
transform: translateX(100vw);
}
100% {
-webkit-transform: translateX(-100vw);
transform: translateX(-100vw);
}
}
@keyframes stars {
0% {
-webkit-transform: translateX(100vw);
transform: translateX(100vw);
}
100% {
-webkit-transform: translateX(-100vw);
transform: translateX(-100vw);
}
}
@-webkit-keyframes flicker {
0% {
-webkit-transform: rotate(40deg) translate(10px, -10px);
transform: rotate(40deg) translate(10px, -10px);
opacity: 0.7;
}
20% {
-webkit-transform: rotate(35deg) translate(20px, -20px);
transform: rotate(35deg) translate(20px, -20px);
opacity: 1;
}
40% {
-webkit-transform: rotate(45deg) translate(15px, -15px);
transform: rotate(45deg) translate(15px, -15px);
opacity: 0.7;
}
60% {
-webkit-transform: rotate(35deg) scale(1.02) translate(10px, -10px);
transform: rotate(35deg) scale(1.02) translate(10px, -10px);
opacity: 1;
}
80% {
-webkit-transform: rotate(45deg) scale(0.9) translate(5px, -5px);
transform: rotate(45deg) scale(0.9) translate(5px, -5px);
opacity: 0.7;
}
100% {
-webkit-transform: rotate(40deg) translate(0px, 0px);
transform: rotate(40deg) translate(0px, 0px);
opacity: 1;
}
}
@keyframes flicker {
0% {
-webkit-transform: rotate(40deg) translate(10px, -10px);
transform: rotate(40deg) translate(10px, -10px);
opacity: 0.7;
}
20% {
-webkit-transform: rotate(35deg) translate(20px, -20px);
transform: rotate(35deg) translate(20px, -20px);
opacity: 1;
}
40% {
-webkit-transform: rotate(45deg) translate(15px, -15px);
transform: rotate(45deg) translate(15px, -15px);
opacity: 0.7;
}
60% {
-webkit-transform: rotate(35deg) scale(1.02) translate(10px, -10px);
transform: rotate(35deg) scale(1.02) translate(10px, -10px);
opacity: 1;
}
80% {
-webkit-transform: rotate(45deg) scale(0.9) translate(5px, -5px);
transform: rotate(45deg) scale(0.9) translate(5px, -5px);
opacity: 0.7;
}
100% {
-webkit-transform: rotate(40deg) translate(0px, 0px);
transform: rotate(40deg) translate(0px, 0px);
opacity: 1;
}
}
body {
background-color: #050b12;
background-image: -webkit-linear-gradient(bottom, #050b12, #15304e);
background-image: -webkit-linear-gradient(bottom,#050b12, #15304e);
background-image: linear-gradient(to top,#050b12, #15304e);
background-size: 100%;
height: 100vh;
}
.rocket {
height: 200px;
width: 400px;
-webkit-animation: float 3.8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
animation: float 3.8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
position: relative;
margin: 0 auto;
-webkit-transform-origin: left;
transform-origin: left;
z-index: 10;
}
.rocket__windows {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
list-style: none;
z-index: 60;
left: 169px;
top: 29px;
}
.rocket__windows li {
height: 10px;
width: 10px;
background: #3f76a0;
border-radius: 50%;
border: 4px solid #d2d2d2;
margin: 10px 0;
box-shadow: 0px -8px 15px -1px rgba(0, 0, 0, 0.8), inset 0px -4px 3px -1px rgba(0, 0, 0, 0.8);
}
.rocket__windows li:first-child {
-webkit-transform: scale(1.4) translateY(-10px);
transform: scale(1.4) translateY(-10px);
}
.rocket__body {
-webkit-animation: reflection 0.8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
animation: reflection 0.8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
height: 50px;
width: 140px;
background: red;
border-radius: 50% 20px 20px 50%;
position: absolute;
top: 100px;
left: 90px;
z-index: 20;
border-right: 5px solid #9f9f9f;
box-shadow: inset 52px 8px 60px -25px yellow, inset 13px -6px 22px 2px rgba(0, 0, 0, 0.6);
}
.rocket__nose {
-webkit-transform: scale(0.9, 0.5);
transform: scale(0.9, 0.5);
height: 50px;
width: 100px;
background: #c5c5c5;
border-radius: 10px 50% 50% 10px;
position: absolute;
top: 100px;
left: 210px;
z-index: 10;
box-shadow: inset -9px -2px 22px 2px rgba(0, 0, 0, 0.6);
z-index: 10;
}
.rocket__nose:after {
height: 5px;
width: 50px;
content: '';
background: #6c6c6c;
position: absolute;
left: 98px;
top: 23px;
border-radius: 10% 50% 50% 10%;
}
.rocket__nose:before {
-webkit-transform: scale(1.1, 2);
transform: scale(1.1, 2);
height: 50px;
width: 100px;
content: '';
background: #e60000;
border-radius: 10px 50% 50% 10px;
position: absolute;
top: 0px;
left: -20px;
z-index: 10;
box-shadow: inset -9px -2px 22px 2px rgba(0, 0, 0, 0.6);
}
.rocket__front-fin {
list-style: none;
}
.rocket__front-fin li {
border-width: 0px 190px 80px 0px;
top: 86px;
left: 10px;
z-index: 360;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #e60000 transparent;
position: absolute;
}
.rocket__front-fin li:nth-of-type(1) {
-webkit-transform: scale(0.3, 0.15) rotate(157deg);
transform: scale(0.3, 0.15) rotate(157deg);
}
.rocket__front-fin li:nth-of-type(2) {
-webkit-transform: scale(0.3, -0.15) rotate(157deg);
transform: scale(0.3, -0.15) rotate(157deg);
}
.rocket__fins li {
list-style: none;
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 50px 0;
border-color: transparent transparent #e60000 transparent;
position: absolute;
}
.rocket__fins li:nth-of-type(1) {
-webkit-transform: scale(1.1) rotate(-20deg);
transform: scale(1.1) rotate(-20deg);
top: 70px;
left: 90px;
border-width: 0 40px 50px 5px;
}
.rocket__fins li:nth-of-type(2) {
-webkit-transform: scale(0.3) rotate(-115deg);
transform: scale(0.3) rotate(-115deg);
border-width: 0 30px 60px 10px;
top: 56px;
left: 60px;
}
.rocket__fins li:nth-of-type(3) {
-webkit-transform: scale(-1.1) rotate(60deg);
transform: scale(-1.1) rotate(60deg);
top: 115px;
left: 75px;
border-width: 0 40px 50px 5px;
}
.rocket__fins li:nth-of-type(4) {
-webkit-transform: scale(-0.3) rotate(115deg);
transform: scale(-0.3) rotate(115deg);
border-width: 0 30px 60px 10px;
top: 131px;
left: 60px;
}
.rocket__jets-cover {
height: 30px;
width: 10px;
background: #929292;
position: absolute;
left: 90px;
top: 110px;
z-index: 30;
border-radius: 50% 10%;
}
.rocket__jets-cover::after {
height: 40px;
width: 10px;
background: #ababab;
position: absolute;
left: -5px;
top: -5px;
z-index: 20;
border-radius: 50% 10%;
content: '';
}
.rocket__jets-cover::before {
height: 50px;
width: 10px;
background: #cfcfcf;
position: absolute;
left: -11px;
top: -10px;
z-index: 20;
border-radius: 50% 10%;
content: '';
}
.rocket__jets {
top: 75px;
left: 58px;
position: absolute;
z-index: 20;
border-radius: 50%;
}
.rocket__jets li {
-webkit-animation: fire 1.8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
animation: fire 1.8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
height: 10px;
width: 20px;
background: #d2d2d2;
box-shadow: inset 8px 2px 3px 0px yellow, inset 4px 2px 3px 0px yellow, -14px 1px 39px 5px #faa700, -14px 1px 47px -3px #faa700;
list-style: none;
position: absolute;
left: 12px;
border-radius: 50%;
}
.rocket__jets li:nth-of-type(2) {
left: 4px;
}
.rocket__jets li:nth-of-type(1) {
top: 15px;
}
.rocket__jets li:nth-of-type(2) {
top: 30px;
}
.rocket__jets li:nth-of-type(3) {
top: 45px;
}
.flames {
top: 147px;
left: 14px;
position: absolute;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
list-style: none;
padding: 0;
margin: 0;
}
.flames li:nth-of-type(1) {
-webkit-animation-delay: -1s;
animation-delay: -1s;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
}
.flames li:nth-of-type(2) {
-webkit-animation-delay: -2s;
animation-delay: -2s;
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
}
.flames li:nth-of-type(3) {
-webkit-animation-delay: -3s;
animation-delay: -3s;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
}
.flames li:nth-of-type(4) {
-webkit-animation-delay: -4s;
animation-delay: -4s;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
}
.flames li {
-webkit-animation-name: flicker;
animation-name: flicker;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: rotate(-135deg) scale(1.2, 1.2);
transform: rotate(-135deg) scale(1.2, 1.2);
border-radius: 50% 0;
position: absolute;
opacity: .8;
}
.flames__yellow {
left: 10px;
width: 30px;
height: 30px;
background: #f5cc00;
box-shadow: 0px 0px 9px 4px #f5cc00;
top: -40px;
}
.flames__orange {
left: -9px;
width: 40px;
height: 40px;
background: #faa700;
box-shadow: 0px 0px 9px 4px #faa700;
top: -43px;
}
.flames__red {
left: -10px;
width: 50px;
height: 50px;
background: #ff4000;
box-shadow: 0px 0px 5px 4px #ff4000;
top: -48px;
}
.flames__red:after {
-webkit-animation: flicker 0.2s infinite ease;
animation: flicker 0.2s infinite ease;
width: 14px;
height: 14px;
background: #ff4000;
box-shadow: 0px 0px 5px 4px #ff4000;
top: 51px;
content: "";
display: block;
border-radius: 50% 0;
position: absolute;
left: -30px;
opacity: 0.2;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.flames__white {
left: 30px;
bottom: 8px;
width: 30px;
height: 30px;
background: white;
box-shadow: 0px 0px 9px 4px white;
}
.stars {
list-style: none;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.stars li:nth-of-type(1) {
-webkit-animation-delay: -50s;
animation-delay: -50s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
top: 182px;
left: 778px;
}
.stars li:nth-of-type(2) {
-webkit-animation-delay: -100s;
animation-delay: -100s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
top: 461px;
left: 1399px;
}
.stars li:nth-of-type(3) {
-webkit-animation-delay: -150s;
animation-delay: -150s;
-webkit-animation-duration: 3s;
animation-duration: 3s;
top: 82px;
left: 646px;
}
.stars li:nth-of-type(4) {
-webkit-animation-delay: -200s;
animation-delay: -200s;
-webkit-animation-duration: 4s;
animation-duration: 4s;
top: 326px;
left: 236px;
}
.stars li:nth-of-type(5) {
-webkit-animation-delay: -250s;
animation-delay: -250s;
-webkit-animation-duration: 5s;
animation-duration: 5s;
top: 256px;
left: 1px;
}
.stars li:nth-of-type(6) {
-webkit-animation-delay: -300s;
animation-delay: -300s;
-webkit-animation-duration: 6s;
animation-duration: 6s;
top: 377px;
left: 146px;
}
.stars li:nth-of-type(7) {
-webkit-animation-delay: -350s;
animation-delay: -350s;
-webkit-animation-duration: 7s;
animation-duration: 7s;
top: 413px;
left: 1375px;
}
.stars li:nth-of-type(8) {
-webkit-animation-delay: -400s;
animation-delay: -400s;
-webkit-animation-duration: 8s;
animation-duration: 8s;
top: 583px;
left: 221px;
}
.stars li:nth-of-type(9) {
-webkit-animation-delay: -450s;
animation-delay: -450s;
-webkit-animation-duration: 9s;
animation-duration: 9s;
top: 554px;
left: 107px;
}
.stars li:nth-of-type(10) {
-webkit-animation-delay: -500s;
animation-delay: -500s;
-webkit-animation-duration: 10s;
animation-duration: 10s;
top: 243px;
left: 945px;
}
.stars li:nth-of-type(11) {
-webkit-animation-delay: -550s;
animation-delay: -550s;
-webkit-animation-duration: 11s;
animation-duration: 11s;
top: 496px;
left: 512px;
}
.stars li:nth-of-type(12) {
-webkit-animation-delay: -600s;
animation-delay: -600s;
-webkit-animation-duration: 12s;
animation-duration: 12s;
top: 452px;
left: 140px;
}
.stars li:nth-of-type(13) {
-webkit-animation-delay: -650s;
animation-delay: -650s;
-webkit-animation-duration: 13s;
animation-duration: 13s;
top: 291px;
left: 1203px;
}
.stars li:nth-of-type(14) {
-webkit-animation-delay: -700s;
animation-delay: -700s;
-webkit-animation-duration: 14s;
animation-duration: 14s;
top: 431px;
left: 612px;
}
.stars li:nth-of-type(15) {
-webkit-animation-delay: -750s;
animation-delay: -750s;
-webkit-animation-duration: 15s;
animation-duration: 15s;
top: 61px;
left: 464px;
}
.stars li:nth-of-type(16) {
-webkit-animation-delay: -800s;
animation-delay: -800s;
-webkit-animation-duration: 16s;
animation-duration: 16s;
top: 381px;
left: 389px;
}
.stars li:nth-of-type(17) {
-webkit-animation-delay: -850s;
animation-delay: -850s;
-webkit-animation-duration: 17s;
animation-duration: 17s;
top: 95px;
left: 588px;
}
.stars li:nth-of-type(18) {
-webkit-animation-delay: -900s;
animation-delay: -900s;
-webkit-animation-duration: 18s;
animation-duration: 18s;
top: 355px;
left: 1176px;
}
.stars li:nth-of-type(19) {
-webkit-animation-delay: -950s;
animation-delay: -950s;
-webkit-animation-duration: 19s;
animation-duration: 19s;
top: 511px;
left: 268px;
}
.stars li:nth-of-type(20) {
-webkit-animation-delay: -1000s;
animation-delay: -1000s;
-webkit-animation-duration: 20s;
animation-duration: 20s;
top: 362px;
left: 951px;
}
.stars li:nth-of-type(21) {
-webkit-animation-delay: -1050s;
animation-delay: -1050s;
-webkit-animation-duration: 21s;
animation-duration: 21s;
top: 155px;
left: 249px;
}
.stars li:nth-of-type(22) {
-webkit-animation-delay: -1100s;
animation-delay: -1100s;
-webkit-animation-duration: 22s;
animation-duration: 22s;
top: 314px;
left: 1346px;
}
.stars li:nth-of-type(23) {
-webkit-animation-delay: -1150s;
animation-delay: -1150s;
-webkit-animation-duration: 23s;
animation-duration: 23s;
top: 565px;
left: 1096px;
}
.stars li:nth-of-type(24) {
-webkit-animation-delay: -1200s;
animation-delay: -1200s;
-webkit-animation-duration: 24s;
animation-duration: 24s;
top: 189px;
left: 989px;
}
.stars li:nth-of-type(25) {
-webkit-animation-delay: -1250s;
animation-delay: -1250s;
-webkit-animation-duration: 25s;
animation-duration: 25s;
top: 34px;
left: 362px;
}
.stars li:nth-of-type(26) {
-webkit-animation-delay: -1300s;
animation-delay: -1300s;
-webkit-animation-duration: 26s;
animation-duration: 26s;
top: 104px;
left: 1350px;
}
.stars li:nth-of-type(27) {
-webkit-animation-delay: -1350s;
animation-delay: -1350s;
-webkit-animation-duration: 27s;
animation-duration: 27s;
top: 421px;
left: 96px;
}
.stars li:nth-of-type(28) {
-webkit-animation-delay: -1400s;
animation-delay: -1400s;
-webkit-animation-duration: 28s;
animation-duration: 28s;
top: 569px;
left: 1131px;
}
.stars li:nth-of-type(29) {
-webkit-animation-delay: -1450s;
animation-delay: -1450s;
-webkit-animation-duration: 29s;
animation-duration: 29s;
top: 488px;
left: 1095px;
}
.stars li:nth-of-type(30) {
-webkit-animation-delay: -1500s;
animation-delay: -1500s;
-webkit-animation-duration: 30s;
animation-duration: 30s;
top: 14px;
left: 503px;
}
.stars li:nth-of-type(31) {
-webkit-animation-delay: -1550s;
animation-delay: -1550s;
-webkit-animation-duration: 31s;
animation-duration: 31s;
top: 324px;
left: 47px;
}
.stars li:nth-of-type(32) {
-webkit-animation-delay: -1600s;
animation-delay: -1600s;
-webkit-animation-duration: 32s;
animation-duration: 32s;
top: 491px;
left: 490px;
}
.stars li:nth-of-type(33) {
-webkit-animation-delay: -1650s;
animation-delay: -1650s;
-webkit-animation-duration: 33s;
animation-duration: 33s;
top: 1px;
left: 80px;
}
.stars li:nth-of-type(34) {
-webkit-animation-delay: -1700s;
animation-delay: -1700s;
-webkit-animation-duration: 34s;
animation-duration: 34s;
top: 310px;
left: 229px;
}
.stars li:nth-of-type(35) {
-webkit-animation-delay: -1750s;
animation-delay: -1750s;
-webkit-animation-duration: 35s;
animation-duration: 35s;
top: 583px;
left: 1140px;
}
.stars li:nth-of-type(36) {
-webkit-animation-delay: -1800s;
animation-delay: -1800s;
-webkit-animation-duration: 36s;
animation-duration: 36s;
top: 497px;
left: 124px;
}
.stars li:nth-of-type(37) {
-webkit-animation-delay: -1850s;
animation-delay: -1850s;
-webkit-animation-duration: 37s;
animation-duration: 37s;
top: 439px;
left: 238px;
}
.stars li:nth-of-type(38) {
-webkit-animation-delay: -1900s;
animation-delay: -1900s;
-webkit-animation-duration: 38s;
animation-duration: 38s;
top: 322px;
left: 1152px;
}
.stars li:nth-of-type(39) {
-webkit-animation-delay: -1950s;
animation-delay: -1950s;
-webkit-animation-duration: 39s;
animation-duration: 39s;
top: 16px;
left: 1293px;
}
.stars li:nth-of-type(40) {
-webkit-animation-delay: -2000s;
animation-delay: -2000s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
top: 116px;
left: 1352px;
}
.stars li:nth-of-type(41) {
-webkit-animation-delay: -2050s;
animation-delay: -2050s;
-webkit-animation-duration: 41s;
animation-duration: 41s;
top: 495px;
left: 649px;
}
.stars li:nth-of-type(42) {
-webkit-animation-delay: -2100s;
animation-delay: -2100s;
-webkit-animation-duration: 42s;
animation-duration: 42s;
top: 98px;
left: 1363px;
}
.stars li:nth-of-type(43) {
-webkit-animation-delay: -2150s;
animation-delay: -2150s;
-webkit-animation-duration: 43s;
animation-duration: 43s;
top: 20px;
left: 375px;
}
.stars li:nth-of-type(44) {
-webkit-animation-delay: -2200s;
animation-delay: -2200s;
-webkit-animation-duration: 44s;
animation-duration: 44s;
top: 528px;
left: 1122px;
}
.stars li:nth-of-type(45) {
-webkit-animation-delay: -2250s;
animation-delay: -2250s;
-webkit-animation-duration: 45s;
animation-duration: 45s;
top: 121px;
left: 228px;
}
.stars li:nth-of-type(46) {
-webkit-animation-delay: -2300s;
animation-delay: -2300s;
-webkit-animation-duration: 46s;
animation-duration: 46s;
top: 500px;
left: 1188px;
}
.stars li:nth-of-type(47) {
-webkit-animation-delay: -2350s;
animation-delay: -2350s;
-webkit-animation-duration: 47s;
animation-duration: 47s;
top: 324px;
left: 739px;
}
.stars li:nth-of-type(48) {
-webkit-animation-delay: -2400s;
animation-delay: -2400s;
-webkit-animation-duration: 48s;
animation-duration: 48s;
top: 169px;
left: 892px;
}
.stars li:nth-of-type(49) {
-webkit-animation-delay: -2450s;
animation-delay: -2450s;
-webkit-animation-duration: 49s;
animation-duration: 49s;
top: 87px;
left: 636px;
}
.stars li:nth-of-type(50) {
-webkit-animation-delay: -2500s;
animation-delay: -2500s;
-webkit-animation-duration: 50s;
animation-duration: 50s;
top: 201px;
left: 398px;
}
.stars li:nth-of-type(51) {
-webkit-animation-delay: -2550s;
animation-delay: -2550s;
-webkit-animation-duration: 51s;
animation-duration: 51s;
top: 2px;
left: 1328px;
}
.stars li:nth-of-type(52) {
-webkit-animation-delay: -2600s;
animation-delay: -2600s;
-webkit-animation-duration: 52s;
animation-duration: 52s;
top: 454px;
left: 1382px;
}
.stars li:nth-of-type(53) {
-webkit-animation-delay: -2650s;
animation-delay: -2650s;
-webkit-animation-duration: 53s;
animation-duration: 53s;
top: 281px;
left: 721px;
}
.stars li:nth-of-type(54) {
-webkit-animation-delay: -2700s;
animation-delay: -2700s;
-webkit-animation-duration: 54s;
animation-duration: 54s;
top: 129px;
left: 288px;
}
.stars li:nth-of-type(55) {
-webkit-animation-delay: -2750s;
animation-delay: -2750s;
-webkit-animation-duration: 55s;
animation-duration: 55s;
top: 220px;
left: 469px;
}
.stars li:nth-of-type(56) {
-webkit-animation-delay: -2800s;
animation-delay: -2800s;
-webkit-animation-duration: 56s;
animation-duration: 56s;
top: 530px;
left: 646px;
}
.stars li:nth-of-type(57) {
-webkit-animation-delay: -2850s;
animation-delay: -2850s;
-webkit-animation-duration: 57s;
animation-duration: 57s;
top: 185px;
left: 1373px;
}
.stars li:nth-of-type(58) {
-webkit-animation-delay: -2900s;
animation-delay: -2900s;
-webkit-animation-duration: 58s;
animation-duration: 58s;
top: 330px;
left: 926px;
}
.stars li:nth-of-type(59) {
-webkit-animation-delay: -2950s;
animation-delay: -2950s;
-webkit-animation-duration: 59s;
animation-duration: 59s;
top: 413px;
left: 14px;
}
.stars li:nth-of-type(60) {
-webkit-animation-delay: -3000s;
animation-delay: -3000s;
-webkit-animation-duration: 60s;
animation-duration: 60s;
top: 331px;
left: 698px;
}
.stars li:nth-of-type(61) {
-webkit-animation-delay: -3050s;
animation-delay: -3050s;
-webkit-animation-duration: 61s;
animation-duration: 61s;
top: 545px;
left: 548px;
}
.stars li:nth-of-type(62) {
-webkit-animation-delay: -3100s;
animation-delay: -3100s;
-webkit-animation-duration: 62s;
animation-duration: 62s;
top: 362px;
left: 289px;
}
.stars li:nth-of-type(63) {
-webkit-animation-delay: -3150s;
animation-delay: -3150s;
-webkit-animation-duration: 63s;
animation-duration: 63s;
top: 328px;
left: 1310px;
}
.stars li:nth-of-type(64) {
-webkit-animation-delay: -3200s;
animation-delay: -3200s;
-webkit-animation-duration: 64s;
animation-duration: 64s;
top: 316px;
left: 1327px;
}
.stars li:nth-of-type(65) {
-webkit-animation-delay: -3250s;
animation-delay: -3250s;
-webkit-animation-duration: 65s;
animation-duration: 65s;
top: 525px;
left: 494px;
}
.stars li:nth-of-type(66) {
-webkit-animation-delay: -3300s;
animation-delay: -3300s;
-webkit-animation-duration: 66s;
animation-duration: 66s;
top: 11px;
left: 110px;
}
.stars li:nth-of-type(67) {
-webkit-animation-delay: -3350s;
animation-delay: -3350s;
-webkit-animation-duration: 67s;
animation-duration: 67s;
top: 529px;
left: 767px;
}
.stars li:nth-of-type(68) {
-webkit-animation-delay: -3400s;
animation-delay: -3400s;
-webkit-animation-duration: 68s;
animation-duration: 68s;
top: 494px;
left: 659px;
}
.stars li:nth-of-type(69) {
-webkit-animation-delay: -3450s;
animation-delay: -3450s;
-webkit-animation-duration: 69s;
animation-duration: 69s;
top: 8px;
left: 685px;
}
.stars li:nth-of-type(70) {
-webkit-animation-delay: -3500s;
animation-delay: -3500s;
-webkit-animation-duration: 70s;
animation-duration: 70s;
top: 523px;
left: 1190px;
}
.stars li:nth-of-type(71) {
-webkit-animation-delay: -3550s;
animation-delay: -3550s;
-webkit-animation-duration: 71s;
animation-duration: 71s;
top: 47px;
left: 263px;
}
.stars li:nth-of-type(72) {
-webkit-animation-delay: -3600s;
animation-delay: -3600s;
-webkit-animation-duration: 72s;
animation-duration: 72s;
top: 156px;
left: 435px;
}
.stars li:nth-of-type(73) {
-webkit-animation-delay: -3650s;
animation-delay: -3650s;
-webkit-animation-duration: 73s;
animation-duration: 73s;
top: 537px;
left: 712px;
}
.stars li:nth-of-type(74) {
-webkit-animation-delay: -3700s;
animation-delay: -3700s;
-webkit-animation-duration: 74s;
animation-duration: 74s;
top: 501px;
left: 1365px;
}
.stars li:nth-of-type(75) {
-webkit-animation-delay: -3750s;
animation-delay: -3750s;
-webkit-animation-duration: 75s;
animation-duration: 75s;
top: 335px;
left: 15px;
}
.stars li:nth-of-type(76) {
-webkit-animation-delay: -3800s;
animation-delay: -3800s;
-webkit-animation-duration: 76s;
animation-duration: 76s;
top: 207px;
left: 841px;
}
.stars li:nth-of-type(77) {
-webkit-animation-delay: -3850s;
animation-delay: -3850s;
-webkit-animation-duration: 77s;
animation-duration: 77s;
top: 328px;
left: 952px;
}
.stars li:nth-of-type(78) {
-webkit-animation-delay: -3900s;
animation-delay: -3900s;
-webkit-animation-duration: 78s;
animation-duration: 78s;
top: 102px;
left: 33px;
}
.stars li:nth-of-type(79) {
-webkit-animation-delay: -3950s;
animation-delay: -3950s;
-webkit-animation-duration: 79s;
animation-duration: 79s;
top: 341px;
left: 1231px;
}
.stars li:nth-of-type(80) {
-webkit-animation-delay: -4000s;
animation-delay: -4000s;
-webkit-animation-duration: 80s;
animation-duration: 80s;
top: 563px;
left: 194px;
}
.stars li:nth-of-type(81) {
-webkit-animation-delay: -4050s;
animation-delay: -4050s;
-webkit-animation-duration: 81s;
animation-duration: 81s;
top: 250px;
left: 1167px;
}
.stars li:nth-of-type(82) {
-webkit-animation-delay: -4100s;
animation-delay: -4100s;
-webkit-animation-duration: 82s;
animation-duration: 82s;
top: 56px;
left: 1009px;
}
.stars li:nth-of-type(83) {
-webkit-animation-delay: -4150s;
animation-delay: -4150s;
-webkit-animation-duration: 83s;
animation-duration: 83s;
top: 280px;
left: 1353px;
}
.stars li:nth-of-type(84) {
-webkit-animation-delay: -4200s;
animation-delay: -4200s;
-webkit-animation-duration: 84s;
animation-duration: 84s;
top: 189px;
left: 1382px;
}
.stars li:nth-of-type(85) {
-webkit-animation-delay: -4250s;
animation-delay: -4250s;
-webkit-animation-duration: 85s;
animation-duration: 85s;
top: 397px;
left: 1122px;
}
.stars li:nth-of-type(86) {
-webkit-animation-delay: -4300s;
animation-delay: -4300s;
-webkit-animation-duration: 86s;
animation-duration: 86s;
top: 24px;
left: 981px;
}
.stars li:nth-of-type(87) {
-webkit-animation-delay: -4350s;
animation-delay: -4350s;
-webkit-animation-duration: 87s;
animation-duration: 87s;
top: 394px;
left: 256px;
}
.stars li:nth-of-type(88) {
-webkit-animation-delay: -4400s;
animation-delay: -4400s;
-webkit-animation-duration: 88s;
animation-duration: 88s;
top: 411px;
left: 705px;
}
.stars li:nth-of-type(89) {
-webkit-animation-delay: -4450s;
animation-delay: -4450s;
-webkit-animation-duration: 89s;
animation-duration: 89s;
top: 402px;
left: 1036px;
}
.stars li:nth-of-type(90) {
-webkit-animation-delay: -4500s;
animation-delay: -4500s;
-webkit-animation-duration: 90s;
animation-duration: 90s;
top: 206px;
left: 959px;
}
.stars li:nth-of-type(91) {
-webkit-animation-delay: -4550s;
animation-delay: -4550s;
-webkit-animation-duration: 91s;
animation-duration: 91s;
top: 138px;
left: 1137px;
}
.stars li:nth-of-type(92) {
-webkit-animation-delay: -4600s;
animation-delay: -4600s;
-webkit-animation-duration: 92s;
animation-duration: 92s;
top: 151px;
left: 947px;
}
.stars li:nth-of-type(93) {
-webkit-animation-delay: -4650s;
animation-delay: -4650s;
-webkit-animation-duration: 93s;
animation-duration: 93s;
top: 575px;
left: 526px;
}
.stars li:nth-of-type(94) {
-webkit-animation-delay: -4700s;
animation-delay: -4700s;
-webkit-animation-duration: 94s;
animation-duration: 94s;
top: 2px;
left: 183px;
}
.stars li:nth-of-type(95) {
-webkit-animation-delay: -4750s;
animation-delay: -4750s;
-webkit-animation-duration: 95s;
animation-duration: 95s;
top: 137px;
left: 412px;
}
.stars li:nth-of-type(96) {
-webkit-animation-delay: -4800s;
animation-delay: -4800s;
-webkit-animation-duration: 96s;
animation-duration: 96s;
top: 405px;
left: 705px;
}
.stars li:nth-of-type(97) {
-webkit-animation-delay: -4850s;
animation-delay: -4850s;
-webkit-animation-duration: 97s;
animation-duration: 97s;
top: 277px;
left: 1158px;
}
.stars li:nth-of-type(98) {
-webkit-animation-delay: -4900s;
animation-delay: -4900s;
-webkit-animation-duration: 98s;
animation-duration: 98s;
top: 552px;
left: 109px;
}
.stars li:nth-of-type(99) {
-webkit-animation-delay: -4950s;
animation-delay: -4950s;
-webkit-animation-duration: 99s;
animation-duration: 99s;
top: 321px;
left: 411px;
}
.stars li:nth-of-type(100) {
-webkit-animation-delay: -5000s;
animation-delay: -5000s;
-webkit-animation-duration: 100s;
animation-duration: 100s;
top: 255px;
left: 788px;
}
.stars li:nth-of-type(101) {
-webkit-animation-delay: -5050s;
animation-delay: -5050s;
-webkit-animation-duration: 101s;
animation-duration: 101s;
top: 495px;
left: 857px;
}
.stars li:nth-of-type(102) {
-webkit-animation-delay: -5100s;
animation-delay: -5100s;
-webkit-animation-duration: 102s;
animation-duration: 102s;
top: 447px;
left: 4px;
}
.stars li:nth-of-type(103) {
-webkit-animation-delay: -5150s;
animation-delay: -5150s;
-webkit-animation-duration: 103s;
animation-duration: 103s;
top: 163px;
left: 231px;
}
.stars li:nth-of-type(104) {
-webkit-animation-delay: -5200s;
animation-delay: -5200s;
-webkit-animation-duration: 104s;
animation-duration: 104s;
top: 458px;
left: 286px;
}
.stars li:nth-of-type(105) {
-webkit-animation-delay: -5250s;
animation-delay: -5250s;
-webkit-animation-duration: 105s;
animation-duration: 105s;
top: 138px;
left: 847px;
}
.stars li:nth-of-type(106) {
-webkit-animation-delay: -5300s;
animation-delay: -5300s;
-webkit-animation-duration: 106s;
animation-duration: 106s;
top: 186px;
left: 1030px;
}
.stars li:nth-of-type(107) {
-webkit-animation-delay: -5350s;
animation-delay: -5350s;
-webkit-animation-duration: 107s;
animation-duration: 107s;
top: 325px;
left: 1048px;
}
.stars li:nth-of-type(108) {
-webkit-animation-delay: -5400s;
animation-delay: -5400s;
-webkit-animation-duration: 108s;
animation-duration: 108s;
top: 228px;
left: 712px;
}
.stars li:nth-of-type(109) {
-webkit-animation-delay: -5450s;
animation-delay: -5450s;
-webkit-animation-duration: 109s;
animation-duration: 109s;
top: 234px;
left: 1094px;
}
.stars li:nth-of-type(110) {
-webkit-animation-delay: -5500s;
animation-delay: -5500s;
-webkit-animation-duration: 110s;
animation-duration: 110s;
top: 188px;
left: 817px;
}
.stars li:nth-of-type(111) {
-webkit-animation-delay: -5550s;
animation-delay: -5550s;
-webkit-animation-duration: 111s;
animation-duration: 111s;
top: 598px;
left: 307px;
}
.stars li:nth-of-type(112) {
-webkit-animation-delay: -5600s;
animation-delay: -5600s;
-webkit-animation-duration: 112s;
animation-duration: 112s;
top: 564px;
left: 572px;
}
.stars li:nth-of-type(113) {
-webkit-animation-delay: -5650s;
animation-delay: -5650s;
-webkit-animation-duration: 113s;
animation-duration: 113s;
top: 497px;
left: 1124px;
}
.stars li:nth-of-type(114) {
-webkit-animation-delay: -5700s;
animation-delay: -5700s;
-webkit-animation-duration: 114s;
animation-duration: 114s;
top: 503px;
left: 93px;
}
.stars li:nth-of-type(115) {
-webkit-animation-delay: -5750s;
animation-delay: -5750s;
-webkit-animation-duration: 115s;
animation-duration: 115s;
top: 302px;
left: 949px;
}
.stars li:nth-of-type(116) {
-webkit-animation-delay: -5800s;
animation-delay: -5800s;
-webkit-animation-duration: 116s;
animation-duration: 116s;
top: 153px;
left: 288px;
}
.stars li:nth-of-type(117) {
-webkit-animation-delay: -5850s;
animation-delay: -5850s;
-webkit-animation-duration: 117s;
animation-duration: 117s;
top: 162px;
left: 1193px;
}
.stars li:nth-of-type(118) {
-webkit-animation-delay: -5900s;
animation-delay: -5900s;
-webkit-animation-duration: 118s;
animation-duration: 118s;
top: 98px;
left: 935px;
}
.stars li:nth-of-type(119) {
-webkit-animation-delay: -5950s;
animation-delay: -5950s;
-webkit-animation-duration: 119s;
animation-duration: 119s;
top: 120px;
left: 127px;
}
.stars li:nth-of-type(120) {
-webkit-animation-delay: -6000s;
animation-delay: -6000s;
-webkit-animation-duration: 120s;
animation-duration: 120s;
top: 97px;
left: 1385px;
}
.stars li:nth-of-type(121) {
-webkit-animation-delay: -6050s;
animation-delay: -6050s;
-webkit-animation-duration: 121s;
animation-duration: 121s;
top: 431px;
left: 1018px;
}
.stars li:nth-of-type(122) {
-webkit-animation-delay: -6100s;
animation-delay: -6100s;
-webkit-animation-duration: 122s;
animation-duration: 122s;
top: 586px;
left: 229px;
}
.stars li:nth-of-type(123) {
-webkit-animation-delay: -6150s;
animation-delay: -6150s;
-webkit-animation-duration: 123s;
animation-duration: 123s;
top: 64px;
left: 891px;
}
.stars li:nth-of-type(124) {
-webkit-animation-delay: -6200s;
animation-delay: -6200s;
-webkit-animation-duration: 124s;
animation-duration: 124s;
top: 547px;
left: 170px;
}
.stars li:nth-of-type(125) {
-webkit-animation-delay: -6250s;
animation-delay: -6250s;
-webkit-animation-duration: 125s;
animation-duration: 125s;
top: 78px;
left: 1304px;
}
.stars li:nth-of-type(126) {
-webkit-animation-delay: -6300s;
animation-delay: -6300s;
-webkit-animation-duration: 126s;
animation-duration: 126s;
top: 244px;
left: 328px;
}
.stars li:nth-of-type(127) {
-webkit-animation-delay: -6350s;
animation-delay: -6350s;
-webkit-animation-duration: 127s;
animation-duration: 127s;
top: 216px;
left: 180px;
}
.stars li:nth-of-type(128) {
-webkit-animation-delay: -6400s;
animation-delay: -6400s;
-webkit-animation-duration: 128s;
animation-duration: 128s;
top: 320px;
left: 699px;
}
.stars li:nth-of-type(129) {
-webkit-animation-delay: -6450s;
animation-delay: -6450s;
-webkit-animation-duration: 129s;
animation-duration: 129s;
top: 136px;
left: 199px;
}
.stars li:nth-of-type(130) {
-webkit-animation-delay: -6500s;
animation-delay: -6500s;
-webkit-animation-duration: 130s;
animation-duration: 130s;
top: 245px;
left: 1099px;
}
.stars li:nth-of-type(131) {
-webkit-animation-delay: -6550s;
animation-delay: -6550s;
-webkit-animation-duration: 131s;
animation-duration: 131s;
top: 574px;
left: 239px;
}
.stars li:nth-of-type(132) {
-webkit-animation-delay: -6600s;
animation-delay: -6600s;
-webkit-animation-duration: 132s;
animation-duration: 132s;
top: 588px;
left: 495px;
}
.stars li:nth-of-type(133) {
-webkit-animation-delay: -6650s;
animation-delay: -6650s;
-webkit-animation-duration: 133s;
animation-duration: 133s;
top: 159px;
left: 337px;
}
.stars li:nth-of-type(134) {
-webkit-animation-delay: -6700s;
animation-delay: -6700s;
-webkit-animation-duration: 134s;
animation-duration: 134s;
top: 487px;
left: 972px;
}
.stars li:nth-of-type(135) {
-webkit-animation-delay: -6750s;
animation-delay: -6750s;
-webkit-animation-duration: 135s;
animation-duration: 135s;
top: 278px;
left: 42px;
}
.stars li:nth-of-type(136) {
-webkit-animation-delay: -6800s;
animation-delay: -6800s;
-webkit-animation-duration: 136s;
animation-duration: 136s;
top: 467px;
left: 587px;
}
.stars li:nth-of-type(137) {
-webkit-animation-delay: -6850s;
animation-delay: -6850s;
-webkit-animation-duration: 137s;
animation-duration: 137s;
top: 502px;
left: 191px;
}
.stars li:nth-of-type(138) {
-webkit-animation-delay: -6900s;
animation-delay: -6900s;
-webkit-animation-duration: 138s;
animation-duration: 138s;
top: 437px;
left: 263px;
}
.stars li:nth-of-type(139) {
-webkit-animation-delay: -6950s;
animation-delay: -6950s;
-webkit-animation-duration: 139s;
animation-duration: 139s;
top: 454px;
left: 318px;
}
.stars li:nth-of-type(140) {
-webkit-animation-delay: -7000s;
animation-delay: -7000s;
-webkit-animation-duration: 140s;
animation-duration: 140s;
top: 492px;
left: 379px;
}
.stars li:nth-of-type(141) {
-webkit-animation-delay: -7050s;
animation-delay: -7050s;
-webkit-animation-duration: 141s;
animation-duration: 141s;
top: 354px;
left: 1284px;
}
.stars li:nth-of-type(142) {
-webkit-animation-delay: -7100s;
animation-delay: -7100s;
-webkit-animation-duration: 142s;
animation-duration: 142s;
top: 336px;
left: 764px;
}
.stars li:nth-of-type(143) {
-webkit-animation-delay: -7150s;
animation-delay: -7150s;
-webkit-animation-duration: 143s;
animation-duration: 143s;
top: 268px;
left: 52px;
}
.stars li:nth-of-type(144) {
-webkit-animation-delay: -7200s;
animation-delay: -7200s;
-webkit-animation-duration: 144s;
animation-duration: 144s;
top: 151px;
left: 714px;
}
.stars li:nth-of-type(145) {
-webkit-animation-delay: -7250s;
animation-delay: -7250s;
-webkit-animation-duration: 145s;
animation-duration: 145s;
top: 328px;
left: 831px;
}
.stars li:nth-of-type(146) {
-webkit-animation-delay: -7300s;
animation-delay: -7300s;
-webkit-animation-duration: 146s;
animation-duration: 146s;
top: 232px;
left: 42px;
}
.stars li:nth-of-type(147) {
-webkit-animation-delay: -7350s;
animation-delay: -7350s;
-webkit-animation-duration: 147s;
animation-duration: 147s;
top: 144px;
left: 921px;
}
.stars li:nth-of-type(148) {
-webkit-animation-delay: -7400s;
animation-delay: -7400s;
-webkit-animation-duration: 148s;
animation-duration: 148s;
top: 137px;
left: 1322px;
}
.stars li:nth-of-type(149) {
-webkit-animation-delay: -7450s;
animation-delay: -7450s;
-webkit-animation-duration: 149s;
animation-duration: 149s;
top: 567px;
left: 714px;
}
.stars li:nth-of-type(150) {
-webkit-animation-delay: -7500s;
animation-delay: -7500s;
-webkit-animation-duration: 150s;
animation-duration: 150s;
top: 390px;
left: 582px;
}
.stars li:nth-of-type(151) {
-webkit-animation-delay: -7550s;
animation-delay: -7550s;
-webkit-animation-duration: 151s;
animation-duration: 151s;
top: 82px;
left: 425px;
}
.stars li:nth-of-type(152) {
-webkit-animation-delay: -7600s;
animation-delay: -7600s;
-webkit-animation-duration: 152s;
animation-duration: 152s;
top: 209px;
left: 766px;
}
.stars li:nth-of-type(153) {
-webkit-animation-delay: -7650s;
animation-delay: -7650s;
-webkit-animation-duration: 153s;
animation-duration: 153s;
top: 293px;
left: 589px;
}
.stars li:nth-of-type(154) {
-webkit-animation-delay: -7700s;
animation-delay: -7700s;
-webkit-animation-duration: 154s;
animation-duration: 154s;
top: 75px;
left: 670px;
}
.stars li:nth-of-type(155) {
-webkit-animation-delay: -7750s;
animation-delay: -7750s;
-webkit-animation-duration: 155s;
animation-duration: 155s;
top: 336px;
left: 394px;
}
.stars li:nth-of-type(156) {
-webkit-animation-delay: -7800s;
animation-delay: -7800s;
-webkit-animation-duration: 156s;
animation-duration: 156s;
top: 512px;
left: 6px;
}
.stars li:nth-of-type(157) {
-webkit-animation-delay: -7850s;
animation-delay: -7850s;
-webkit-animation-duration: 157s;
animation-duration: 157s;
top: 47px;
left: 886px;
}
.stars li:nth-of-type(158) {
-webkit-animation-delay: -7900s;
animation-delay: -7900s;
-webkit-animation-duration: 158s;
animation-duration: 158s;
top: 380px;
left: 314px;
}
.stars li:nth-of-type(159) {
-webkit-animation-delay: -7950s;
animation-delay: -7950s;
-webkit-animation-duration: 159s;
animation-duration: 159s;
top: 396px;
left: 389px;
}
.stars li:nth-of-type(160) {
-webkit-animation-delay: -8000s;
animation-delay: -8000s;
-webkit-animation-duration: 160s;
animation-duration: 160s;
top: 279px;
left: 510px;
}
.stars li:nth-of-type(161) {
-webkit-animation-delay: -8050s;
animation-delay: -8050s;
-webkit-animation-duration: 161s;
animation-duration: 161s;
top: 599px;
left: 767px;
}
.stars li:nth-of-type(162) {
-webkit-animation-delay: -8100s;
animation-delay: -8100s;
-webkit-animation-duration: 162s;
animation-duration: 162s;
top: 50px;
left: 225px;
}
.stars li:nth-of-type(163) {
-webkit-animation-delay: -8150s;
animation-delay: -8150s;
-webkit-animation-duration: 163s;
animation-duration: 163s;
top: 495px;
left: 813px;
}
.stars li:nth-of-type(164) {
-webkit-animation-delay: -8200s;
animation-delay: -8200s;
-webkit-animation-duration: 164s;
animation-duration: 164s;
top: 313px;
left: 1304px;
}
.stars li:nth-of-type(165) {
-webkit-animation-delay: -8250s;
animation-delay: -8250s;
-webkit-animation-duration: 165s;
animation-duration: 165s;
top: 399px;
left: 265px;
}
.stars li:nth-of-type(166) {
-webkit-animation-delay: -8300s;
animation-delay: -8300s;
-webkit-animation-duration: 166s;
animation-duration: 166s;
top: 307px;
left: 293px;
}
.stars li:nth-of-type(167) {
-webkit-animation-delay: -8350s;
animation-delay: -8350s;
-webkit-animation-duration: 167s;
animation-duration: 167s;
top: 282px;
left: 126px;
}
.stars li:nth-of-type(168) {
-webkit-animation-delay: -8400s;
animation-delay: -8400s;
-webkit-animation-duration: 168s;
animation-duration: 168s;
top: 161px;
left: 75px;
}
.stars li:nth-of-type(169) {
-webkit-animation-delay: -8450s;
animation-delay: -8450s;
-webkit-animation-duration: 169s;
animation-duration: 169s;
top: 94px;
left: 1023px;
}
.stars li:nth-of-type(170) {
-webkit-animation-delay: -8500s;
animation-delay: -8500s;
-webkit-animation-duration: 170s;
animation-duration: 170s;
top: 303px;
left: 838px;
}
.stars li:nth-of-type(171) {
-webkit-animation-delay: -8550s;
animation-delay: -8550s;
-webkit-animation-duration: 171s;
animation-duration: 171s;
top: 411px;
left: 325px;
}
.stars li:nth-of-type(172) {
-webkit-animation-delay: -8600s;
animation-delay: -8600s;
-webkit-animation-duration: 172s;
animation-duration: 172s;
top: 57px;
left: 149px;
}
.stars li:nth-of-type(173) {
-webkit-animation-delay: -8650s;
animation-delay: -8650s;
-webkit-animation-duration: 173s;
animation-duration: 173s;
top: 20px;
left: 861px;
}
.stars li:nth-of-type(174) {
-webkit-animation-delay: -8700s;
animation-delay: -8700s;
-webkit-animation-duration: 174s;
animation-duration: 174s;
top: 125px;
left: 25px;
}
.stars li:nth-of-type(175) {
-webkit-animation-delay: -8750s;
animation-delay: -8750s;
-webkit-animation-duration: 175s;
animation-duration: 175s;
top: 217px;
left: 415px;
}
.stars li:nth-of-type(176) {
-webkit-animation-delay: -8800s;
animation-delay: -8800s;
-webkit-animation-duration: 176s;
animation-duration: 176s;
top: 326px;
left: 939px;
}
.stars li:nth-of-type(177) {
-webkit-animation-delay: -8850s;
animation-delay: -8850s;
-webkit-animation-duration: 177s;
animation-duration: 177s;
top: 456px;
left: 731px;
}
.stars li:nth-of-type(178) {
-webkit-animation-delay: -8900s;
animation-delay: -8900s;
-webkit-animation-duration: 178s;
animation-duration: 178s;
top: 458px;
left: 236px;
}
.stars li:nth-of-type(179) {
-webkit-animation-delay: -8950s;
animation-delay: -8950s;
-webkit-animation-duration: 179s;
animation-duration: 179s;
top: 67px;
left: 739px;
}
.stars li:nth-of-type(180) {
-webkit-animation-delay: -9000s;
animation-delay: -9000s;
-webkit-animation-duration: 180s;
animation-duration: 180s;
top: 553px;
left: 792px;
}
.stars li:nth-of-type(181) {
-webkit-animation-delay: -9050s;
animation-delay: -9050s;
-webkit-animation-duration: 181s;
animation-duration: 181s;
top: 446px;
left: 106px;
}
.stars li:nth-of-type(182) {
-webkit-animation-delay: -9100s;
animation-delay: -9100s;
-webkit-animation-duration: 182s;
animation-duration: 182s;
top: 442px;
left: 932px;
}
.stars li:nth-of-type(183) {
-webkit-animation-delay: -9150s;
animation-delay: -9150s;
-webkit-animation-duration: 183s;
animation-duration: 183s;
top: 298px;
left: 754px;
}
.stars li:nth-of-type(184) {
-webkit-animation-delay: -9200s;
animation-delay: -9200s;
-webkit-animation-duration: 184s;
animation-duration: 184s;
top: 530px;
left: 324px;
}
.stars li:nth-of-type(185) {
-webkit-animation-delay: -9250s;
animation-delay: -9250s;
-webkit-animation-duration: 185s;
animation-duration: 185s;
top: 138px;
left: 790px;
}
.stars li:nth-of-type(186) {
-webkit-animation-delay: -9300s;
animation-delay: -9300s;
-webkit-animation-duration: 186s;
animation-duration: 186s;
top: 559px;
left: 78px;
}
.stars li:nth-of-type(187) {
-webkit-animation-delay: -9350s;
animation-delay: -9350s;
-webkit-animation-duration: 187s;
animation-duration: 187s;
top: 349px;
left: 942px;
}
.stars li:nth-of-type(188) {
-webkit-animation-delay: -9400s;
animation-delay: -9400s;
-webkit-animation-duration: 188s;
animation-duration: 188s;
top: 313px;
left: 767px;
}
.stars li:nth-of-type(189) {
-webkit-animation-delay: -9450s;
animation-delay: -9450s;
-webkit-animation-duration: 189s;
animation-duration: 189s;
top: 117px;
left: 1395px;
}
.stars li:nth-of-type(190) {
-webkit-animation-delay: -9500s;
animation-delay: -9500s;
-webkit-animation-duration: 190s;
animation-duration: 190s;
top: 587px;
left: 1074px;
}
.stars li:nth-of-type(191) {
-webkit-animation-delay: -9550s;
animation-delay: -9550s;
-webkit-animation-duration: 191s;
animation-duration: 191s;
top: 223px;
left: 335px;
}
.stars li:nth-of-type(192) {
-webkit-animation-delay: -9600s;
animation-delay: -9600s;
-webkit-animation-duration: 192s;
animation-duration: 192s;
top: 542px;
left: 916px;
}
.stars li:nth-of-type(193) {
-webkit-animation-delay: -9650s;
animation-delay: -9650s;
-webkit-animation-duration: 193s;
animation-duration: 193s;
top: 572px;
left: 1216px;
}
.stars li:nth-of-type(194) {
-webkit-animation-delay: -9700s;
animation-delay: -9700s;
-webkit-animation-duration: 194s;
animation-duration: 194s;
top: 589px;
left: 1390px;
}
.stars li:nth-of-type(195) {
-webkit-animation-delay: -9750s;
animation-delay: -9750s;
-webkit-animation-duration: 195s;
animation-duration: 195s;
top: 67px;
left: 1098px;
}
.stars li:nth-of-type(196) {
-webkit-animation-delay: -9800s;
animation-delay: -9800s;
-webkit-animation-duration: 196s;
animation-duration: 196s;
top: 231px;
left: 634px;
}
.stars li:nth-of-type(197) {
-webkit-animation-delay: -9850s;
animation-delay: -9850s;
-webkit-animation-duration: 197s;
animation-duration: 197s;
top: 120px;
left: 419px;
}
.stars li:nth-of-type(198) {
-webkit-animation-delay: -9900s;
animation-delay: -9900s;
-webkit-animation-duration: 198s;
animation-duration: 198s;
top: 35px;
left: 513px;
}
.stars li:nth-of-type(199) {
-webkit-animation-delay: -9950s;
animation-delay: -9950s;
-webkit-animation-duration: 199s;
animation-duration: 199s;
top: 520px;
left: 855px;
}
.stars li:nth-of-type(200) {
-webkit-animation-delay: -10000s;
animation-delay: -10000s;
-webkit-animation-duration: 200s;
animation-duration: 200s;
top: 576px;
left: 348px;
}
.stars li {
-webkit-animation-name: stars;
animation-name: stars;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: rotate(-135deg) scale(1.2, 1.2);
transform: rotate(-135deg) scale(1.2, 1.2);
height: 10px;
width: 10px;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
height: 2px;
width: 2px;
background: #fff;
position: absolute;
border-radius: 50%;
box-shadow: 0px 0px 20px 0px white;
left: 10px;
top: 10px;
z-index: 0;
}
25