Летящий космический корабль
На чистом CSS сделан симпатичный космический корабль, летящий в космосе сквозь череду звезд
HTML
<div class="space">
<div class="star-wrapper">
<li class="star-0"></li>
<li class="star-1"></li>
<li class="star-2"></li>
<li class="star-3"></li>
<li class="star-4"></li>
<li class="star-5"></li>
<li class="star-6"></li>
<li class="star-7"></li>
<li class="star-8"></li>
<li class="star-9"></li>
<li class="star-10"></li>
<li class="star-11"></li>
<li class="star-12"></li>
<li class="star-13"></li>
<li class="star-14"></li>
<li class="star-15"></li>
<li class="star-16"></li>
<li class="star-17"></li>
<li class="star-18"></li>
<li class="star-19"></li>
<li class="star-20"></li>
<li class="star-21"></li>
<li class="star-22"></li>
<li class="star-23"></li>
<li class="star-24"></li>
<li class="star-25"></li>
<li class="star-26"></li>
<li class="star-27"></li>
<li class="star-28"></li>
<li class="star-29"></li>
<li class="star-30"></li>
<li class="star-31"></li>
<li class="star-32"></li>
<li class="star-33"></li>
<li class="star-34"></li>
<li class="star-35"></li>
<li class="star-36"></li>
<li class="star-37"></li>
<li class="star-38"></li>
<li class="star-39"></li>
<li class="star-40"></li>
<li class="star-41"></li>
<li class="star-42"></li>
<li class="star-43"></li>
<li class="star-44"></li>
<li class="star-45"></li>
<li class="star-46"></li>
<li class="star-47"></li>
<li class="star-48"></li>
<li class="star-49"></li>
<li class="star-50"></li>
<li class="star-51"></li>
<li class="star-52"></li>
<li class="star-53"></li>
<li class="star-54"></li>
<li class="star-55"></li>
<li class="star-56"></li>
<li class="star-57"></li>
<li class="star-58"></li>
<li class="star-59"></li>
<li class="star-60"></li>
<li class="star-61"></li>
<li class="star-62"></li>
<li class="star-63"></li>
<li class="star-64"></li>
<li class="star-65"></li>
<li class="star-66"></li>
<li class="star-67"></li>
<li class="star-68"></li>
<li class="star-69"></li>
<li class="star-70"></li>
<li class="star-71"></li>
<li class="star-72"></li>
<li class="star-73"></li>
<li class="star-74"></li>
<li class="star-75"></li>
<li class="star-76"></li>
<li class="star-77"></li>
<li class="star-78"></li>
<li class="star-79"></li>
<li class="star-80"></li>
<li class="star-81"></li>
<li class="star-82"></li>
<li class="star-83"></li>
<li class="star-84"></li>
<li class="star-85"></li>
<li class="star-86"></li>
<li class="star-87"></li>
<li class="star-88"></li>
<li class="star-89"></li>
<li class="star-90"></li>
<li class="star-91"></li>
<li class="star-92"></li>
<li class="star-93"></li>
<li class="star-94"></li>
<li class="star-95"></li>
<li class="star-96"></li>
<li class="star-97"></li>
<li class="star-98"></li>
<li class="star-99"></li>
<li class="star-100"></li>
<li class="star-101"></li>
<li class="star-102"></li>
<li class="star-103"></li>
<li class="star-104"></li>
<li class="star-105"></li>
<li class="star-106"></li>
<li class="star-107"></li>
<li class="star-108"></li>
<li class="star-109"></li>
<li class="star-110"></li>
<li class="star-111"></li>
<li class="star-112"></li>
<li class="star-113"></li>
<li class="star-114"></li>
<li class="star-115"></li>
<li class="star-116"></li>
<li class="star-117"></li>
<li class="star-118"></li>
<li class="star-119"></li>
</div>
<div class="rocket-wrapper">
<div class="rocket">
<div class="flame"> </div>
<div class="exhaust"></div>
</div>
</div>
</div>
CSS
body {
background: #0e2c35;
height: 100vh;
min-height: 500px;
min-width: 500px;
margin: 0;
}
.space {
height: 100%;
min-height: 500px;
min-width: 500px;
position: relative;
z-index: 1;
overflow: hidden;
background-image: radial-gradient(circle at center, #257389 30%, transparent 30%), radial-gradient(circle at center, #21697d 40%, transparent 40%), radial-gradient(circle at center, #1e5f71 50%, transparent 50%), radial-gradient(circle at center, #1b5565 60%, transparent 60%), radial-gradient(circle at center, #184b59 70%, transparent 70%), radial-gradient(circle at center, #15414d 80%, transparent 80%), radial-gradient(circle at center, #113741 90%, transparent 90%);
}
.rocket-wrapper {
position: absolute;
top: 37%;
left: 40%;
right: 50%;
-webkit-animation: fly 1s ease-in-out alternate infinite, take-off ease 1s 3;
animation: fly 1s ease-in-out alternate infinite, take-off ease 1s 3;
}
.rocket {
/* rocket body */
position: relative;
height: 200px;
width: 260px;
background: #f97d0d;
border-radius: 50% 100% 100% 50%;
border-right: 12px solid #fbad67;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255, 255, 255, 0.15)), color-stop(50%, transparent)), radial-gradient(circle at 60% 35%, #4ab2cf 3%, transparent 3%), radial-gradient(circle at 70% 40%, #4ab2cf 5%, transparent 5%), radial-gradient(circle at 65% 50%, #287e95 24%, transparent 24%), radial-gradient(circle at 44.5% 50%, #f9851c 2.1%, transparent 2.1%), radial-gradient(circle at 85.5% 50%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 65% 75.5%, #f9851c 1.8%, transparent 1.8%), radial-gradient(circle at 65% 24.5%, #f9851c 1.8%, transparent 1.8%), radial-gradient(circle at 50% 32.5%, #f9851c 1.8%, transparent 2%), radial-gradient(circle at 50% 67.5%, #f9851c 1.8%, transparent 2%), radial-gradient(circle at 80% 32.5%, #f9851c 1.5%, transparent 1.8%), radial-gradient(circle at 80% 67.5%, #f9851c 1.5%, transparent 1.8%), radial-gradient(circle at 65% 50%, #fe5100 30%, transparent 30%), radial-gradient(circle at 55.5% 82%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 75.5% 82%, #f9851c 1.3%, transparent 1.3%), radial-gradient(circle at 55% 90%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 76% 90%, #f9851c 1.3%, transparent 1.3%), radial-gradient(circle at 54.5% 98%, #f9851c 1.3%, transparent 1.3%), radial-gradient(circle at 65% 68%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 70%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 72%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 74%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 76%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 78%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 80%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 82%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 84%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 86%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 88%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 90%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 92%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 94%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 96%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 98%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 100%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 102%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 28% 20%, #faa04e 1.5%, transparent 1.5%), radial-gradient(circle at 34% 20%, #faa04e 1.5%, transparent 1.5%), radial-gradient(circle at 25% 13%, #faa04e 1.5%, transparent 1.5%), radial-gradient(circle at 31% 13%, #faa04e 1.5%, transparent 1.5%), radial-gradient(circle at 37% 13%, #faa04e 1.5%, transparent 1.5%), radial-gradient(circle at 17% 30%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 17% 38%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 17% 46%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 17% 54%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 17% 62%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 17% 70%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 17% 30%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 32%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 34%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 36%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 38%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 40%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 42%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 44%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 46%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 48%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 50%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 52%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 54%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 56%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 58%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 60%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 62%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 64%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 66%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 68%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 70%, #ef4c00 5%, transparent 5%);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 50%, transparent 50%), radial-gradient(circle at 60% 35%, #4ab2cf 3%, transparent 3%), radial-gradient(circle at 70% 40%, #4ab2cf 5%, transparent 5%), radial-gradient(circle at 65% 50%, #287e95 24%, transparent 24%), radial-gradient(circle at 44.5% 50%, #f9851c 2.1%, transparent 2.1%), radial-gradient(circle at 85.5% 50%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 65% 75.5%, #f9851c 1.8%, transparent 1.8%), radial-gradient(circle at 65% 24.5%, #f9851c 1.8%, transparent 1.8%), radial-gradient(circle at 50% 32.5%, #f9851c 1.8%, transparent 2%), radial-gradient(circle at 50% 67.5%, #f9851c 1.8%, transparent 2%), radial-gradient(circle at 80% 32.5%, #f9851c 1.5%, transparent 1.8%), radial-gradient(circle at 80% 67.5%, #f9851c 1.5%, transparent 1.8%), radial-gradient(circle at 65% 50%, #fe5100 30%, transparent 30%), radial-gradient(circle at 55.5% 82%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 75.5% 82%, #f9851c 1.3%, transparent 1.3%), radial-gradient(circle at 55% 90%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 76% 90%, #f9851c 1.3%, transparent 1.3%), radial-gradient(circle at 54.5% 98%, #f9851c 1.3%, transparent 1.3%), radial-gradient(circle at 65% 68%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 70%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 72%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 74%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 76%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 78%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 80%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 82%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 84%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 86%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 88%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 90%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 92%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 94%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 96%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 98%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 100%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 65% 102%, #ef4c00 15%, transparent 15%), radial-gradient(circle at 28% 20%, #faa04e 1.5%, transparent 1.5%), radial-gradient(circle at 34% 20%, #faa04e 1.5%, transparent 1.5%), radial-gradient(circle at 25% 13%, #faa04e 1.5%, transparent 1.5%), radial-gradient(circle at 31% 13%, #faa04e 1.5%, transparent 1.5%), radial-gradient(circle at 37% 13%, #faa04e 1.5%, transparent 1.5%), radial-gradient(circle at 17% 30%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 17% 38%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 17% 46%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 17% 54%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 17% 62%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 17% 70%, #f9851c 1.5%, transparent 1.5%), radial-gradient(circle at 17% 30%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 32%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 34%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 36%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 38%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 40%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 42%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 44%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 46%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 48%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 50%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 52%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 54%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 56%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 58%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 60%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 62%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 64%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 66%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 68%, #ef4c00 5%, transparent 5%), radial-gradient(circle at 17% 70%, #ef4c00 5%, transparent 5%);
}
.rocket:before, .rocket:after {
content: '';
position: absolute;
z-index: -1;
}
.rocket:before {
/* rocket exhaust pipe */
height: 132px;
width: 40px;
right: 98%;
top: 17%;
background: #ef4c00;
-webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255, 255, 255, 0.15)), color-stop(50%, transparent));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 50%, transparent 50%);
}
.rocket:after {
/* rocket tip */
bottom: 25%;
left: 95%;
background: #f97d0d;
height: 100px;
width: 80px;
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
clip-path: polygon(0 0, 0% 100%, 100% 50%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255, 255, 255, 0.15)), color-stop(50%, transparent)), radial-gradient(100% 120% at 10% 50%, #ef4c00 40%, transparent 40%), radial-gradient(circle at 10% 50%, transparent 50%, #ef4c00 50%);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 50%, transparent 50%), radial-gradient(100% 120% at 10% 50%, #ef4c00 40%, transparent 40%), radial-gradient(circle at 10% 50%, transparent 50%, #ef4c00 50%);
}
.flame {
position: relative;
width: 64px;
height: 64px;
top: 34%;
right: 37%;
z-index: -2;
-webkit-transform-origin: right;
transform-origin: right;
-webkit-animation: flicker 1s infinite ease-out alternate;
animation: flicker 1s infinite ease-out alternate;
}
.flame:before, .flame:after {
content: '';
position: absolute;
background: #f8c249;
border-radius: 50px 50px 50px 0px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.flame:before {
/* large flame */
bottom: 0;
left: 0;
width: 64px;
height: 64px;
-webkit-filter: drop-shadow(-4px 4px 12px #f8c249);
filter: drop-shadow(-4px 4px 12px #f8c249);
background-image: linear-gradient(135deg, #f8c249 50%, #f6b522 50%);
}
.flame:after {
/* little center flame*/
bottom: 18%;
right: 18%;
width: 40px;
height: 40px;
background-image: linear-gradient(135deg, #facf70 50%, #f8c249 50%);
}
.exhaust {
position: absolute;
width: 300px;
height: 96px;
top: 26.5%;
right: 100%;
z-index: -3;
-webkit-transform-origin: right;
transform-origin: right;
background: transparent;
-webkit-animation: exhaust 3s ease-in forwards;
animation: exhaust 3s ease-in forwards;
}
.star-wrapper {
height: 100%;
min-width: 500px;
z-index: -3;
}
.star-wrapper .star-0 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 45%;
left: 49%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 14s 3s 2;
animation: twinkle 2s infinite alternate, warp-speed 14s 3s 2;
}
.star-wrapper .star-0:before, .star-wrapper .star-0:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-0:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-0:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-1 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 7%;
left: 44%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 7s 3s 2;
animation: twinkle 1s infinite alternate, warp-speed 7s 3s 2;
}
.star-wrapper .star-1:before, .star-wrapper .star-1:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-1:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-1:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-2 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 45%;
left: 23%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 4s 3s 2;
animation: twinkle 1s infinite alternate, warp-speed 4s 3s 2;
}
.star-wrapper .star-2:before, .star-wrapper .star-2:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-2:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-2:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-3 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 64%;
left: 27%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 10s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 10s 3s 2;
}
.star-wrapper .star-3:before, .star-wrapper .star-3:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-3:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-3:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-4 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 35%;
left: 26%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 6s 2s 2;
animation: twinkle 3s infinite alternate, warp-speed 6s 2s 2;
}
.star-wrapper .star-4:before, .star-wrapper .star-4:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-4:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-4:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-5 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 78%;
left: 73%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 7s 3s 2;
animation: twinkle 2s infinite alternate, warp-speed 7s 3s 2;
}
.star-wrapper .star-5:before, .star-wrapper .star-5:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-5:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-5:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-6 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 13%;
left: 26%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 7s 2s 2;
animation: twinkle 3s infinite alternate, warp-speed 7s 2s 2;
}
.star-wrapper .star-6:before, .star-wrapper .star-6:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-6:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-6:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-7 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 13%;
left: 83%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 3s 3s 2;
animation: twinkle 4s infinite alternate, warp-speed 3s 3s 2;
}
.star-wrapper .star-7:before, .star-wrapper .star-7:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-7:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-7:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-8 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 93%;
left: 10%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 11s 2s 2;
animation: twinkle 4s infinite alternate, warp-speed 11s 2s 2;
}
.star-wrapper .star-8:before, .star-wrapper .star-8:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-8:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-8:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-9 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 10%;
left: 43%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 17s 3s 2;
animation: twinkle 2s infinite alternate, warp-speed 17s 3s 2;
}
.star-wrapper .star-9:before, .star-wrapper .star-9:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-9:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-9:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-10 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 56%;
left: 7%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 6s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 6s 3s 2;
}
.star-wrapper .star-10:before, .star-wrapper .star-10:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-10:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-10:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-11 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 17%;
left: 84%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 4s 2s 2;
animation: twinkle 4s infinite alternate, warp-speed 4s 2s 2;
}
.star-wrapper .star-11:before, .star-wrapper .star-11:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-11:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-11:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-12 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 95%;
left: 68%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 15s 2s 2;
animation: twinkle 3s infinite alternate, warp-speed 15s 2s 2;
}
.star-wrapper .star-12:before, .star-wrapper .star-12:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-12:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-12:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-13 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 27%;
left: 96%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 10s 2s 2;
animation: twinkle 3s infinite alternate, warp-speed 10s 2s 2;
}
.star-wrapper .star-13:before, .star-wrapper .star-13:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-13:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-13:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-14 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 44%;
left: 19%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 10s 3s 2;
animation: twinkle 4s infinite alternate, warp-speed 10s 3s 2;
}
.star-wrapper .star-14:before, .star-wrapper .star-14:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-14:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-14:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-15 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 5%;
left: 1%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 14s 2s 2;
animation: twinkle 3s infinite alternate, warp-speed 14s 2s 2;
}
.star-wrapper .star-15:before, .star-wrapper .star-15:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-15:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-15:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-16 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 56%;
left: 12%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 4s 2s 2;
animation: twinkle 3s infinite alternate, warp-speed 4s 2s 2;
}
.star-wrapper .star-16:before, .star-wrapper .star-16:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-16:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-16:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-17 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 9%;
left: 14%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 15s 3s 2;
animation: twinkle 5s infinite alternate, warp-speed 15s 3s 2;
}
.star-wrapper .star-17:before, .star-wrapper .star-17:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-17:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-17:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-18 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 6%;
left: 66%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 15s 2s 2;
animation: twinkle 4s infinite alternate, warp-speed 15s 2s 2;
}
.star-wrapper .star-18:before, .star-wrapper .star-18:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-18:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-18:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-19 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 89%;
left: 20%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 17s 2s 2;
animation: twinkle 5s infinite alternate, warp-speed 17s 2s 2;
}
.star-wrapper .star-19:before, .star-wrapper .star-19:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-19:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-19:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-20 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 52%;
left: 6%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 8s 2s 2;
animation: twinkle 5s infinite alternate, warp-speed 8s 2s 2;
}
.star-wrapper .star-20:before, .star-wrapper .star-20:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-20:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-20:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-21 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 5%;
left: 64%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 6s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 6s 3s 2;
}
.star-wrapper .star-21:before, .star-wrapper .star-21:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-21:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-21:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-22 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 16%;
left: 10%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 13s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 13s 2s 2;
}
.star-wrapper .star-22:before, .star-wrapper .star-22:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-22:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-22:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-23 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 74%;
left: 68%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 13s 2s 2;
animation: twinkle 4s infinite alternate, warp-speed 13s 2s 2;
}
.star-wrapper .star-23:before, .star-wrapper .star-23:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-23:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-23:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-24 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 98%;
left: 82%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 10s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 10s 2s 2;
}
.star-wrapper .star-24:before, .star-wrapper .star-24:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-24:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-24:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-25 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 75%;
left: 71%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 9s 3s 2;
animation: twinkle 4s infinite alternate, warp-speed 9s 3s 2;
}
.star-wrapper .star-25:before, .star-wrapper .star-25:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-25:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-25:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-26 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 4%;
left: 95%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 15s 2s 2;
animation: twinkle 4s infinite alternate, warp-speed 15s 2s 2;
}
.star-wrapper .star-26:before, .star-wrapper .star-26:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-26:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-26:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-27 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 88%;
left: 65%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 12s 3s 2;
animation: twinkle 4s infinite alternate, warp-speed 12s 3s 2;
}
.star-wrapper .star-27:before, .star-wrapper .star-27:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-27:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-27:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-28 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 66%;
left: 56%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 17s 2s 2;
animation: twinkle 5s infinite alternate, warp-speed 17s 2s 2;
}
.star-wrapper .star-28:before, .star-wrapper .star-28:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-28:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-28:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-29 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 7%;
left: 73%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 6s 2s 2;
animation: twinkle 5s infinite alternate, warp-speed 6s 2s 2;
}
.star-wrapper .star-29:before, .star-wrapper .star-29:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-29:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-29:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-30 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 91%;
left: 10%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 4s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 4s 2s 2;
}
.star-wrapper .star-30:before, .star-wrapper .star-30:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-30:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-30:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-31 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 82%;
left: 70%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 6s 3s 2;
animation: twinkle 4s infinite alternate, warp-speed 6s 3s 2;
}
.star-wrapper .star-31:before, .star-wrapper .star-31:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-31:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-31:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-32 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 45%;
left: 60%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 10s 3s 2;
animation: twinkle 2s infinite alternate, warp-speed 10s 3s 2;
}
.star-wrapper .star-32:before, .star-wrapper .star-32:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-32:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-32:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-33 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 89%;
left: 83%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 6s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 6s 2s 2;
}
.star-wrapper .star-33:before, .star-wrapper .star-33:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-33:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-33:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-34 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 75%;
left: 78%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 7s 2s 2;
animation: twinkle 2s infinite alternate, warp-speed 7s 2s 2;
}
.star-wrapper .star-34:before, .star-wrapper .star-34:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-34:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-34:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-35 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 69%;
left: 61%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 6s 3s 2;
animation: twinkle 5s infinite alternate, warp-speed 6s 3s 2;
}
.star-wrapper .star-35:before, .star-wrapper .star-35:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-35:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-35:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-36 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 86%;
left: 75%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 13s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 13s 2s 2;
}
.star-wrapper .star-36:before, .star-wrapper .star-36:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-36:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-36:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-37 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 82%;
left: 10%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 17s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 17s 2s 2;
}
.star-wrapper .star-37:before, .star-wrapper .star-37:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-37:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-37:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-38 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 81%;
left: 56%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 14s 2s 2;
animation: twinkle 4s infinite alternate, warp-speed 14s 2s 2;
}
.star-wrapper .star-38:before, .star-wrapper .star-38:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-38:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-38:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-39 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 90%;
left: 66%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 6s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 6s 2s 2;
}
.star-wrapper .star-39:before, .star-wrapper .star-39:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-39:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-39:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-40 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 85%;
left: 6%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 14s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 14s 2s 2;
}
.star-wrapper .star-40:before, .star-wrapper .star-40:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-40:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-40:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-41 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 21%;
left: 96%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 3s 2s 2;
animation: twinkle 4s infinite alternate, warp-speed 3s 2s 2;
}
.star-wrapper .star-41:before, .star-wrapper .star-41:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-41:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-41:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-42 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 21%;
left: 81%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 11s 2s 2;
animation: twinkle 2s infinite alternate, warp-speed 11s 2s 2;
}
.star-wrapper .star-42:before, .star-wrapper .star-42:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-42:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-42:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-43 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 48%;
left: 85%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 15s 2s 2;
animation: twinkle 2s infinite alternate, warp-speed 15s 2s 2;
}
.star-wrapper .star-43:before, .star-wrapper .star-43:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-43:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-43:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-44 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 24%;
left: 66%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 16s 2s 2;
animation: twinkle 3s infinite alternate, warp-speed 16s 2s 2;
}
.star-wrapper .star-44:before, .star-wrapper .star-44:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-44:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-44:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-45 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 94%;
left: 99%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 17s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 17s 3s 2;
}
.star-wrapper .star-45:before, .star-wrapper .star-45:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-45:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-45:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-46 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 81%;
left: 62%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 6s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 6s 3s 2;
}
.star-wrapper .star-46:before, .star-wrapper .star-46:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-46:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-46:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-47 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 33%;
left: 78%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 5s 2s 2;
animation: twinkle 3s infinite alternate, warp-speed 5s 2s 2;
}
.star-wrapper .star-47:before, .star-wrapper .star-47:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-47:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-47:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-48 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 44%;
left: 5%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 12s 3s 2;
animation: twinkle 4s infinite alternate, warp-speed 12s 3s 2;
}
.star-wrapper .star-48:before, .star-wrapper .star-48:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-48:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-48:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-49 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 99%;
left: 66%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 12s 2s 2;
animation: twinkle 3s infinite alternate, warp-speed 12s 2s 2;
}
.star-wrapper .star-49:before, .star-wrapper .star-49:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-49:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-49:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-50 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 97%;
left: 25%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 17s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 17s 3s 2;
}
.star-wrapper .star-50:before, .star-wrapper .star-50:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-50:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-50:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-51 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 73%;
left: 35%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 17s 3s 2;
animation: twinkle 4s infinite alternate, warp-speed 17s 3s 2;
}
.star-wrapper .star-51:before, .star-wrapper .star-51:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-51:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-51:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-52 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 9%;
left: 11%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 7s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 7s 2s 2;
}
.star-wrapper .star-52:before, .star-wrapper .star-52:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-52:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-52:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-53 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 66%;
left: 51%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 3s 2s 2;
animation: twinkle 2s infinite alternate, warp-speed 3s 2s 2;
}
.star-wrapper .star-53:before, .star-wrapper .star-53:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-53:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-53:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-54 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 29%;
left: 25%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 9s 3s 2;
animation: twinkle 4s infinite alternate, warp-speed 9s 3s 2;
}
.star-wrapper .star-54:before, .star-wrapper .star-54:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-54:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-54:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-55 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 96%;
left: 84%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 3s 3s 2;
animation: twinkle 2s infinite alternate, warp-speed 3s 3s 2;
}
.star-wrapper .star-55:before, .star-wrapper .star-55:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-55:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-55:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-56 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 13%;
left: 91%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 14s 2s 2;
animation: twinkle 5s infinite alternate, warp-speed 14s 2s 2;
}
.star-wrapper .star-56:before, .star-wrapper .star-56:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-56:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-56:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-57 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 65%;
left: 79%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 16s 3s 2;
animation: twinkle 2s infinite alternate, warp-speed 16s 3s 2;
}
.star-wrapper .star-57:before, .star-wrapper .star-57:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-57:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-57:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-58 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 36%;
left: 98%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 13s 3s 2;
animation: twinkle 1s infinite alternate, warp-speed 13s 3s 2;
}
.star-wrapper .star-58:before, .star-wrapper .star-58:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-58:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-58:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-59 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 52%;
left: 49%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 14s 2s 2;
animation: twinkle 5s infinite alternate, warp-speed 14s 2s 2;
}
.star-wrapper .star-59:before, .star-wrapper .star-59:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-59:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-59:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-60 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 57%;
left: 35%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 11s 2s 2;
animation: twinkle 3s infinite alternate, warp-speed 11s 2s 2;
}
.star-wrapper .star-60:before, .star-wrapper .star-60:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-60:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-60:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-61 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 36%;
left: 81%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 16s 3s 2;
animation: twinkle 5s infinite alternate, warp-speed 16s 3s 2;
}
.star-wrapper .star-61:before, .star-wrapper .star-61:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-61:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-61:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-62 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 75%;
left: 48%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 9s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 9s 2s 2;
}
.star-wrapper .star-62:before, .star-wrapper .star-62:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-62:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-62:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-63 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 57%;
left: 81%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 4s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 4s 3s 2;
}
.star-wrapper .star-63:before, .star-wrapper .star-63:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-63:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-63:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-64 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 6%;
left: 97%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 11s 2s 2;
animation: twinkle 4s infinite alternate, warp-speed 11s 2s 2;
}
.star-wrapper .star-64:before, .star-wrapper .star-64:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-64:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-64:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-65 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 10%;
left: 95%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 5s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 5s 3s 2;
}
.star-wrapper .star-65:before, .star-wrapper .star-65:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-65:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-65:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-66 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 99%;
left: 3%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 10s 2s 2;
animation: twinkle 4s infinite alternate, warp-speed 10s 2s 2;
}
.star-wrapper .star-66:before, .star-wrapper .star-66:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-66:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-66:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-67 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 37%;
left: 96%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 15s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 15s 2s 2;
}
.star-wrapper .star-67:before, .star-wrapper .star-67:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-67:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-67:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-68 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 56%;
left: 75%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 10s 3s 2;
animation: twinkle 5s infinite alternate, warp-speed 10s 3s 2;
}
.star-wrapper .star-68:before, .star-wrapper .star-68:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-68:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-68:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-69 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 46%;
left: 48%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 7s 2s 2;
animation: twinkle 5s infinite alternate, warp-speed 7s 2s 2;
}
.star-wrapper .star-69:before, .star-wrapper .star-69:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-69:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-69:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-70 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 42%;
left: 86%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 12s 3s 2;
animation: twinkle 2s infinite alternate, warp-speed 12s 3s 2;
}
.star-wrapper .star-70:before, .star-wrapper .star-70:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-70:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-70:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-71 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 88%;
left: 7%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 9s 2s 2;
animation: twinkle 4s infinite alternate, warp-speed 9s 2s 2;
}
.star-wrapper .star-71:before, .star-wrapper .star-71:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-71:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-71:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-72 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 58%;
left: 27%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 17s 3s 2;
animation: twinkle 5s infinite alternate, warp-speed 17s 3s 2;
}
.star-wrapper .star-72:before, .star-wrapper .star-72:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-72:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-72:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-73 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 44%;
left: 1%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 4s 2s 2;
animation: twinkle 2s infinite alternate, warp-speed 4s 2s 2;
}
.star-wrapper .star-73:before, .star-wrapper .star-73:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-73:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-73:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-74 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 68%;
left: 85%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 10s 3s 2;
animation: twinkle 2s infinite alternate, warp-speed 10s 3s 2;
}
.star-wrapper .star-74:before, .star-wrapper .star-74:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-74:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-74:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-75 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 68%;
left: 92%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 5s 2s 2;
animation: twinkle 2s infinite alternate, warp-speed 5s 2s 2;
}
.star-wrapper .star-75:before, .star-wrapper .star-75:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-75:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-75:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-76 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 22%;
left: 71%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 9s 3s 2;
animation: twinkle 1s infinite alternate, warp-speed 9s 3s 2;
}
.star-wrapper .star-76:before, .star-wrapper .star-76:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-76:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-76:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-77 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 31%;
left: 28%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 7s 3s 2;
animation: twinkle 4s infinite alternate, warp-speed 7s 3s 2;
}
.star-wrapper .star-77:before, .star-wrapper .star-77:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-77:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-77:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-78 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 9%;
left: 50%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 3s 2s 2;
animation: twinkle 5s infinite alternate, warp-speed 3s 2s 2;
}
.star-wrapper .star-78:before, .star-wrapper .star-78:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-78:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-78:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-79 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 87%;
left: 26%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 13s 3s 2;
animation: twinkle 5s infinite alternate, warp-speed 13s 3s 2;
}
.star-wrapper .star-79:before, .star-wrapper .star-79:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-79:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-79:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-80 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 2%;
left: 25%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 4s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 4s 3s 2;
}
.star-wrapper .star-80:before, .star-wrapper .star-80:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-80:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-80:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-81 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 63%;
left: 18%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 4s 3s 2;
animation: twinkle 2s infinite alternate, warp-speed 4s 3s 2;
}
.star-wrapper .star-81:before, .star-wrapper .star-81:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-81:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-81:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-82 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 47%;
left: 9%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 13s 3s 2;
animation: twinkle 2s infinite alternate, warp-speed 13s 3s 2;
}
.star-wrapper .star-82:before, .star-wrapper .star-82:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-82:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-82:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-83 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 61%;
left: 41%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 17s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 17s 2s 2;
}
.star-wrapper .star-83:before, .star-wrapper .star-83:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-83:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-83:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-84 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 79%;
left: 32%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 12s 3s 2;
animation: twinkle 5s infinite alternate, warp-speed 12s 3s 2;
}
.star-wrapper .star-84:before, .star-wrapper .star-84:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-84:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-84:after {
height: 25px;
width: 5px;
left: 37%;
}
.star-wrapper .star-85 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 24%;
left: 29%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 11s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 11s 2s 2;
}
.star-wrapper .star-85:before, .star-wrapper .star-85:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-85:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-85:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-86 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 30%;
left: 24%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 7s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 7s 3s 2;
}
.star-wrapper .star-86:before, .star-wrapper .star-86:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-86:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-86:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-87 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 83%;
left: 92%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 17s 3s 2;
animation: twinkle 5s infinite alternate, warp-speed 17s 3s 2;
}
.star-wrapper .star-87:before, .star-wrapper .star-87:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-87:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-87:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-88 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 47%;
left: 26%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 13s 3s 2;
animation: twinkle 2s infinite alternate, warp-speed 13s 3s 2;
}
.star-wrapper .star-88:before, .star-wrapper .star-88:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-88:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-88:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-89 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 59%;
left: 43%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 15s 2s 2;
animation: twinkle 4s infinite alternate, warp-speed 15s 2s 2;
}
.star-wrapper .star-89:before, .star-wrapper .star-89:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-89:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-89:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-90 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 56%;
left: 9%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 16s 2s 2;
animation: twinkle 3s infinite alternate, warp-speed 16s 2s 2;
}
.star-wrapper .star-90:before, .star-wrapper .star-90:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-90:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-90:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-91 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 63%;
left: 4%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 11s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 11s 3s 2;
}
.star-wrapper .star-91:before, .star-wrapper .star-91:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-91:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-91:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-92 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 27%;
left: 78%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 6s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 6s 3s 2;
}
.star-wrapper .star-92:before, .star-wrapper .star-92:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-92:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-92:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-93 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 51%;
left: 63%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 9s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 9s 3s 2;
}
.star-wrapper .star-93:before, .star-wrapper .star-93:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-93:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-93:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-94 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 37%;
left: 95%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 4s 2s 2;
animation: twinkle 4s infinite alternate, warp-speed 4s 2s 2;
}
.star-wrapper .star-94:before, .star-wrapper .star-94:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-94:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-94:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-95 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 97%;
left: 70%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 14s 3s 2;
animation: twinkle 5s infinite alternate, warp-speed 14s 3s 2;
}
.star-wrapper .star-95:before, .star-wrapper .star-95:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-95:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-95:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-96 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 81%;
left: 2%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 5s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 5s 2s 2;
}
.star-wrapper .star-96:before, .star-wrapper .star-96:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-96:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-96:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-97 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 98%;
left: 83%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 16s 3s 2;
animation: twinkle 5s infinite alternate, warp-speed 16s 3s 2;
}
.star-wrapper .star-97:before, .star-wrapper .star-97:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-97:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-97:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-98 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 33%;
left: 39%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 14s 2s 2;
animation: twinkle 2s infinite alternate, warp-speed 14s 2s 2;
}
.star-wrapper .star-98:before, .star-wrapper .star-98:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-98:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-98:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-99 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 20%;
left: 89%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 8s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 8s 3s 2;
}
.star-wrapper .star-99:before, .star-wrapper .star-99:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-99:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-99:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-100 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 59%;
left: 67%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 11s 3s 2;
animation: twinkle 2s infinite alternate, warp-speed 11s 3s 2;
}
.star-wrapper .star-100:before, .star-wrapper .star-100:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-100:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-100:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-101 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 59%;
left: 98%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 4s 3s 2;
animation: twinkle 5s infinite alternate, warp-speed 4s 3s 2;
}
.star-wrapper .star-101:before, .star-wrapper .star-101:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-101:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-101:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-102 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 17%;
left: 27%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 17s 2s 2;
animation: twinkle 2s infinite alternate, warp-speed 17s 2s 2;
}
.star-wrapper .star-102:before, .star-wrapper .star-102:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-102:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-102:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-103 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 86%;
left: 20%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 10s 2s 2;
animation: twinkle 3s infinite alternate, warp-speed 10s 2s 2;
}
.star-wrapper .star-103:before, .star-wrapper .star-103:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-103:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-103:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-104 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 28%;
left: 95%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 10s 2s 2;
animation: twinkle 2s infinite alternate, warp-speed 10s 2s 2;
}
.star-wrapper .star-104:before, .star-wrapper .star-104:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-104:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-104:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-105 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 19%;
left: 32%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 4s 3s 2;
animation: twinkle 5s infinite alternate, warp-speed 4s 3s 2;
}
.star-wrapper .star-105:before, .star-wrapper .star-105:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-105:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-105:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-106 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 43%;
left: 21%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 8s 3s 2;
animation: twinkle 4s infinite alternate, warp-speed 8s 3s 2;
}
.star-wrapper .star-106:before, .star-wrapper .star-106:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-106:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-106:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-107 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 54%;
left: 68%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 9s 2s 2;
animation: twinkle 2s infinite alternate, warp-speed 9s 2s 2;
}
.star-wrapper .star-107:before, .star-wrapper .star-107:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-107:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-107:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-108 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 47%;
left: 58%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 15s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 15s 3s 2;
}
.star-wrapper .star-108:before, .star-wrapper .star-108:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-108:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-108:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-109 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 35%;
left: 60%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 12s 2s 2;
animation: twinkle 1s infinite alternate, warp-speed 12s 2s 2;
}
.star-wrapper .star-109:before, .star-wrapper .star-109:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-109:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-109:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-110 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 41%;
left: 63%;
-webkit-animation: twinkle 5s infinite alternate, warp-speed 11s 2s 2;
animation: twinkle 5s infinite alternate, warp-speed 11s 2s 2;
}
.star-wrapper .star-110:before, .star-wrapper .star-110:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-110:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-110:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-111 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 82%;
left: 59%;
-webkit-animation: twinkle 1s infinite alternate, warp-speed 9s 3s 2;
animation: twinkle 1s infinite alternate, warp-speed 9s 3s 2;
}
.star-wrapper .star-111:before, .star-wrapper .star-111:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-111:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-111:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-112 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
position: absolute;
height: 10px;
width: 8px;
overflow: visible;
top: 32%;
left: 99%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 17s 3s 2;
animation: twinkle 4s infinite alternate, warp-speed 17s 3s 2;
}
.star-wrapper .star-112:before, .star-wrapper .star-112:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-112:before {
height: 2px;
width: 8px;
top: 40%;
}
.star-wrapper .star-112:after {
height: 10px;
width: 2px;
left: 37%;
}
.star-wrapper .star-113 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 26%;
left: 83%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 6s 2s 2;
animation: twinkle 3s infinite alternate, warp-speed 6s 2s 2;
}
.star-wrapper .star-113:before, .star-wrapper .star-113:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-113:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-113:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-114 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 56%;
left: 81%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 17s 2s 2;
animation: twinkle 4s infinite alternate, warp-speed 17s 2s 2;
}
.star-wrapper .star-114:before, .star-wrapper .star-114:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-114:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-114:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-115 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 41%;
left: 5%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 7s 2s 2;
animation: twinkle 4s infinite alternate, warp-speed 7s 2s 2;
}
.star-wrapper .star-115:before, .star-wrapper .star-115:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-115:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-115:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-116 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 1px #f3ddbd);
filter: drop-shadow(0px 0px 1px #f3ddbd);
position: absolute;
height: 5px;
width: 4px;
overflow: visible;
top: 62%;
left: 46%;
-webkit-animation: twinkle 4s infinite alternate, warp-speed 11s 3s 2;
animation: twinkle 4s infinite alternate, warp-speed 11s 3s 2;
}
.star-wrapper .star-116:before, .star-wrapper .star-116:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-116:before {
height: 1px;
width: 4px;
top: 40%;
}
.star-wrapper .star-116:after {
height: 5px;
width: 1px;
left: 37%;
}
.star-wrapper .star-117 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 4px #f3ddbd);
filter: drop-shadow(0px 0px 4px #f3ddbd);
position: absolute;
height: 20px;
width: 16px;
overflow: visible;
top: 70%;
left: 57%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 5s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 5s 3s 2;
}
.star-wrapper .star-117:before, .star-wrapper .star-117:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-117:before {
height: 4px;
width: 16px;
top: 40%;
}
.star-wrapper .star-117:after {
height: 20px;
width: 4px;
left: 37%;
}
.star-wrapper .star-118 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 3px #f3ddbd);
filter: drop-shadow(0px 0px 3px #f3ddbd);
position: absolute;
height: 15px;
width: 12px;
overflow: visible;
top: 11%;
left: 77%;
-webkit-animation: twinkle 3s infinite alternate, warp-speed 10s 3s 2;
animation: twinkle 3s infinite alternate, warp-speed 10s 3s 2;
}
.star-wrapper .star-118:before, .star-wrapper .star-118:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-118:before {
height: 3px;
width: 12px;
top: 40%;
}
.star-wrapper .star-118:after {
height: 15px;
width: 3px;
left: 37%;
}
.star-wrapper .star-119 {
list-style: none;
-webkit-filter: drop-shadow(0px 0px 5px #f3ddbd);
filter: drop-shadow(0px 0px 5px #f3ddbd);
position: absolute;
height: 25px;
width: 20px;
overflow: visible;
top: 43%;
left: 46%;
-webkit-animation: twinkle 2s infinite alternate, warp-speed 3s 3s 2;
animation: twinkle 2s infinite alternate, warp-speed 3s 3s 2;
}
.star-wrapper .star-119:before, .star-wrapper .star-119:after {
content: '';
position: absolute;
background: #f3ddbd;
border-radius: 50%;
}
.star-wrapper .star-119:before {
height: 5px;
width: 20px;
top: 40%;
}
.star-wrapper .star-119:after {
height: 25px;
width: 5px;
left: 37%;
}
@-webkit-keyframes twinkle {
0% {
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
50% {
-webkit-filter: drop-shadow(0px 0px 6px #f3ddbd);
filter: drop-shadow(0px 0px 6px #f3ddbd);
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
@keyframes twinkle {
0% {
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
50% {
-webkit-filter: drop-shadow(0px 0px 6px #f3ddbd);
filter: drop-shadow(0px 0px 6px #f3ddbd);
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-filter: drop-shadow(0px 0px 2px #f3ddbd);
filter: drop-shadow(0px 0px 2px #f3ddbd);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
@-webkit-keyframes warp-speed {
0% {
-webkit-transform: translate(0);
transform: translate(0);
opacity: 1;
}
50% {
opacity: .2;
-webkit-transform: translate(-700px);
transform: translate(-700px);
}
51% {
opacity: 0;
-webkit-transform: translate(-700px);
transform: translate(-700px);
}
52% {
opacity: 0;
-webkit-transform: translate(700px);
transform: translate(700px);
}
53% {
opacity: 1;
-webkit-transform: translate(700px);
transform: translate(700px);
}
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
}
}
@keyframes warp-speed {
0% {
-webkit-transform: translate(0);
transform: translate(0);
opacity: 1;
}
50% {
opacity: .2;
-webkit-transform: translate(-700px);
transform: translate(-700px);
}
51% {
opacity: 0;
-webkit-transform: translate(-700px);
transform: translate(-700px);
}
52% {
opacity: 0;
-webkit-transform: translate(700px);
transform: translate(700px);
}
53% {
opacity: 1;
-webkit-transform: translate(700px);
transform: translate(700px);
}
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
}
}
@-webkit-keyframes flicker {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@keyframes flicker {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@-webkit-keyframes fly {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes fly {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@-webkit-keyframes take-off {
0% {
-webkit-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px);
}
20% {
-webkit-transform: translateX(3px) translateY(-15px);
transform: translateX(3px) translateY(-15px);
}
40% {
-webkit-transform: translateX(-3px) translateY(0px);
transform: translateX(-3px) translateY(0px);
}
60% {
-webkit-transform: translateX(0px) translateY(-15px);
transform: translateX(0px) translateY(-15px);
}
80% {
-webkit-transform: translateX(3px) translateY(0px);
transform: translateX(3px) translateY(0px);
}
100% {
-webkit-transform: translateX(-3px) translateY(-15px);
transform: translateX(-3px) translateY(-15px);
}
}
@keyframes take-off {
0% {
-webkit-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px);
}
20% {
-webkit-transform: translateX(3px) translateY(-15px);
transform: translateX(3px) translateY(-15px);
}
40% {
-webkit-transform: translateX(-3px) translateY(0px);
transform: translateX(-3px) translateY(0px);
}
60% {
-webkit-transform: translateX(0px) translateY(-15px);
transform: translateX(0px) translateY(-15px);
}
80% {
-webkit-transform: translateX(3px) translateY(0px);
transform: translateX(3px) translateY(0px);
}
100% {
-webkit-transform: translateX(-3px) translateY(-15px);
transform: translateX(-3px) translateY(-15px);
}
}
@-webkit-keyframes exhaust {
from {
width: 0;
background-image: transparent;
}
to {
width: 300px;
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.05)), color-stop(rgba(255, 255, 255, 0.2)), to(transparent));
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.2), transparent);
}
}
@keyframes exhaust {
from {
width: 0;
background-image: transparent;
}
to {
width: 300px;
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.05)), color-stop(rgba(255, 255, 255, 0.2)), to(transparent));
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.2), transparent);
}
}