body,
html {
margin: 0;
padding: 0;
background: #002142;
margin-top: -50px;
}
.con {
width: 100%;
background: #002142;
height: 900px;
position: relative;
overflow: hidden;
}
.header {
border: 5px solid #FEFDE8;
width: 200px;
height: 200px;
position: absolute;
font-family: "Palanquin", sans-serif;
color: #FEFDE8;
right: 0%;
transform: translateX(-50%);
margin-top: 450px;
text-align: center;
margin-left: 0;
}
.shoot:nth-child(1) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-1 3s linear 1;
animation-delay: 0.01s;
}
@keyframes shoot-1 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 182px;
width: 0px;
height: 0px;
}
}
.shoot:nth-child(2) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-2 2s linear 1;
animation-delay: 0.02s;
}
@keyframes shoot-2 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 154px;
width: 0px;
height: 0px;
}
}
.shoot:nth-child(3) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-3 4s linear 1;
animation-delay: 0.03s;
}
@keyframes shoot-3 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 161px;
width: 0px;
height: 0px;
}
}
.shoot:nth-child(4) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-4 3s linear 1;
animation-delay: 0.04s;
}
@keyframes shoot-4 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 151px;
width: 0px;
height: 0px;
}
}
.shoot:nth-child(5) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-5 3s linear 1;
animation-delay: 0.05s;
}
@keyframes shoot-5 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 164px;
width: 0px;
height: 0px;
}
}
.shoot:nth-child(6) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-6 4s linear 1;
animation-delay: 0.06s;
}
@keyframes shoot-6 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 182px;
width: 0px;
height: 0px;
}
}
.shoot:nth-child(7) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-7 3s linear 1;
animation-delay: 0.07s;
}
@keyframes shoot-7 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 176px;
width: 0px;
height: 0px;
}
}
.shoot:nth-child(8) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-8 4s linear 1;
animation-delay: 0.08s;
}
@keyframes shoot-8 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 190px;
width: 0px;
height: 0px;
}
}
.moon:nth-child(1) {
width: 100px;
height: 100px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.2;
position: absolute;
z-index: 10;
margin-left: calc(50% - 100px/2);
margin-top: calc(400px - 100px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.moon:nth-child(2) {
width: 200px;
height: 200px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.1;
position: absolute;
z-index: 10;
margin-left: calc(50% - 200px/2);
margin-top: calc(400px - 200px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.moon:nth-child(3) {
width: 300px;
height: 300px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.0666666667;
position: absolute;
z-index: 10;
margin-left: calc(50% - 300px/2);
margin-top: calc(400px - 300px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.moon:nth-child(4) {
width: 400px;
height: 400px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.05;
position: absolute;
z-index: 10;
margin-left: calc(50% - 400px/2);
margin-top: calc(400px - 400px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.moon:nth-child(5) {
width: 500px;
height: 500px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.04;
position: absolute;
z-index: 10;
margin-left: calc(50% - 500px/2);
margin-top: calc(400px - 500px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.moon:nth-child(6) {
width: 600px;
height: 600px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.0333333333;
position: absolute;
z-index: 10;
margin-left: calc(50% - 600px/2);
margin-top: calc(400px - 600px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.moon:nth-child(7) {
width: 700px;
height: 700px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.0285714286;
position: absolute;
z-index: 10;
margin-left: calc(50% - 700px/2);
margin-top: calc(400px - 700px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.moon:nth-child(8) {
width: 800px;
height: 800px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.025;
position: absolute;
z-index: 10;
margin-left: calc(50% - 800px/2);
margin-top: calc(400px - 800px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.stars {
width: 100%;
height: 875px;
overflow: hidden;
margin: 0 auto;
margin-top: 0px;
position: relative;
}
.star:nth-child(0) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 559px;
margin-top: 488px;
animation: twinkle-0 1s linear infinite;
animation-delay: 0s;
}
@keyframes twinkle-0 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(1) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 667px;
margin-top: 363px;
animation: twinkle-1 1s linear infinite;
animation-delay: 0.01s;
}
@keyframes twinkle-1 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(2) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1028px;
margin-top: 358px;
animation: twinkle-2 1s linear infinite;
animation-delay: 0.02s;
}
@keyframes twinkle-2 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(3) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 885px;
margin-top: 75px;
animation: twinkle-3 1s linear infinite;
animation-delay: 0.03s;
}
@keyframes twinkle-3 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(4) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1491px;
margin-top: 547px;
animation: twinkle-4 1s linear infinite;
animation-delay: 0.04s;
}
@keyframes twinkle-4 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(5) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1249px;
margin-top: 260px;
animation: twinkle-5 1s linear infinite;
animation-delay: 0.05s;
}
@keyframes twinkle-5 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(6) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 259px;
margin-top: 447px;
animation: twinkle-6 1s linear infinite;
animation-delay: 0.06s;
}
@keyframes twinkle-6 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(7) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1144px;
margin-top: 562px;
animation: twinkle-7 1s linear infinite;
animation-delay: 0.07s;
}
@keyframes twinkle-7 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(8) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 633px;
margin-top: 757px;
animation: twinkle-8 1s linear infinite;
animation-delay: 0.08s;
}
@keyframes twinkle-8 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(9) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 43px;
margin-top: 238px;
animation: twinkle-9 1s linear infinite;
animation-delay: 0.09s;
}
@keyframes twinkle-9 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(10) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 813px;
margin-top: 26px;
animation: twinkle-10 1s linear infinite;
animation-delay: 0.1s;
}
@keyframes twinkle-10 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(11) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 869px;
margin-top: 779px;
animation: twinkle-11 1s linear infinite;
animation-delay: 0.11s;
}
@keyframes twinkle-11 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(12) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 636px;
margin-top: 530px;
animation: twinkle-12 1s linear infinite;
animation-delay: 0.12s;
}
@keyframes twinkle-12 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(13) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1093px;
margin-top: 620px;
animation: twinkle-13 1s linear infinite;
animation-delay: 0.13s;
}
@keyframes twinkle-13 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(14) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1359px;
margin-top: 793px;
animation: twinkle-14 1s linear infinite;
animation-delay: 0.14s;
}
@keyframes twinkle-14 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(15) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 801px;
margin-top: 544px;
animation: twinkle-15 1s linear infinite;
animation-delay: 0.15s;
}
@keyframes twinkle-15 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(16) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 19px;
margin-top: 364px;
animation: twinkle-16 1s linear infinite;
animation-delay: 0.16s;
}
@keyframes twinkle-16 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(17) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 599px;
margin-top: 755px;
animation: twinkle-17 1s linear infinite;
animation-delay: 0.17s;
}
@keyframes twinkle-17 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(18) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1324px;
margin-top: 850px;
animation: twinkle-18 1s linear infinite;
animation-delay: 0.18s;
}
@keyframes twinkle-18 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(19) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1472px;
margin-top: 507px;
animation: twinkle-19 1s linear infinite;
animation-delay: 0.19s;
}
@keyframes twinkle-19 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(20) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 146px;
margin-top: 428px;
animation: twinkle-20 1s linear infinite;
animation-delay: 0.2s;
}
@keyframes twinkle-20 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(21) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1048px;
margin-top: 287px;
animation: twinkle-21 1s linear infinite;
animation-delay: 0.21s;
}
@keyframes twinkle-21 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(22) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 108px;
margin-top: 475px;
animation: twinkle-22 1s linear infinite;
animation-delay: 0.22s;
}
@keyframes twinkle-22 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(23) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 700px;
margin-top: 680px;
animation: twinkle-23 1s linear infinite;
animation-delay: 0.23s;
}
@keyframes twinkle-23 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(24) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 78px;
margin-top: 566px;
animation: twinkle-24 1s linear infinite;
animation-delay: 0.24s;
}
@keyframes twinkle-24 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(25) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1037px;
margin-top: 482px;
animation: twinkle-25 1s linear infinite;
animation-delay: 0.25s;
}
@keyframes twinkle-25 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(26) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 51px;
margin-top: 3px;
animation: twinkle-26 1s linear infinite;
animation-delay: 0.26s;
}
@keyframes twinkle-26 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(27) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1489px;
margin-top: 813px;
animation: twinkle-27 1s linear infinite;
animation-delay: 0.27s;
}
@keyframes twinkle-27 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(28) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 40px;
margin-top: 552px;
animation: twinkle-28 1s linear infinite;
animation-delay: 0.28s;
}
@keyframes twinkle-28 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(29) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 487px;
margin-top: 83px;
animation: twinkle-29 1s linear infinite;
animation-delay: 0.29s;
}
@keyframes twinkle-29 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(30) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 677px;
margin-top: 287px;
animation: twinkle-30 1s linear infinite;
animation-delay: 0.3s;
}
@keyframes twinkle-30 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(31) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 159px;
margin-top: 93px;
animation: twinkle-31 1s linear infinite;
animation-delay: 0.31s;
}
@keyframes twinkle-31 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(32) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1278px;
margin-top: 115px;
animation: twinkle-32 1s linear infinite;
animation-delay: 0.32s;
}
@keyframes twinkle-32 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(33) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 291px;
margin-top: 115px;
animation: twinkle-33 1s linear infinite;
animation-delay: 0.33s;
}
@keyframes twinkle-33 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(34) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1499px;
margin-top: 218px;
animation: twinkle-34 1s linear infinite;
animation-delay: 0.34s;
}
@keyframes twinkle-34 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(35) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1300px;
margin-top: 840px;
animation: twinkle-35 1s linear infinite;
animation-delay: 0.35s;
}
@keyframes twinkle-35 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(36) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1200px;
margin-top: 825px;
animation: twinkle-36 1s linear infinite;
animation-delay: 0.36s;
}
@keyframes twinkle-36 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(37) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 55px;
margin-top: 737px;
animation: twinkle-37 1s linear infinite;
animation-delay: 0.37s;
}
@keyframes twinkle-37 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(38) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 741px;
margin-top: 6px;
animation: twinkle-38 1s linear infinite;
animation-delay: 0.38s;
}
@keyframes twinkle-38 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(39) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 493px;
margin-top: 468px;
animation: twinkle-39 1s linear infinite;
animation-delay: 0.39s;
}
@keyframes twinkle-39 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(40) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 656px;
margin-top: 131px;
animation: twinkle-40 1s linear infinite;
animation-delay: 0.4s;
}
@keyframes twinkle-40 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(41) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 52px;
margin-top: 251px;
animation: twinkle-41 1s linear infinite;
animation-delay: 0.41s;
}
@keyframes twinkle-41 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(42) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 345px;
margin-top: 531px;
animation: twinkle-42 1s linear infinite;
animation-delay: 0.42s;
}
@keyframes twinkle-42 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(43) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 921px;
margin-top: 829px;
animation: twinkle-43 1s linear infinite;
animation-delay: 0.43s;
}
@keyframes twinkle-43 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(44) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1103px;
margin-top: 558px;
animation: twinkle-44 1s linear infinite;
animation-delay: 0.44s;
}
@keyframes twinkle-44 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(45) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 314px;
margin-top: 63px;
animation: twinkle-45 1s linear infinite;
animation-delay: 0.45s;
}
@keyframes twinkle-45 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(46) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 532px;
margin-top: 423px;
animation: twinkle-46 1s linear infinite;
animation-delay: 0.46s;
}
@keyframes twinkle-46 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(47) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1066px;
margin-top: 505px;
animation: twinkle-47 1s linear infinite;
animation-delay: 0.47s;
}
@keyframes twinkle-47 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(48) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 709px;
margin-top: 136px;
animation: twinkle-48 1s linear infinite;
animation-delay: 0.48s;
}
@keyframes twinkle-48 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(49) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1340px;
margin-top: 254px;
animation: twinkle-49 1s linear infinite;
animation-delay: 0.49s;
}
@keyframes twinkle-49 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(50) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 452px;
margin-top: 215px;
animation: twinkle-50 1s linear infinite;
animation-delay: 0.5s;
}
@keyframes twinkle-50 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(51) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 320px;
margin-top: 277px;
animation: twinkle-51 1s linear infinite;
animation-delay: 0.51s;
}
@keyframes twinkle-51 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(52) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 489px;
margin-top: 176px;
animation: twinkle-52 1s linear infinite;
animation-delay: 0.52s;
}
@keyframes twinkle-52 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(53) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 60px;
margin-top: 264px;
animation: twinkle-53 1s linear infinite;
animation-delay: 0.53s;
}
@keyframes twinkle-53 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(54) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1466px;
margin-top: 95px;
animation: twinkle-54 1s linear infinite;
animation-delay: 0.54s;
}
@keyframes twinkle-54 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(55) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1112px;
margin-top: 527px;
animation: twinkle-55 1s linear infinite;
animation-delay: 0.55s;
}
@keyframes twinkle-55 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(56) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1264px;
margin-top: 337px;
animation: twinkle-56 1s linear infinite;
animation-delay: 0.56s;
}
@keyframes twinkle-56 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(57) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 442px;
margin-top: 455px;
animation: twinkle-57 1s linear infinite;
animation-delay: 0.57s;
}
@keyframes twinkle-57 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(58) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 840px;
margin-top: 592px;
animation: twinkle-58 1s linear infinite;
animation-delay: 0.58s;
}
@keyframes twinkle-58 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(59) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1014px;
margin-top: 220px;
animation: twinkle-59 1s linear infinite;
animation-delay: 0.59s;
}
@keyframes twinkle-59 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(60) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 908px;
margin-top: 278px;
animation: twinkle-60 1s linear infinite;
animation-delay: 0.6s;
}
@keyframes twinkle-60 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(61) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 274px;
margin-top: 794px;
animation: twinkle-61 1s linear infinite;
animation-delay: 0.61s;
}
@keyframes twinkle-61 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(62) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 225px;
margin-top: 616px;
animation: twinkle-62 1s linear infinite;
animation-delay: 0.62s;
}
@keyframes twinkle-62 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(63) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 583px;
margin-top: 232px;
animation: twinkle-63 1s linear infinite;
animation-delay: 0.63s;
}
@keyframes twinkle-63 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(64) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 382px;
margin-top: 119px;
animation: twinkle-64 1s linear infinite;
animation-delay: 0.64s;
}
@keyframes twinkle-64 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(65) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 224px;
margin-top: 450px;
animation: twinkle-65 1s linear infinite;
animation-delay: 0.65s;
}
@keyframes twinkle-65 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(66) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1350px;
margin-top: 312px;
animation: twinkle-66 1s linear infinite;
animation-delay: 0.66s;
}
@keyframes twinkle-66 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(67) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1135px;
margin-top: 387px;
animation: twinkle-67 1s linear infinite;
animation-delay: 0.67s;
}
@keyframes twinkle-67 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(68) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 968px;
margin-top: 812px;
animation: twinkle-68 1s linear infinite;
animation-delay: 0.68s;
}
@keyframes twinkle-68 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(69) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 775px;
margin-top: 727px;
animation: twinkle-69 1s linear infinite;
animation-delay: 0.69s;
}
@keyframes twinkle-69 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(70) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 287px;
margin-top: 325px;
animation: twinkle-70 1s linear infinite;
animation-delay: 0.7s;
}
@keyframes twinkle-70 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(71) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 884px;
margin-top: 827px;
animation: twinkle-71 1s linear infinite;
animation-delay: 0.71s;
}
@keyframes twinkle-71 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(72) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 554px;
margin-top: 438px;
animation: twinkle-72 1s linear infinite;
animation-delay: 0.72s;
}
@keyframes twinkle-72 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(73) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1414px;
margin-top: 450px;
animation: twinkle-73 1s linear infinite;
animation-delay: 0.73s;
}
@keyframes twinkle-73 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(74) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1314px;
margin-top: 434px;
animation: twinkle-74 1s linear infinite;
animation-delay: 0.74s;
}
@keyframes twinkle-74 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(75) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 874px;
margin-top: 259px;
animation: twinkle-75 1s linear infinite;
animation-delay: 0.75s;
}
@keyframes twinkle-75 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(76) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 117px;
margin-top: 181px;
animation: twinkle-76 1s linear infinite;
animation-delay: 0.76s;
}
@keyframes twinkle-76 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(77) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1096px;
margin-top: 160px;
animation: twinkle-77 1s linear infinite;
animation-delay: 0.77s;
}
@keyframes twinkle-77 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(78) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 822px;
margin-top: 10px;
animation: twinkle-78 1s linear infinite;
animation-delay: 0.78s;
}
@keyframes twinkle-78 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(79) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1482px;
margin-top: 495px;
animation: twinkle-79 1s linear infinite;
animation-delay: 0.79s;
}
@keyframes twinkle-79 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(80) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 757px;
margin-top: 584px;
animation: twinkle-80 1s linear infinite;
animation-delay: 0.8s;
}
@keyframes twinkle-80 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(81) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 83px;
margin-top: 258px;
animation: twinkle-81 1s linear infinite;
animation-delay: 0.81s;
}
@keyframes twinkle-81 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(82) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1113px;
margin-top: 543px;
animation: twinkle-82 1s linear infinite;
animation-delay: 0.82s;
}
@keyframes twinkle-82 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(83) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1007px;
margin-top: 53px;
animation: twinkle-83 1s linear infinite;
animation-delay: 0.83s;
}
@keyframes twinkle-83 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(84) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 662px;
margin-top: 805px;
animation: twinkle-84 1s linear infinite;
animation-delay: 0.84s;
}
@keyframes twinkle-84 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(85) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 595px;
margin-top: 568px;
animation: twinkle-85 1s linear infinite;
animation-delay: 0.85s;
}
@keyframes twinkle-85 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(86) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 960px;
margin-top: 422px;
animation: twinkle-86 1s linear infinite;
animation-delay: 0.86s;
}
@keyframes twinkle-86 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(87) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 831px;
margin-top: 199px;
animation: twinkle-87 1s linear infinite;
animation-delay: 0.87s;
}
@keyframes twinkle-87 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(88) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1470px;
margin-top: 279px;
animation: twinkle-88 1s linear infinite;
animation-delay: 0.88s;
}
@keyframes twinkle-88 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(89) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 371px;
margin-top: 627px;
animation: twinkle-89 1s linear infinite;
animation-delay: 0.89s;
}
@keyframes twinkle-89 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(90) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 699px;
margin-top: 435px;
animation: twinkle-90 1s linear infinite;
animation-delay: 0.9s;
}
@keyframes twinkle-90 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(91) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 746px;
margin-top: 680px;
animation: twinkle-91 1s linear infinite;
animation-delay: 0.91s;
}
@keyframes twinkle-91 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(92) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 945px;
margin-top: 543px;
animation: twinkle-92 1s linear infinite;
animation-delay: 0.92s;
}
@keyframes twinkle-92 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(93) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 83px;
margin-top: 611px;
animation: twinkle-93 1s linear infinite;
animation-delay: 0.93s;
}
@keyframes twinkle-93 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(94) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 590px;
margin-top: 676px;
animation: twinkle-94 1s linear infinite;
animation-delay: 0.94s;
}
@keyframes twinkle-94 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(95) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 905px;
margin-top: 539px;
animation: twinkle-95 1s linear infinite;
animation-delay: 0.95s;
}
@keyframes twinkle-95 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(96) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1084px;
margin-top: 5px;
animation: twinkle-96 1s linear infinite;
animation-delay: 0.96s;
}
@keyframes twinkle-96 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(97) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 801px;
margin-top: 765px;
animation: twinkle-97 1s linear infinite;
animation-delay: 0.97s;
}
@keyframes twinkle-97 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(98) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 109px;
margin-top: 268px;
animation: twinkle-98 1s linear infinite;
animation-delay: 0.98s;
}
@keyframes twinkle-98 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(99) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 691px;
margin-top: 70px;
animation: twinkle-99 1s linear infinite;
animation-delay: 0.99s;
}
@keyframes twinkle-99 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(100) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1095px;
margin-top: 432px;
animation: twinkle-100 1s linear infinite;
animation-delay: 1s;
}
@keyframes twinkle-100 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(101) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 827px;
margin-top: 259px;
animation: twinkle-101 1s linear infinite;
animation-delay: 1.01s;
}
@keyframes twinkle-101 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(102) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 741px;
margin-top: 59px;
animation: twinkle-102 1s linear infinite;
animation-delay: 1.02s;
}
@keyframes twinkle-102 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(103) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1170px;
margin-top: 485px;
animation: twinkle-103 1s linear infinite;
animation-delay: 1.03s;
}
@keyframes twinkle-103 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(104) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 605px;
margin-top: 86px;
animation: twinkle-104 1s linear infinite;
animation-delay: 1.04s;
}
@keyframes twinkle-104 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(105) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 378px;
margin-top: 707px;
animation: twinkle-105 1s linear infinite;
animation-delay: 1.05s;
}
@keyframes twinkle-105 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(106) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 72px;
margin-top: 803px;
animation: twinkle-106 1s linear infinite;
animation-delay: 1.06s;
}
@keyframes twinkle-106 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(107) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 28px;
margin-top: 215px;
animation: twinkle-107 1s linear infinite;
animation-delay: 1.07s;
}
@keyframes twinkle-107 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(108) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 328px;
margin-top: 846px;
animation: twinkle-108 1s linear infinite;
animation-delay: 1.08s;
}
@keyframes twinkle-108 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(109) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1015px;
margin-top: 559px;
animation: twinkle-109 1s linear infinite;
animation-delay: 1.09s;
}
@keyframes twinkle-109 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(110) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 113px;
margin-top: 359px;
animation: twinkle-110 1s linear infinite;
animation-delay: 1.1s;
}
@keyframes twinkle-110 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(111) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1168px;
margin-top: 594px;
animation: twinkle-111 1s linear infinite;
animation-delay: 1.11s;
}
@keyframes twinkle-111 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(112) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1408px;
margin-top: 278px;
animation: twinkle-112 1s linear infinite;
animation-delay: 1.12s;
}
@keyframes twinkle-112 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(113) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 259px;
margin-top: 403px;
animation: twinkle-113 1s linear infinite;
animation-delay: 1.13s;
}
@keyframes twinkle-113 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(114) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 592px;
margin-top: 73px;
animation: twinkle-114 1s linear infinite;
animation-delay: 1.14s;
}
@keyframes twinkle-114 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(115) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 103px;
margin-top: 621px;
animation: twinkle-115 1s linear infinite;
animation-delay: 1.15s;
}
@keyframes twinkle-115 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(116) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 518px;
margin-top: 170px;
animation: twinkle-116 1s linear infinite;
animation-delay: 1.16s;
}
@keyframes twinkle-116 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(117) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1261px;
margin-top: 592px;
animation: twinkle-117 1s linear infinite;
animation-delay: 1.17s;
}
@keyframes twinkle-117 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(118) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1083px;
margin-top: 506px;
animation: twinkle-118 1s linear infinite;
animation-delay: 1.18s;
}
@keyframes twinkle-118 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(119) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1156px;
margin-top: 550px;
animation: twinkle-119 1s linear infinite;
animation-delay: 1.19s;
}
@keyframes twinkle-119 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(120) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 882px;
margin-top: 597px;
animation: twinkle-120 1s linear infinite;
animation-delay: 1.2s;
}
@keyframes twinkle-120 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(121) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 272px;
margin-top: 95px;
animation: twinkle-121 1s linear infinite;
animation-delay: 1.21s;
}
@keyframes twinkle-121 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(122) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1356px;
margin-top: 517px;
animation: twinkle-122 1s linear infinite;
animation-delay: 1.22s;
}
@keyframes twinkle-122 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(123) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1397px;
margin-top: 183px;
animation: twinkle-123 1s linear infinite;
animation-delay: 1.23s;
}
@keyframes twinkle-123 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(124) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 969px;
margin-top: 53px;
animation: twinkle-124 1s linear infinite;
animation-delay: 1.24s;
}
@keyframes twinkle-124 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(125) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 299px;
margin-top: 187px;
animation: twinkle-125 1s linear infinite;
animation-delay: 1.25s;
}
@keyframes twinkle-125 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(126) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 432px;
margin-top: 748px;
animation: twinkle-126 1s linear infinite;
animation-delay: 1.26s;
}
@keyframes twinkle-126 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(127) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1359px;
margin-top: 651px;
animation: twinkle-127 1s linear infinite;
animation-delay: 1.27s;
}
@keyframes twinkle-127 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(128) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 427px;
margin-top: 784px;
animation: twinkle-128 1s linear infinite;
animation-delay: 1.28s;
}
@keyframes twinkle-128 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(129) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 616px;
margin-top: 636px;
animation: twinkle-129 1s linear infinite;
animation-delay: 1.29s;
}
@keyframes twinkle-129 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(130) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 715px;
margin-top: 346px;
animation: twinkle-130 1s linear infinite;
animation-delay: 1.3s;
}
@keyframes twinkle-130 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(131) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 996px;
margin-top: 753px;
animation: twinkle-131 1s linear infinite;
animation-delay: 1.31s;
}
@keyframes twinkle-131 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(132) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1114px;
margin-top: 857px;
animation: twinkle-132 1s linear infinite;
animation-delay: 1.32s;
}
@keyframes twinkle-132 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(133) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1317px;
margin-top: 579px;
animation: twinkle-133 1s linear infinite;
animation-delay: 1.33s;
}
@keyframes twinkle-133 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(134) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 742px;
margin-top: 252px;
animation: twinkle-134 1s linear infinite;
animation-delay: 1.34s;
}
@keyframes twinkle-134 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(135) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1180px;
margin-top: 245px;
animation: twinkle-135 1s linear infinite;
animation-delay: 1.35s;
}
@keyframes twinkle-135 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(136) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 454px;
margin-top: 752px;
animation: twinkle-136 1s linear infinite;
animation-delay: 1.36s;
}
@keyframes twinkle-136 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(137) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 395px;
margin-top: 590px;
animation: twinkle-137 1s linear infinite;
animation-delay: 1.37s;
}
@keyframes twinkle-137 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(138) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 415px;
margin-top: 475px;
animation: twinkle-138 1s linear infinite;
animation-delay: 1.38s;
}
@keyframes twinkle-138 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(139) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 634px;
margin-top: 228px;
animation: twinkle-139 1s linear infinite;
animation-delay: 1.39s;
}
@keyframes twinkle-139 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(140) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 690px;
margin-top: 637px;
animation: twinkle-140 1s linear infinite;
animation-delay: 1.4s;
}
@keyframes twinkle-140 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(141) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 759px;
margin-top: 814px;
animation: twinkle-141 1s linear infinite;
animation-delay: 1.41s;
}
@keyframes twinkle-141 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(142) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1328px;
margin-top: 153px;
animation: twinkle-142 1s linear infinite;
animation-delay: 1.42s;
}
@keyframes twinkle-142 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(143) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 744px;
margin-top: 758px;
animation: twinkle-143 1s linear infinite;
animation-delay: 1.43s;
}
@keyframes twinkle-143 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(144) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 651px;
margin-top: 474px;
animation: twinkle-144 1s linear infinite;
animation-delay: 1.44s;
}
@keyframes twinkle-144 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(145) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 896px;
margin-top: 791px;
animation: twinkle-145 1s linear infinite;
animation-delay: 1.45s;
}
@keyframes twinkle-145 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(146) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 497px;
margin-top: 485px;
animation: twinkle-146 1s linear infinite;
animation-delay: 1.46s;
}
@keyframes twinkle-146 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(147) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 914px;
margin-top: 642px;
animation: twinkle-147 1s linear infinite;
animation-delay: 1.47s;
}
@keyframes twinkle-147 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(148) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 614px;
margin-top: 145px;
animation: twinkle-148 1s linear infinite;
animation-delay: 1.48s;
}
@keyframes twinkle-148 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(149) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 320px;
margin-top: 209px;
animation: twinkle-149 1s linear infinite;
animation-delay: 1.49s;
}
@keyframes twinkle-149 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(150) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 85px;
margin-top: 665px;
animation: twinkle-150 1s linear infinite;
animation-delay: 1.5s;
}
@keyframes twinkle-150 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(151) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 655px;
margin-top: 755px;
animation: twinkle-151 1s linear infinite;
animation-delay: 1.51s;
}
@keyframes twinkle-151 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(152) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 488px;
margin-top: 374px;
animation: twinkle-152 1s linear infinite;
animation-delay: 1.52s;
}
@keyframes twinkle-152 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(153) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1227px;
margin-top: 456px;
animation: twinkle-153 1s linear infinite;
animation-delay: 1.53s;
}
@keyframes twinkle-153 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(154) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 784px;
margin-top: 827px;
animation: twinkle-154 1s linear infinite;
animation-delay: 1.54s;
}
@keyframes twinkle-154 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(155) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1142px;
margin-top: 386px;
animation: twinkle-155 1s linear infinite;
animation-delay: 1.55s;
}
@keyframes twinkle-155 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(156) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 25px;
margin-top: 285px;
animation: twinkle-156 1s linear infinite;
animation-delay: 1.56s;
}
@keyframes twinkle-156 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(157) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1373px;
margin-top: 27px;
animation: twinkle-157 1s linear infinite;
animation-delay: 1.57s;
}
@keyframes twinkle-157 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(158) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 705px;
margin-top: 469px;
animation: twinkle-158 1s linear infinite;
animation-delay: 1.58s;
}
@keyframes twinkle-158 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(159) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1487px;
margin-top: 763px;
animation: twinkle-159 1s linear infinite;
animation-delay: 1.59s;
}
@keyframes twinkle-159 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(160) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1222px;
margin-top: 631px;
animation: twinkle-160 1s linear infinite;
animation-delay: 1.6s;
}
@keyframes twinkle-160 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(161) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1234px;
margin-top: 155px;
animation: twinkle-161 1s linear infinite;
animation-delay: 1.61s;
}
@keyframes twinkle-161 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(162) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1398px;
margin-top: 144px;
animation: twinkle-162 1s linear infinite;
animation-delay: 1.62s;
}
@keyframes twinkle-162 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(163) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 767px;
margin-top: 324px;
animation: twinkle-163 1s linear infinite;
animation-delay: 1.63s;
}
@keyframes twinkle-163 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(164) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 798px;
margin-top: 131px;
animation: twinkle-164 1s linear infinite;
animation-delay: 1.64s;
}
@keyframes twinkle-164 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(165) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 780px;
margin-top: 189px;
animation: twinkle-165 1s linear infinite;
animation-delay: 1.65s;
}
@keyframes twinkle-165 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(166) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 930px;
margin-top: 276px;
animation: twinkle-166 1s linear infinite;
animation-delay: 1.66s;
}
@keyframes twinkle-166 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(167) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 400px;
margin-top: 253px;
animation: twinkle-167 1s linear infinite;
animation-delay: 1.67s;
}
@keyframes twinkle-167 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(168) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1156px;
margin-top: 531px;
animation: twinkle-168 1s linear infinite;
animation-delay: 1.68s;
}
@keyframes twinkle-168 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(169) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 847px;
margin-top: 838px;
animation: twinkle-169 1s linear infinite;
animation-delay: 1.69s;
}
@keyframes twinkle-169 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(170) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 650px;
margin-top: 231px;
animation: twinkle-170 1s linear infinite;
animation-delay: 1.7s;
}
@keyframes twinkle-170 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(171) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 227px;
margin-top: 692px;
animation: twinkle-171 1s linear infinite;
animation-delay: 1.71s;
}
@keyframes twinkle-171 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(172) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 599px;
margin-top: 500px;
animation: twinkle-172 1s linear infinite;
animation-delay: 1.72s;
}
@keyframes twinkle-172 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(173) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 349px;
margin-top: 146px;
animation: twinkle-173 1s linear infinite;
animation-delay: 1.73s;
}
@keyframes twinkle-173 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(174) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 232px;
margin-top: 327px;
animation: twinkle-174 1s linear infinite;
animation-delay: 1.74s;
}
@keyframes twinkle-174 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(175) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 584px;
margin-top: 779px;
animation: twinkle-175 1s linear infinite;
animation-delay: 1.75s;
}
@keyframes twinkle-175 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(176) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1065px;
margin-top: 872px;
animation: twinkle-176 1s linear infinite;
animation-delay: 1.76s;
}
@keyframes twinkle-176 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(177) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 639px;
margin-top: 282px;
animation: twinkle-177 1s linear infinite;
animation-delay: 1.77s;
}
@keyframes twinkle-177 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(178) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 658px;
margin-top: 300px;
animation: twinkle-178 1s linear infinite;
animation-delay: 1.78s;
}
@keyframes twinkle-178 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(179) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1182px;
margin-top: 258px;
animation: twinkle-179 1s linear infinite;
animation-delay: 1.79s;
}
@keyframes twinkle-179 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(180) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1417px;
margin-top: 656px;
animation: twinkle-180 1s linear infinite;
animation-delay: 1.8s;
}
@keyframes twinkle-180 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(181) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 448px;
margin-top: 645px;
animation: twinkle-181 1s linear infinite;
animation-delay: 1.81s;
}
@keyframes twinkle-181 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(182) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1429px;
margin-top: 273px;
animation: twinkle-182 1s linear infinite;
animation-delay: 1.82s;
}
@keyframes twinkle-182 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(183) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1409px;
margin-top: 119px;
animation: twinkle-183 1s linear infinite;
animation-delay: 1.83s;
}
@keyframes twinkle-183 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(184) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1269px;
margin-top: 354px;
animation: twinkle-184 1s linear infinite;
animation-delay: 1.84s;
}
@keyframes twinkle-184 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(185) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1294px;
margin-top: 314px;
animation: twinkle-185 1s linear infinite;
animation-delay: 1.85s;
}
@keyframes twinkle-185 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(186) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 933px;
margin-top: 744px;
animation: twinkle-186 1s linear infinite;
animation-delay: 1.86s;
}
@keyframes twinkle-186 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(187) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 712px;
margin-top: 149px;
animation: twinkle-187 1s linear infinite;
animation-delay: 1.87s;
}
@keyframes twinkle-187 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(188) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1460px;
margin-top: 800px;
animation: twinkle-188 1s linear infinite;
animation-delay: 1.88s;
}
@keyframes twinkle-188 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(189) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 541px;
margin-top: 152px;
animation: twinkle-189 1s linear infinite;
animation-delay: 1.89s;
}
@keyframes twinkle-189 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(190) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1285px;
margin-top: 730px;
animation: twinkle-190 1s linear infinite;
animation-delay: 1.9s;
}
@keyframes twinkle-190 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(191) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 512px;
margin-top: 243px;
animation: twinkle-191 1s linear infinite;
animation-delay: 1.91s;
}
@keyframes twinkle-191 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(192) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1343px;
margin-top: 499px;
animation: twinkle-192 1s linear infinite;
animation-delay: 1.92s;
}
@keyframes twinkle-192 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(193) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1166px;
margin-top: 251px;
animation: twinkle-193 1s linear infinite;
animation-delay: 1.93s;
}
@keyframes twinkle-193 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(194) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1399px;
margin-top: 526px;
animation: twinkle-194 1s linear infinite;
animation-delay: 1.94s;
}
@keyframes twinkle-194 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(195) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 565px;
margin-top: 42px;
animation: twinkle-195 1s linear infinite;
animation-delay: 1.95s;
}
@keyframes twinkle-195 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(196) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 446px;
margin-top: 129px;
animation: twinkle-196 1s linear infinite;
animation-delay: 1.96s;
}
@keyframes twinkle-196 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(197) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 469px;
margin-top: 192px;
animation: twinkle-197 1s linear infinite;
animation-delay: 1.97s;
}
@keyframes twinkle-197 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(198) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 329px;
margin-top: 736px;
animation: twinkle-198 1s linear infinite;
animation-delay: 1.98s;
}
@keyframes twinkle-198 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(199) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1175px;
margin-top: 708px;
animation: twinkle-199 1s linear infinite;
animation-delay: 1.99s;
}
@keyframes twinkle-199 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(200) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 716px;
margin-top: 661px;
animation: twinkle-200 1s linear infinite;
animation-delay: 2s;
}
@keyframes twinkle-200 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.h-con {
width: 100%;
height: 300px;
position: absolute;
margin-top: 450px;
z-index: 100;
margin-left: calc(50% - 350px);
}
.hill {
width: 700px;
height: 1000px;
z-index: 130;
border-radius: 30px;
transform: rotate(45deg);
box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.5);
margin-top: 100px;
position: absolute;
margin-left: -200px;
background: linear-gradient(to bottom right, #002142, #27435F);
}
.hill2 {
width: 800px;
height: 1000px;
background: #002142;
z-index: 130;
border-radius: 30px;
transform: rotate(45deg);
box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.5);
margin-top: 100px;
position: absolute;
margin-left: -100px;
background: linear-gradient(to top right, #002142, #27435F);
}
.hill3 {
width: 600px;
height: 1000px;
background: #002142;
z-index: 130;
border-radius: 30px;
transform: rotate(45deg);
box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.5);
margin-top: 100px;
position: absolute;
margin-left: 50px;
background: linear-gradient(to bottom right, #002142, #27435F);
}
.function-container {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 70%;
padding: 30px;
z-index: 200;
background: rgba(0, 33, 66, 0.6);
border-radius: 15px;
backdrop-filter: blur(10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
gap: 80px;
}
.function-block {
background: rgba(255, 255, 255, 0.05);
padding: 20px;
border-radius: 15px;
backdrop-filter: blur(10px);
width: calc(33.33% - 80px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
text-align: center;
transition: all 0.3s ease;
}
.function-block:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.1);
}
.function-block h3 {
color: #FEFDE8;
font-family: "Palanquin", sans-serif;
margin: 0 0 15px 0;
font-size: 1.5em;
}
.input-group {
margin: 10px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.input-group label {
display: block;
margin-bottom: 5px;
color: #FEFDE8;
font-family: "Palanquin", sans-serif;
font-size: 0.9em;
}
.input-group input {
width: 80%;
padding: 10px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
color: #FEFDE8;
font-family: "Palanquin", sans-serif;
transition: all 0.3s ease;
text-align: center;
}
.input-group input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.2);
}
button {
width: 80%;
padding: 12px;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: #FEFDE8;
font-family: "Palanquin", sans-serif;
font-size: 1em;
cursor: pointer;
transition: all 0.3s ease;
margin: 10px 0;
}
button:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.result {
margin-top: 10px;
padding: 10px;
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
color: #FEFDE8;
font-family: "Palanquin", sans-serif;
word-break: break-all;
border: 1px solid rgba(255, 255, 255, 0.05);
max-height: 200px;
overflow-y: auto;
}
.result::-webkit-scrollbar {
width: 5px;
}
.result::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
.result::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}
.con {
position: absolute;
top: 150px;
width: 100%;
height: calc(100vh - 150px);
z-index: 100;
background: #002142;
overflow: hidden;
}
#historyList {
max-height: 200px;
overflow-y: auto;
}
#historyList::-webkit-scrollbar {
width: 5px;
}
#historyList::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
#historyList::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
.article-list {
max-height: 400px;
overflow-y: auto;
padding: 10px;
}
.article-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
transition: all 0.3s ease;
cursor: pointer;
}
.article-card:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.article-title {
color: #FEFDE8;
font-size: 1.1em;
margin-bottom: 8px;
}
.article-meta {
color: rgba(254, 253, 232, 0.7);
font-size: 0.8em;
display: flex;
justify-content: space-between;
}
.article-preview {
min-height: 150px;
padding: 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
margin-bottom: 15px;
}
.loading {
color: #FEFDE8;
text-align: center;
padding: 20px;
}
#searchInput {
width: 90%;
padding: 12px;
margin-bottom: 15px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: #FEFDE8;
}
.search-placeholder {
color: rgba(254, 253, 232, 0.7);
text-align: center;
padding: 20px;
}
.recent-articles {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
align-items: center; /* 整体居中 */
}
.recent-article-item {
width: 90%; /* 稍微收窄一点 */
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 8px 12px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: left;
display: flex;
flex-direction: row; /* 改为横向排列 */
justify-content: space-between; /* 两端对齐 */
align-items: center; /* 垂直居中 */
}
.article-summary {
display: none;
}
.recent-article-link {
color: #FEFDE8;
text-decoration: none;
font-size: 0.9em;
line-height: 1.3;
transition: color 0.3s ease;
margin: 0;
}
.article-date {
color: rgba(254, 253, 232, 0.5);
font-size: 0.75em;
margin-left: 10px; /* 添加左边距，与标题分开 */
}
.recent-article-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(2px);
}