水果叠叠乐

H-rosy

已于 2022-11-17 14:15:55 修改

阅读量2.9k

点赞数 7

分类专栏：有趣的css和JavaScript 文章标签： javascript 前端 jquery 蓝桥杯

于 2022-11-03 20:08:36 首次发布

本文链接：https://blog.csdn.net/qq_51580852/article/details/127677024

版权

有趣的css和JavaScript 专栏收录该内容

7 篇文章 4 订阅

订阅专栏

水果叠叠乐

介绍

消消乐是一款益智类小游戏，最近比较火爆的一种是立体叠叠乐式的，然后小蓝也想开发一个自己练练手，给它起名叫“水果叠叠乐”。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

├── css
│ └── style.css
├── images
├── index.html
└── js
└── jquery.min.js

其中：
index.html 是主页面。
js/jquery.min.js 是 jQuery 文件。
images 是图片文件夹。
css/style.css 是样式文件。
选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：
在这里插入图片描述
点击页面上方的水果元素会有水果掉到下方的动画效果。

目标

点击页面上方的水果元素，水果会进入到下方的格子中。当格子中有三个相同水果时会自动消除。格子最多放 7 个水果，当格子中水果为 7 个且无法消除时，点击上方水果元素将不在有任何效果。请使用 jQuery 或者 js ，完成 index.html 文件中的 TODO 部分。

页面上方 id=card 中 DOM 元素中的水果元素点击消失的动画效果已在代码中给出，无需操作。
每次点击页面上方水果元素需要在页面下方的长方格（ id=box ）元素中添加该元素节点，当下面长方格中有三个相同的水果元素时，从盒子元素删除这三个相同的水果元素节点。
当页面下方的长方格（ id=box ）元素中的水果为 7 个且无法消除时，被点击的水果元素节点不在被添加长方格元素中。

规定

禁止以任何形式（除克隆外）修改页面上方（即 id = card )的 DOM 元素及其子节点。
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成无法判题通过。

解题耗时如下：
在这里插入图片描述

思路

==一定要仔细看规定：==禁止以任何形式（除克隆外）修改页面上方（即 id = card )的 DOM 元素及其子节点。我在最开始时为下方的盒子添加结点使用的是append方法，但是这个方法会删除原有的结点，也就是说他会删除card中的li结点。显然不符合规定。思路如下：

先判断下方盒子是否有7个
让li中的图片消失
将点击的li的自定义属性data-id加入到数组中（数组本身没啥用，就是为了好判断长度）
点击li后加入到下方盒子中
判断是否有可以消除的（方法比较笨）
如果有计数器清零，数组长度减去三或者删除三个，同时删除box中的结点
over

考察知识点

jQuery中的动画hide
如何使用jQuery获取dom元素
考察append、clone等其他方法
考验判题能力

题解代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>水果叠叠乐</title>
    <script src="./js/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div id="stars"></div>
    <div id="stars2"></div>
    <div id="stars3"></div>
    <ul id="card">
      <li data-id="1" id="fruit-one">
        <img src="./images/pineapple.svg" alt="" />
      </li>
      <li data-id="1" id="fruit-two">
        <img src="./images/pineapple.svg" alt="" />
      </li>
      <li data-id="2" id="fruit-three">
        <img src="./images/apple.svg" alt="" />
      </li>
      <li data-id="2" id="fruit-four">
        <img src="./images/apple.svg" alt="" />
      </li>
      <li data-id="2" id="fruit-five">
        <img src="./images/apple.svg" alt="" />
      </li>
      <li data-id="1" id="fruit-six">
        <img src="./images/pineapple.svg" alt="" />
      </li>
      <li data-id="3" id="fruit-seven">
        <img src="./images/avocado.svg" alt="" />
      </li>
      <li data-id="3" id="fruit-eight">
        <img src="./images/avocado.svg" alt="" />
      </li>
      <li data-id="3" id="fruit-nine">
        <img src="./images/avocado.svg" alt="" />
      </li>
      <li data-id="4" id="fruit-ten">
        <img src="./images/grapes.svg" alt="" />
      </li>
      <li data-id="4" id="fruit-eleven">
        <img src="./images/grapes.svg" alt="" />
      </li>
      <li data-id="4" id="fruit-twelve">
        <img src="./images/grapes.svg" alt="" />
      </li>
    </ul>
    <!-- 图片位置 -->
    <!-- 卡槽位置 -->
    <div class="fixed">
      <div class="gradient-border" id="box"></div>
    </div>
    <script>
      let arr=[];
     
      $("#card li").on("click", function (e) {
        // TODO: 待补充代码
        //console.log(arr.length);
         //判断是否有7个，判断是否可消除，判断是否可增加
         if(arr.length<7){
        // 先让图片消失
            $(this).hide()
            // 将点击的li的自定义属性data-id加入到数组中
            //console.log($(this).attr("data-id"));
            arr.push($(this).attr("data-id"))
            //加入到下方盒子中
            console.log($(this).context);
           //console.log($(this).html());
           // $("#box").append($(this).context)不能使用这个，他会删除原有结点，必须使用clone
           $("#box").append($(this).clone(false,true))
           //追加进去默认li的style默认为none,但是这里有点重复了
           $("#box").children("li").css("display","inline")
            //$("#box").append($($(this).html()))
            // 判断是否有可以消除的, 
            let c1=0,c2=0,c3=0,c4=0;
            $("#box li").each(function(){
              if($(this).attr("data-id")==1){
                c1++;
                if(c1==3){
                  arr.splice(0,3);
                  c1=0;
                  $("#box li").each(function(){
                      if($(this).attr("data-id")==1){
                        $(this).remove()
                      }
                  })
                }
              }else if($(this).attr("data-id")==2){
                c2++;
              
                if(c2==3){
                  c2=0;
                   arr.splice(0,3);
                  $("#box li").each(function(){
                      if($(this).attr("data-id")==2){
                        $(this).remove()
                      }
                  })
                }
              }else if($(this).attr("data-id")==3){
                c3++;
                
                if(c3==3){
                arr.splice(0,3);
                  c3=0;
                  $("#box li").each(function(){
                      if($(this).attr("data-id")==3){
                        $(this).remove()
                      }
                  })
                }
              }else if($(this).attr("data-id")==4){
                c4++;
               
                if(c4==3){
                 arr.splice(0,3);
                  c4=0;
                  $("#box li").each(function(){
                      if($(this).attr("data-id")==4){
                        $(this).remove()
                      }
                  })
                }
              }
            })
         }   
      });
    </script>
  </body>
</html>

下面的不用看了，就是上面是题解，单纯记录一下它的css使用

css样式挺好的偷一下

body,
html {
  height: 100%;
}
body {
  background: #1d1f20;
  overflow: hidden;
}
#box {
  display: flex;
  width: 714px;
  height: 96px;
  color: #fff;
}
.gradient-border {
  --borderWidth: 3px;
  background: #1d1f20;
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(
    60deg,
    #f79533,
    #f37055,
    #ef4e7b,
    #a166ab,
    #5073b8,
    #1098ad,
    #07b39b,
    #6fba82
  );
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedGradient 3s ease alternate infinite;
  background-size: 300% 300%;
}
.fixed {
  position: fixed;
  bottom: 60px;
  left: 50%;
  margin-left: -357px;
}
@keyframes animatedGradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
#projector {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
li,
ul {
  list-style: none;
}
#card {
  width: 278px;
  margin: 100px auto 0;
  position: relative;
}
.active {
  animation: disappear 0.2s cubic-bezier(0, 0, 0.36, 1) forwards;
}
@keyframes disappear {
  20% {
    opacity: 0;
    border-radius: 50%;
  }
  100% {
    transform: scale(0);
    border-radius: 50%;
  }
}
#box li {
  width: 79px;
  height: 70px;
  color: #eee;
  text-decoration: none;
  border-radius: 8px;
  font-size: 3em;
  font-weight: 700;
  text-align: center;
  transition: all 0.1s ease;
  margin: 10px;
}
#box li:nth-child(1) {
  margin-left: 20px;
}
#box li:last-child {
  margin-right: 20px;
}
#card li {
  position: absolute;
  vertical-align: middle;
  cursor: pointer;
  left: 0;
  top: 0;
  width: 79px;
  height: 70px;
  box-sizing: border-box;
  color: #eee;
  text-decoration: none;
  font-size: 3em;
  font-weight: 700;
  border-radius: 8px;
  text-align: center;
  transition: all 0.1s ease;
}
#box li img,
#card li img {
  display: block;
  max-width: 80%;
  margin: 3px auto 0;
}
#card li:active {
  box-shadow: 0 3px 0 #943c30, 0 3px 6px rgba(0, 0, 0, 0.9);
  position: relative;
  top: 6px;
}
#card li:nth-child(2) {
  top: 20px;
}
#card li:nth-child(3) {
  left: 100px;
}
#card li:nth-child(4) {
  left: 100px;
  top: 20px;
}
#card li:nth-child(5) {
  left: 199px;
}
#card li:nth-child(6) {
  top: 20px;
  left: 199px;
}
#card li:nth-child(7) {
  top: 120px;
}
#card li:nth-child(8) {
  top: 140px;
}
#card li:nth-child(9) {
  left: 100px;
  top: 120px;
}
#card li:nth-child(10) {
  left: 100px;
  top: 140px;
}
#card li:nth-child(11) {
  left: 199px;
  top: 120px;
}
#card li:nth-child(12) {
  left: 199px;
  top: 140px;
}
#card li:nth-child(13) {
  top: 229px;
}
#card li:nth-child(14) {
  top: 249px;
}
#card li:nth-child(15) {
  left: 100px;
  top: 229px;
}
#card li:nth-child(16) {
  left: 100px;
  top: 249px;
}
#card li:nth-child(17) {
  left: 199px;
  top: 229px;
}
#card li:nth-child(18) {
  left: 199px;
  top: 249px;
}
li[data-id="1"] {
  background-color: rgba(219, 87, 51, 1);
  box-shadow: 5px 9px 0px rgb(219 31 5), 0 9px 25px rgb(0 0 0 / 70%);
}
li[data-id="2"] {
  background-color: #6bb037;
  box-shadow: 5px 9px 0px rgb(77 128 39), 0 9px 25px rgb(77 128 39);
}
li[data-id="3"] {
  background-color: rgb(153 113 32);
  box-shadow: 5px 9px 0px #7c5b1a, 0 9px 25px #7c5b1a;
}
li[data-id="4"] {
  background-color: #a8a421;
  box-shadow: 5px 9px 0px #6c6914, 0 9px 25px #6c6914;
}
html {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0, #090a0f 100%);
  overflow: hidden;
}
#stars {
  width: 1px;
  height: 1px;
  background: 0 0;
  box-shadow: 1245px 31px #fff, 845px 339px #fff, 770px 699px #fff,
    1661px 352px #fff, 339px 1355px #fff, 163px 1713px #fff, 1681px 920px #fff,
    899px 1695px #fff, 1165px 1723px #fff, 1109px 196px #fff, 489px 1228px #fff,
    363px 198px #fff, 762px 611px #fff, 264px 1388px #fff, 1401px 553px #fff,
    1630px 1592px #fff, 881px 824px #fff, 321px 1683px #fff, 314px 1015px #fff,
    1297px 1477px #fff, 1975px 1013px #fff, 766px 882px #fff, 863px 120px #fff,
    98px 944px #fff, 1192px 891px #fff, 1703px 1388px #fff, 1173px 172px #fff,
    39px 526px #fff, 1723px 170px #fff, 1228px 1022px #fff, 378px 165px #fff,
    1594px 476px #fff, 603px 621px #fff, 1674px 1922px #fff, 1589px 212px #fff,
    771px 1232px #fff, 1723px 444px #fff, 793px 1238px #fff, 1111px 1464px #fff,
    1071px 1073px #fff, 397px 626px #fff, 818px 184px #fff, 686px 299px #fff,
    1179px 1494px #fff, 600px 954px #fff, 105px 426px #fff, 562px 185px #fff,
    794px 113px #fff, 1436px 1780px #fff, 1980px 1476px #fff, 960px 1314px #fff,
    1125px 1742px #fff, 887px 431px #fff, 1078px 1516px #fff, 1547px 1383px #fff,
    1354px 596px #fff, 1052px 1775px #fff, 1996px 227px #fff, 1337px 821px #fff,
    173px 4px #fff, 239px 667px #fff, 468px 1813px #fff, 9px 303px #fff,
    1935px 621px #fff, 1602px 1959px #fff, 290px 912px #fff, 906px 1542px #fff,
    670px 1860px #fff, 1742px 479px #fff, 1694px 1283px #fff, 1986px 427px #fff,
    1021px 896px #fff, 1758px 227px #fff, 1493px 279px #fff, 839px 734px #fff,
    1314px 1278px #fff, 746px 387px #fff, 854px 204px #fff, 1366px 1654px #fff,
    899px 1647px #fff, 1307px 570px #fff, 748px 1365px #fff, 468px 1238px #fff,
    832px 223px #fff, 82px 93px #fff, 1751px 289px #fff, 1246px 1125px #fff,
    1140px 1346px #fff, 365px 1797px #fff, 1912px 1989px #fff, 336px 1573px #fff,
    1018px 29px #fff, 303px 1006px #fff, 1167px 1655px #fff, 1385px 438px #fff,
    1535px 1430px #fff, 620px 736px #fff, 836px 342px #fff, 970px 1574px #fff,
    979px 1582px #fff, 1454px 389px #fff, 614px 463px #fff, 706px 916px #fff,
    1964px 1340px #fff, 1811px 194px #fff, 1166px 1361px #fff, 941px 918px #fff,
    359px 1715px #fff, 316px 1743px #fff, 1462px 1124px #fff, 493px 712px #fff,
    1570px 960px #fff, 1710px 1876px #fff, 1127px 1959px #fff, 738px 1033px #fff,
    1794px 381px #fff, 836px 749px #fff, 1657px 375px #fff, 525px 212px #fff,
    1303px 842px #fff, 897px 608px #fff, 657px 887px #fff, 1232px 133px #fff,
    107px 290px #fff, 1458px 1751px #fff, 128px 1332px #fff, 1127px 782px #fff,
    911px 1554px #fff, 1036px 1191px #fff, 1684px 1260px #fff, 592px 1588px #fff,
    441px 955px #fff, 382px 1871px #fff, 1195px 1059px #fff, 1677px 325px #fff,
    884px 104px #fff, 648px 836px #fff, 1269px 1504px #fff, 144px 919px #fff,
    1256px 1311px #fff, 516px 1098px #fff, 1367px 1149px #fff, 98px 1779px #fff,
    935px 732px #fff, 61px 1011px #fff, 1207px 1843px #fff, 1931px 1915px #fff,
    754px 1658px #fff, 1734px 1698px #fff, 1172px 1547px #fff, 962px 584px #fff,
    152px 1264px #fff, 1464px 1931px #fff, 473px 894px #fff, 174px 224px #fff,
    979px 301px #fff, 1839px 1807px #fff, 385px 1479px #fff, 167px 49px #fff,
    64px 434px #fff, 1190px 1266px #fff, 534px 640px #fff, 1888px 1310px #fff,
    1283px 1375px #fff, 1495px 599px #fff, 1243px 1331px #fff,
    1559px 1230px #fff, 275px 1426px #fff, 1106px 1102px #fff, 866px 1421px #fff,
    1461px 1599px #fff, 1327px 1009px #fff, 1786px 800px #fff, 881px 733px #fff,
    1208px 784px #fff, 857px 900px #fff, 1122px 77px #fff, 1051px 1352px #fff,
    1617px 1174px #fff, 1988px 1523px #fff, 968px 1167px #fff, 1447px 902px #fff,
    1834px 598px #fff, 1274px 669px #fff, 906px 951px #fff, 1457px 1597px #fff,
    1641px 945px #fff, 690px 1052px #fff, 1551px 965px #fff, 1468px 1282px #fff,
    802px 745px #fff, 1528px 261px #fff, 1965px 1239px #fff, 542px 1686px #fff,
    866px 611px #fff, 1048px 1938px #fff, 710px 63px #fff, 1954px 758px #fff,
    1416px 993px #fff, 1590px 1598px #fff, 1497px 1951px #fff, 166px 720px #fff,
    733px 88px #fff, 576px 549px #fff, 284px 1295px #fff, 1103px 230px #fff,
    753px 1653px #fff, 470px 960px #fff, 580px 1944px #fff, 1131px 1873px #fff,
    182px 1859px #fff, 383px 834px #fff, 510px 474px #fff, 1460px 1471px #fff,
    1180px 882px #fff, 1002px 1471px #fff, 1293px 1102px #fff, 305px 778px #fff,
    890px 1327px #fff, 1826px 1609px #fff, 1614px 1448px #fff,
    1675px 1850px #fff, 1134px 603px #fff, 1303px 1988px #fff, 1464px 265px #fff,
    30px 1107px #fff, 98px 981px #fff, 290px 580px #fff, 1674px 819px #fff,
    1245px 82px #fff, 396px 1881px #fff, 1150px 1991px #fff, 1548px 1584px #fff,
    1518px 1407px #fff, 1161px 1262px #fff, 1011px 274px #fff, 899px 293px #fff,
    1834px 1811px #fff, 1515px 1658px #fff, 1510px 1115px #fff,
    1376px 1239px #fff, 951px 1237px #fff, 1369px 1588px #fff, 652px 1123px #fff,
    1481px 536px #fff, 167px 358px #fff, 1231px 1309px #fff, 1602px 437px #fff,
    1153px 672px #fff, 534px 1716px #fff, 604px 1687px #fff, 1396px 646px #fff,
    1417px 1923px #fff, 139px 488px #fff, 1845px 897px #fff, 415px 1082px #fff,
    1421px 1914px #fff, 1496px 1337px #fff, 254px 1341px #fff,
    1660px 1416px #fff, 732px 1726px #fff, 86px 1921px #fff, 90px 151px #fff,
    728px 288px #fff, 1351px 1093px #fff, 393px 1182px #fff, 1986px 496px #fff,
    667px 110px #fff, 682px 643px #fff, 77px 1938px #fff, 490px 829px #fff,
    747px 1449px #fff, 36px 788px #fff, 1612px 1658px #fff, 1392px 1191px #fff,
    723px 1748px #fff, 911px 141px #fff, 28px 1101px #fff, 1360px 665px #fff,
    1593px 1751px #fff, 411px 936px #fff, 1140px 123px #fff, 815px 517px #fff,
    1696px 880px #fff, 731px 1541px #fff, 1958px 792px #fff, 52px 1045px #fff,
    1157px 93px #fff, 1230px 1214px #fff, 1433px 1465px #fff, 1435px 792px #fff,
    1552px 662px #fff, 709px 659px #fff, 124px 885px #fff, 1351px 535px #fff,
    1222px 688px #fff, 1944px 1453px #fff, 1139px 488px #fff, 285px 902px #fff,
    1781px 104px #fff, 442px 1103px #fff, 58px 60px #fff, 775px 1496px #fff,
    844px 321px #fff, 534px 418px #fff, 608px 1866px #fff, 562px 684px #fff,
    1194px 366px #fff, 1305px 1753px #fff, 334px 1186px #fff, 285px 966px #fff,
    1431px 1140px #fff, 990px 221px #fff, 1720px 347px #fff, 159px 1150px #fff,
    1329px 345px #fff, 1288px 1553px #fff, 735px 1060px #fff, 1157px 168px #fff,
    61px 902px #fff, 1602px 1986px #fff, 419px 492px #fff, 1797px 1613px #fff,
    435px 1760px #fff, 1769px 1239px #fff, 517px 938px #fff, 652px 1887px #fff,
    1744px 1544px #fff, 784px 1384px #fff, 1582px 435px #fff, 1190px 1463px #fff,
    1497px 577px #fff, 571px 297px #fff, 342px 249px #fff, 1159px 1786px #fff,
    222px 1809px #fff, 80px 318px #fff, 985px 1972px #fff, 1362px 612px #fff,
    451px 1760px #fff, 1067px 1803px #fff, 69px 1556px #fff, 1295px 1381px #fff,
    930px 1640px #fff, 265px 424px #fff, 324px 1109px #fff, 587px 743px #fff,
    1841px 548px #fff, 1215px 1248px #fff, 1216px 1791px #fff, 698px 1259px #fff,
    1309px 952px #fff, 943px 1624px #fff, 1281px 1582px #fff, 1627px 107px #fff,
    78px 1617px #fff, 152px 275px #fff, 790px 1832px #fff, 648px 942px #fff,
    1471px 1623px #fff, 450px 1042px #fff, 194px 1199px #fff, 1864px 145px #fff,
    965px 296px #fff, 1662px 1395px #fff, 1840px 857px #fff, 633px 1586px #fff,
    1007px 1648px #fff, 785px 1823px #fff, 1333px 489px #fff, 1940px 372px #fff,
    1592px 1532px #fff, 676px 614px #fff, 736px 217px #fff, 968px 1073px #fff,
    819px 1607px #fff, 1017px 1679px #fff, 1569px 1747px #fff,
    1595px 1027px #fff, 915px 1481px #fff, 1829px 1234px #fff, 357px 846px #fff,
    726px 830px #fff, 1487px 1865px #fff, 1385px 1417px #fff, 1081px 1135px #fff,
    664px 620px #fff, 1809px 599px #fff, 660px 1534px #fff, 7px 327px #fff,
    80px 1476px #fff, 93px 238px #fff, 1864px 40px #fff, 1766px 226px #fff,
    47px 535px #fff, 1730px 703px #fff, 924px 1387px #fff, 191px 1106px #fff,
    1094px 1859px #fff, 429px 943px #fff, 4px 1302px #fff, 1638px 399px #fff,
    119px 514px #fff, 642px 1005px #fff, 1131px 1541px #fff, 434px 1283px #fff,
    822px 1261px #fff, 1515px 1316px #fff, 989px 359px #fff, 1785px 88px #fff,
    1252px 1252px #fff, 1009px 257px #fff, 930px 984px #fff, 1727px 1569px #fff,
    924px 994px #fff, 1688px 316px #fff, 327px 1287px #fff, 11px 1183px #fff,
    457px 984px #fff, 1818px 113px #fff, 1710px 1428px #fff, 1825px 301px #fff,
    1392px 881px #fff, 707px 1040px #fff, 1949px 869px #fff, 1146px 1040px #fff,
    986px 1200px #fff, 1417px 1153px #fff, 1933px 1476px #fff,
    1939px 1976px #fff, 1001px 1662px #fff, 1477px 1388px #fff,
    1425px 1826px #fff, 1656px 1191px #fff, 1088px 173px #fff, 445px 135px #fff,
    1633px 1096px #fff, 227px 1933px #fff, 1246px 1093px #fff, 1729px 58px #fff,
    988px 1060px #fff, 1758px 1926px #fff, 545px 1954px #fff, 950px 1305px #fff,
    1947px 1088px #fff, 1661px 1990px #fff, 880px 1761px #fff, 126px 383px #fff,
    946px 585px #fff, 876px 1339px #fff, 176px 1796px #fff, 252px 1880px #fff,
    615px 1620px #fff, 243px 1782px #fff, 1569px 1015px #fff, 525px 10px #fff,
    1154px 1024px #fff, 50px 415px #fff, 1993px 510px #fff, 515px 601px #fff,
    1626px 233px #fff, 302px 815px #fff, 158px 1041px #fff, 924px 1171px #fff,
    1618px 1849px #fff, 1476px 817px #fff, 22px 481px #fff, 573px 657px #fff,
    773px 1357px #fff, 651px 455px #fff, 247px 1523px #fff, 1184px 109px #fff,
    353px 87px #fff, 1141px 355px #fff, 539px 1059px #fff, 1307px 1838px #fff,
    1450px 185px #fff, 1173px 1163px #fff, 1472px 566px #fff, 1415px 1400px #fff,
    1345px 1701px #fff, 947px 709px #fff, 835px 1896px #fff, 1509px 294px #fff,
    908px 875px #fff, 98px 49px #fff, 26px 577px #fff, 1615px 1988px #fff,
    1045px 1259px #fff, 1894px 1608px #fff, 349px 763px #fff, 1081px 1217px #fff,
    744px 428px #fff, 660px 515px #fff, 1342px 708px #fff, 758px 929px #fff,
    502px 143px #fff, 1855px 1090px #fff, 678px 1710px #fff, 5px 1272px #fff,
    885px 268px #fff, 1055px 1495px #fff, 550px 486px #fff, 789px 825px #fff,
    602px 238px #fff, 781px 1388px #fff, 1725px 393px #fff, 617px 10px #fff,
    1369px 52px #fff, 1774px 1833px #fff, 1157px 1144px #fff, 983px 1425px #fff,
    812px 386px #fff, 1410px 1308px #fff, 640px 1418px #fff, 286px 437px #fff,
    1361px 876px #fff, 189px 1462px #fff, 1491px 78px #fff, 1571px 125px #fff,
    1491px 896px #fff, 1651px 1197px #fff, 881px 1685px #fff, 1205px 1290px #fff,
    178px 673px #fff, 956px 663px #fff, 593px 526px #fff, 860px 528px #fff,
    311px 107px #fff, 967px 110px #fff, 123px 256px #fff, 742px 1370px #fff,
    865px 1026px #fff, 426px 620px #fff, 149px 1177px #fff, 1625px 875px #fff,
    1251px 292px #fff, 168px 1581px #fff, 1080px 1776px #fff, 149px 1667px #fff,
    1585px 1428px #fff, 1096px 1507px #fff, 1462px 1074px #fff,
    1486px 606px #fff, 716px 326px #fff, 922px 1531px #fff, 772px 1011px #fff,
    1013px 1128px #fff, 1246px 417px #fff, 1698px 991px #fff, 527px 1585px #fff,
    639px 1057px #fff, 1009px 1216px #fff, 199px 1030px #fff, 602px 387px #fff,
    485px 1099px #fff, 201px 1658px #fff, 804px 1376px #fff, 993px 1879px #fff,
    1612px 1447px #fff, 39px 713px #fff, 1915px 99px #fff, 15px 99px #fff,
    1962px 1497px #fff, 874px 551px #fff, 1575px 1468px #fff, 965px 1250px #fff,
    1153px 1181px #fff, 1395px 1929px #fff, 461px 1749px #fff, 942px 1225px #fff,
    1498px 281px #fff, 808px 1510px #fff, 825px 1399px #fff, 1097px 1371px #fff,
    1413px 740px #fff, 1293px 1652px #fff, 583px 625px #fff, 429px 1976px #fff,
    1832px 351px #fff, 1356px 1087px #fff, 924px 1666px #fff, 1687px 1689px #fff,
    1546px 1912px #fff, 1556px 677px #fff, 1979px 1568px #fff, 205px 60px #fff,
    1437px 456px #fff, 1688px 1515px #fff, 1078px 362px #fff, 1054px 1126px #fff,
    196px 267px #fff, 686px 1315px #fff, 1314px 202px #fff, 1514px 40px #fff,
    1411px 1553px #fff, 11px 1593px #fff, 301px 587px #fff, 1847px 1206px #fff,
    414px 833px #fff, 1131px 100px #fff, 1550px 1187px #fff, 1961px 1893px #fff,
    1460px 624px #fff, 1396px 624px #fff, 1005px 1065px #fff, 1129px 1202px #fff,
    1887px 676px #fff, 1243px 1493px #fff, 1877px 1922px #fff, 849px 296px #fff,
    712px 311px #fff, 698px 1983px #fff, 1642px 59px #fff, 268px 1473px #fff,
    1117px 1577px #fff, 561px 1884px #fff, 1350px 173px #fff, 1407px 1289px #fff,
    1194px 315px #fff, 415px 266px #fff, 1074px 1210px #fff, 542px 1955px #fff,
    1692px 1668px #fff, 507px 171px #fff, 644px 78px #fff, 1967px 34px #fff,
    952px 468px #fff, 1259px 1886px #fff, 153px 767px #fff, 783px 1340px #fff,
    1812px 251px #fff, 1254px 881px #fff, 1123px 256px #fff, 1351px 342px #fff,
    1853px 1746px #fff, 1672px 12px #fff, 1850px 1701px #fff, 1674px 478px #fff,
    1130px 1924px #fff, 1440px 717px #fff, 108px 24px #fff, 1393px 89px #fff,
    197px 55px #fff, 1168px 120px #fff, 559px 419px #fff, 584px 9px #fff,
    45px 1728px #fff, 1355px 1731px #fff, 644px 1912px #fff, 1709px 1652px #fff,
    1701px 152px #fff, 329px 402px #fff, 1467px 185px #fff, 406px 233px #fff,
    1427px 506px #fff, 506px 1537px #fff, 1728px 689px #fff, 504px 461px #fff,
    1949px 1019px #fff, 628px 1504px #fff, 1892px 257px #fff, 910px 1445px #fff,
    1051px 941px #fff, 424px 1048px #fff, 778px 1433px #fff, 109px 1476px #fff,
    401px 1185px #fff, 130px 767px #fff, 1568px 267px #fff, 1497px 1506px #fff,
    1626px 730px #fff, 229px 1756px #fff, 1662px 504px #fff, 713px 265px #fff,
    1784px 1729px #fff, 725px 1425px #fff, 1331px 1502px #fff, 96px 8px #fff,
    1712px 667px #fff, 266px 1960px #fff, 391px 651px #fff, 729px 1425px #fff,
    1514px 174px #fff, 1252px 504px #fff, 524px 1693px #fff, 1509px 856px #fff,
    1791px 613px #fff, 1656px 361px #fff, 752px 1770px #fff, 1237px 937px #fff,
    350px 482px #fff, 793px 1428px #fff, 306px 389px #fff, 814px 1851px #fff,
    207px 66px #fff, 739px 539px #fff, 1475px 901px #fff, 994px 1498px #fff,
    49px 330px #fff;
  animation: animStar 50s linear infinite;
}
#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: 0 0;
  box-shadow: 1245px 31px #fff, 845px 339px #fff, 770px 699px #fff,
    1661px 352px #fff, 339px 1355px #fff, 163px 1713px #fff, 1681px 920px #fff,
    899px 1695px #fff, 1165px 1723px #fff, 1109px 196px #fff, 489px 1228px #fff,
    363px 198px #fff, 762px 611px #fff, 264px 1388px #fff, 1401px 553px #fff,
    1630px 1592px #fff, 881px 824px #fff, 321px 1683px #fff, 314px 1015px #fff,
    1297px 1477px #fff, 1975px 1013px #fff, 766px 882px #fff, 863px 120px #fff,
    98px 944px #fff, 1192px 891px #fff, 1703px 1388px #fff, 1173px 172px #fff,
    39px 526px #fff, 1723px 170px #fff, 1228px 1022px #fff, 378px 165px #fff,
    1594px 476px #fff, 603px 621px #fff, 1674px 1922px #fff, 1589px 212px #fff,
    771px 1232px #fff, 1723px 444px #fff, 793px 1238px #fff, 1111px 1464px #fff,
    1071px 1073px #fff, 397px 626px #fff, 818px 184px #fff, 686px 299px #fff,
    1179px 1494px #fff, 600px 954px #fff, 105px 426px #fff, 562px 185px #fff,
    794px 113px #fff, 1436px 1780px #fff, 1980px 1476px #fff, 960px 1314px #fff,
    1125px 1742px #fff, 887px 431px #fff, 1078px 1516px #fff, 1547px 1383px #fff,
    1354px 596px #fff, 1052px 1775px #fff, 1996px 227px #fff, 1337px 821px #fff,
    173px 4px #fff, 239px 667px #fff, 468px 1813px #fff, 9px 303px #fff,
    1935px 621px #fff, 1602px 1959px #fff, 290px 912px #fff, 906px 1542px #fff,
    670px 1860px #fff, 1742px 479px #fff, 1694px 1283px #fff, 1986px 427px #fff,
    1021px 896px #fff, 1758px 227px #fff, 1493px 279px #fff, 839px 734px #fff,
    1314px 1278px #fff, 746px 387px #fff, 854px 204px #fff, 1366px 1654px #fff,
    899px 1647px #fff, 1307px 570px #fff, 748px 1365px #fff, 468px 1238px #fff,
    832px 223px #fff, 82px 93px #fff, 1751px 289px #fff, 1246px 1125px #fff,
    1140px 1346px #fff, 365px 1797px #fff, 1912px 1989px #fff, 336px 1573px #fff,
    1018px 29px #fff, 303px 1006px #fff, 1167px 1655px #fff, 1385px 438px #fff,
    1535px 1430px #fff, 620px 736px #fff, 836px 342px #fff, 970px 1574px #fff,
    979px 1582px #fff, 1454px 389px #fff, 614px 463px #fff, 706px 916px #fff,
    1964px 1340px #fff, 1811px 194px #fff, 1166px 1361px #fff, 941px 918px #fff,
    359px 1715px #fff, 316px 1743px #fff, 1462px 1124px #fff, 493px 712px #fff,
    1570px 960px #fff, 1710px 1876px #fff, 1127px 1959px #fff, 738px 1033px #fff,
    1794px 381px #fff, 836px 749px #fff, 1657px 375px #fff, 525px 212px #fff,
    1303px 842px #fff, 897px 608px #fff, 657px 887px #fff, 1232px 133px #fff,
    107px 290px #fff, 1458px 1751px #fff, 128px 1332px #fff, 1127px 782px #fff,
    911px 1554px #fff, 1036px 1191px #fff, 1684px 1260px #fff, 592px 1588px #fff,
    441px 955px #fff, 382px 1871px #fff, 1195px 1059px #fff, 1677px 325px #fff,
    884px 104px #fff, 648px 836px #fff, 1269px 1504px #fff, 144px 919px #fff,
    1256px 1311px #fff, 516px 1098px #fff, 1367px 1149px #fff, 98px 1779px #fff,
    935px 732px #fff, 61px 1011px #fff, 1207px 1843px #fff, 1931px 1915px #fff,
    754px 1658px #fff, 1734px 1698px #fff, 1172px 1547px #fff, 962px 584px #fff,
    152px 1264px #fff, 1464px 1931px #fff, 473px 894px #fff, 174px 224px #fff,
    979px 301px #fff, 1839px 1807px #fff, 385px 1479px #fff, 167px 49px #fff,
    64px 434px #fff, 1190px 1266px #fff, 534px 640px #fff, 1888px 1310px #fff,
    1283px 1375px #fff, 1495px 599px #fff, 1243px 1331px #fff,
    1559px 1230px #fff, 275px 1426px #fff, 1106px 1102px #fff, 866px 1421px #fff,
    1461px 1599px #fff, 1327px 1009px #fff, 1786px 800px #fff, 881px 733px #fff,
    1208px 784px #fff, 857px 900px #fff, 1122px 77px #fff, 1051px 1352px #fff,
    1617px 1174px #fff, 1988px 1523px #fff, 968px 1167px #fff, 1447px 902px #fff,
    1834px 598px #fff, 1274px 669px #fff, 906px 951px #fff, 1457px 1597px #fff,
    1641px 945px #fff, 690px 1052px #fff, 1551px 965px #fff, 1468px 1282px #fff,
    802px 745px #fff, 1528px 261px #fff, 1965px 1239px #fff, 542px 1686px #fff,
    866px 611px #fff, 1048px 1938px #fff, 710px 63px #fff, 1954px 758px #fff,
    1416px 993px #fff, 1590px 1598px #fff, 1497px 1951px #fff, 166px 720px #fff,
    733px 88px #fff, 576px 549px #fff, 284px 1295px #fff, 1103px 230px #fff,
    753px 1653px #fff, 470px 960px #fff, 580px 1944px #fff, 1131px 1873px #fff,
    182px 1859px #fff, 383px 834px #fff, 510px 474px #fff, 1460px 1471px #fff,
    1180px 882px #fff, 1002px 1471px #fff, 1293px 1102px #fff, 305px 778px #fff,
    890px 1327px #fff, 1826px 1609px #fff, 1614px 1448px #fff,
    1675px 1850px #fff, 1134px 603px #fff, 1303px 1988px #fff, 1464px 265px #fff,
    30px 1107px #fff, 98px 981px #fff, 290px 580px #fff, 1674px 819px #fff,
    1245px 82px #fff, 396px 1881px #fff, 1150px 1991px #fff, 1548px 1584px #fff,
    1518px 1407px #fff, 1161px 1262px #fff, 1011px 274px #fff, 899px 293px #fff,
    1834px 1811px #fff, 1515px 1658px #fff, 1510px 1115px #fff,
    1376px 1239px #fff, 951px 1237px #fff, 1369px 1588px #fff, 652px 1123px #fff,
    1481px 536px #fff, 167px 358px #fff, 1231px 1309px #fff, 1602px 437px #fff,
    1153px 672px #fff, 534px 1716px #fff, 604px 1687px #fff, 1396px 646px #fff,
    1417px 1923px #fff, 139px 488px #fff, 1845px 897px #fff, 415px 1082px #fff,
    1421px 1914px #fff, 1496px 1337px #fff, 254px 1341px #fff,
    1660px 1416px #fff, 732px 1726px #fff, 86px 1921px #fff, 90px 151px #fff,
    728px 288px #fff, 1351px 1093px #fff, 393px 1182px #fff, 1986px 496px #fff,
    667px 110px #fff, 682px 643px #fff, 77px 1938px #fff, 490px 829px #fff,
    747px 1449px #fff, 36px 788px #fff, 1612px 1658px #fff, 1392px 1191px #fff,
    723px 1748px #fff, 911px 141px #fff, 28px 1101px #fff, 1360px 665px #fff,
    1593px 1751px #fff, 411px 936px #fff, 1140px 123px #fff, 815px 517px #fff,
    1696px 880px #fff, 731px 1541px #fff, 1958px 792px #fff, 52px 1045px #fff,
    1157px 93px #fff, 1230px 1214px #fff, 1433px 1465px #fff, 1435px 792px #fff,
    1552px 662px #fff, 709px 659px #fff, 124px 885px #fff, 1351px 535px #fff,
    1222px 688px #fff, 1944px 1453px #fff, 1139px 488px #fff, 285px 902px #fff,
    1781px 104px #fff, 442px 1103px #fff, 58px 60px #fff, 775px 1496px #fff,
    844px 321px #fff, 534px 418px #fff, 608px 1866px #fff, 562px 684px #fff,
    1194px 366px #fff, 1305px 1753px #fff, 334px 1186px #fff, 285px 966px #fff,
    1431px 1140px #fff, 990px 221px #fff, 1720px 347px #fff, 159px 1150px #fff,
    1329px 345px #fff, 1288px 1553px #fff, 735px 1060px #fff, 1157px 168px #fff,
    61px 902px #fff, 1602px 1986px #fff, 419px 492px #fff, 1797px 1613px #fff,
    435px 1760px #fff, 1769px 1239px #fff, 517px 938px #fff, 652px 1887px #fff,
    1744px 1544px #fff, 784px 1384px #fff, 1582px 435px #fff, 1190px 1463px #fff,
    1497px 577px #fff, 571px 297px #fff, 342px 249px #fff, 1159px 1786px #fff,
    222px 1809px #fff, 80px 318px #fff, 985px 1972px #fff, 1362px 612px #fff,
    451px 1760px #fff, 1067px 1803px #fff, 69px 1556px #fff, 1295px 1381px #fff,
    930px 1640px #fff, 265px 424px #fff, 324px 1109px #fff, 587px 743px #fff,
    1841px 548px #fff, 1215px 1248px #fff, 1216px 1791px #fff, 698px 1259px #fff,
    1309px 952px #fff, 943px 1624px #fff, 1281px 1582px #fff, 1627px 107px #fff,
    78px 1617px #fff, 152px 275px #fff, 790px 1832px #fff, 648px 942px #fff,
    1471px 1623px #fff, 450px 1042px #fff, 194px 1199px #fff, 1864px 145px #fff,
    965px 296px #fff, 1662px 1395px #fff, 1840px 857px #fff, 633px 1586px #fff,
    1007px 1648px #fff, 785px 1823px #fff, 1333px 489px #fff, 1940px 372px #fff,
    1592px 1532px #fff, 676px 614px #fff, 736px 217px #fff, 968px 1073px #fff,
    819px 1607px #fff, 1017px 1679px #fff, 1569px 1747px #fff,
    1595px 1027px #fff, 915px 1481px #fff, 1829px 1234px #fff, 357px 846px #fff,
    726px 830px #fff, 1487px 1865px #fff, 1385px 1417px #fff, 1081px 1135px #fff,
    664px 620px #fff, 1809px 599px #fff, 660px 1534px #fff, 7px 327px #fff,
    80px 1476px #fff, 93px 238px #fff, 1864px 40px #fff, 1766px 226px #fff,
    47px 535px #fff, 1730px 703px #fff, 924px 1387px #fff, 191px 1106px #fff,
    1094px 1859px #fff, 429px 943px #fff, 4px 1302px #fff, 1638px 399px #fff,
    119px 514px #fff, 642px 1005px #fff, 1131px 1541px #fff, 434px 1283px #fff,
    822px 1261px #fff, 1515px 1316px #fff, 989px 359px #fff, 1785px 88px #fff,
    1252px 1252px #fff, 1009px 257px #fff, 930px 984px #fff, 1727px 1569px #fff,
    924px 994px #fff, 1688px 316px #fff, 327px 1287px #fff, 11px 1183px #fff,
    457px 984px #fff, 1818px 113px #fff, 1710px 1428px #fff, 1825px 301px #fff,
    1392px 881px #fff, 707px 1040px #fff, 1949px 869px #fff, 1146px 1040px #fff,
    986px 1200px #fff, 1417px 1153px #fff, 1933px 1476px #fff,
    1939px 1976px #fff, 1001px 1662px #fff, 1477px 1388px #fff,
    1425px 1826px #fff, 1656px 1191px #fff, 1088px 173px #fff, 445px 135px #fff,
    1633px 1096px #fff, 227px 1933px #fff, 1246px 1093px #fff, 1729px 58px #fff,
    988px 1060px #fff, 1758px 1926px #fff, 545px 1954px #fff, 950px 1305px #fff,
    1947px 1088px #fff, 1661px 1990px #fff, 880px 1761px #fff, 126px 383px #fff,
    946px 585px #fff, 876px 1339px #fff, 176px 1796px #fff, 252px 1880px #fff,
    615px 1620px #fff, 243px 1782px #fff, 1569px 1015px #fff, 525px 10px #fff,
    1154px 1024px #fff, 50px 415px #fff, 1993px 510px #fff, 515px 601px #fff,
    1626px 233px #fff, 302px 815px #fff, 158px 1041px #fff, 924px 1171px #fff,
    1618px 1849px #fff, 1476px 817px #fff, 22px 481px #fff, 573px 657px #fff,
    773px 1357px #fff, 651px 455px #fff, 247px 1523px #fff, 1184px 109px #fff,
    353px 87px #fff, 1141px 355px #fff, 539px 1059px #fff, 1307px 1838px #fff,
    1450px 185px #fff, 1173px 1163px #fff, 1472px 566px #fff, 1415px 1400px #fff,
    1345px 1701px #fff, 947px 709px #fff, 835px 1896px #fff, 1509px 294px #fff,
    908px 875px #fff, 98px 49px #fff, 26px 577px #fff, 1615px 1988px #fff,
    1045px 1259px #fff, 1894px 1608px #fff, 349px 763px #fff, 1081px 1217px #fff,
    744px 428px #fff, 660px 515px #fff, 1342px 708px #fff, 758px 929px #fff,
    502px 143px #fff, 1855px 1090px #fff, 678px 1710px #fff, 5px 1272px #fff,
    885px 268px #fff, 1055px 1495px #fff, 550px 486px #fff, 789px 825px #fff,
    602px 238px #fff, 781px 1388px #fff, 1725px 393px #fff, 617px 10px #fff,
    1369px 52px #fff, 1774px 1833px #fff, 1157px 1144px #fff, 983px 1425px #fff,
    812px 386px #fff, 1410px 1308px #fff, 640px 1418px #fff, 286px 437px #fff,
    1361px 876px #fff, 189px 1462px #fff, 1491px 78px #fff, 1571px 125px #fff,
    1491px 896px #fff, 1651px 1197px #fff, 881px 1685px #fff, 1205px 1290px #fff,
    178px 673px #fff, 956px 663px #fff, 593px 526px #fff, 860px 528px #fff,
    311px 107px #fff, 967px 110px #fff, 123px 256px #fff, 742px 1370px #fff,
    865px 1026px #fff, 426px 620px #fff, 149px 1177px #fff, 1625px 875px #fff,
    1251px 292px #fff, 168px 1581px #fff, 1080px 1776px #fff, 149px 1667px #fff,
    1585px 1428px #fff, 1096px 1507px #fff, 1462px 1074px #fff,
    1486px 606px #fff, 716px 326px #fff, 922px 1531px #fff, 772px 1011px #fff,
    1013px 1128px #fff, 1246px 417px #fff, 1698px 991px #fff, 527px 1585px #fff,
    639px 1057px #fff, 1009px 1216px #fff, 199px 1030px #fff, 602px 387px #fff,
    485px 1099px #fff, 201px 1658px #fff, 804px 1376px #fff, 993px 1879px #fff,
    1612px 1447px #fff, 39px 713px #fff, 1915px 99px #fff, 15px 99px #fff,
    1962px 1497px #fff, 874px 551px #fff, 1575px 1468px #fff, 965px 1250px #fff,
    1153px 1181px #fff, 1395px 1929px #fff, 461px 1749px #fff, 942px 1225px #fff,
    1498px 281px #fff, 808px 1510px #fff, 825px 1399px #fff, 1097px 1371px #fff,
    1413px 740px #fff, 1293px 1652px #fff, 583px 625px #fff, 429px 1976px #fff,
    1832px 351px #fff, 1356px 1087px #fff, 924px 1666px #fff, 1687px 1689px #fff,
    1546px 1912px #fff, 1556px 677px #fff, 1979px 1568px #fff, 205px 60px #fff,
    1437px 456px #fff, 1688px 1515px #fff, 1078px 362px #fff, 1054px 1126px #fff,
    196px 267px #fff, 686px 1315px #fff, 1314px 202px #fff, 1514px 40px #fff,
    1411px 1553px #fff, 11px 1593px #fff, 301px 587px #fff, 1847px 1206px #fff,
    414px 833px #fff, 1131px 100px #fff, 1550px 1187px #fff, 1961px 1893px #fff,
    1460px 624px #fff, 1396px 624px #fff, 1005px 1065px #fff, 1129px 1202px #fff,
    1887px 676px #fff, 1243px 1493px #fff, 1877px 1922px #fff, 849px 296px #fff,
    712px 311px #fff, 698px 1983px #fff, 1642px 59px #fff, 268px 1473px #fff,
    1117px 1577px #fff, 561px 1884px #fff, 1350px 173px #fff, 1407px 1289px #fff,
    1194px 315px #fff, 415px 266px #fff, 1074px 1210px #fff, 542px 1955px #fff,
    1692px 1668px #fff, 507px 171px #fff, 644px 78px #fff, 1967px 34px #fff,
    952px 468px #fff, 1259px 1886px #fff, 153px 767px #fff, 783px 1340px #fff,
    1812px 251px #fff, 1254px 881px #fff, 1123px 256px #fff, 1351px 342px #fff,
    1853px 1746px #fff, 1672px 12px #fff, 1850px 1701px #fff, 1674px 478px #fff,
    1130px 1924px #fff, 1440px 717px #fff, 108px 24px #fff, 1393px 89px #fff,
    197px 55px #fff, 1168px 120px #fff, 559px 419px #fff, 584px 9px #fff,
    45px 1728px #fff, 1355px 1731px #fff, 644px 1912px #fff, 1709px 1652px #fff,
    1701px 152px #fff, 329px 402px #fff, 1467px 185px #fff, 406px 233px #fff,
    1427px 506px #fff, 506px 1537px #fff, 1728px 689px #fff, 504px 461px #fff,
    1949px 1019px #fff, 628px 1504px #fff, 1892px 257px #fff, 910px 1445px #fff,
    1051px 941px #fff, 424px 1048px #fff, 778px 1433px #fff, 109px 1476px #fff,
    401px 1185px #fff, 130px 767px #fff, 1568px 267px #fff, 1497px 1506px #fff,
    1626px 730px #fff, 229px 1756px #fff, 1662px 504px #fff, 713px 265px #fff,
    1784px 1729px #fff, 725px 1425px #fff, 1331px 1502px #fff, 96px 8px #fff,
    1712px 667px #fff, 266px 1960px #fff, 391px 651px #fff, 729px 1425px #fff,
    1514px 174px #fff, 1252px 504px #fff, 524px 1693px #fff, 1509px 856px #fff,
    1791px 613px #fff, 1656px 361px #fff, 752px 1770px #fff, 1237px 937px #fff,
    350px 482px #fff, 793px 1428px #fff, 306px 389px #fff, 814px 1851px #fff,
    207px 66px #fff, 739px 539px #fff, 1475px 901px #fff, 994px 1498px #fff,
    49px 330px #fff;
}
#stars2 {
  width: 2px;
  height: 2px;
  background: 0 0;
  box-shadow: 1221px 1713px #fff, 1284px 710px #fff, 1135px 1773px #fff,
    923px 55px #fff, 988px 1462px #fff, 567px 622px #fff, 1634px 1569px #fff,
    812px 588px #fff, 492px 1240px #fff, 1092px 1902px #fff, 536px 933px #fff,
    256px 66px #fff, 86px 735px #fff, 1484px 38px #fff, 460px 720px #fff,
    544px 1890px #fff, 1524px 746px #fff, 1111px 1361px #fff, 210px 609px #fff,
    1782px 1349px #fff, 1698px 1848px #fff, 35px 1588px #fff, 507px 367px #fff,
    918px 1670px #fff, 1564px 1733px #fff, 650px 214px #fff, 290px 418px #fff,
    232px 853px #fff, 1326px 1430px #fff, 1767px 106px #fff, 107px 520px #fff,
    1588px 845px #fff, 1989px 1883px #fff, 662px 1538px #fff, 173px 968px #fff,
    210px 1697px #fff, 698px 847px #fff, 92px 118px #fff, 925px 254px #fff,
    649px 1967px #fff, 482px 1395px #fff, 607px 830px #fff, 1795px 423px #fff,
    809px 1656px #fff, 1606px 1527px #fff, 541px 485px #fff, 1243px 282px #fff,
    1047px 605px #fff, 1771px 1581px #fff, 89px 1709px #fff, 1106px 776px #fff,
    1756px 136px #fff, 957px 1829px #fff, 1092px 529px #fff, 1142px 493px #fff,
    657px 643px #fff, 1957px 753px #fff, 935px 219px #fff, 1197px 1971px #fff,
    336px 1394px #fff, 1451px 215px #fff, 899px 541px #fff, 190px 1411px #fff,
    1012px 1121px #fff, 1914px 361px #fff, 231px 71px #fff, 323px 1631px #fff,
    183px 1377px #fff, 98px 765px #fff, 1520px 320px #fff, 556px 77px #fff,
    588px 1518px #fff, 1177px 1487px #fff, 1172px 1426px #fff, 243px 520px #fff,
    25px 296px #fff, 1021px 344px #fff, 1416px 63px #fff, 1624px 1590px #fff,
    1198px 224px #fff, 72px 136px #fff, 347px 1099px #fff, 1240px 113px #fff,
    506px 1883px #fff, 623px 1889px #fff, 507px 139px #fff, 531px 96px #fff,
    436px 398px #fff, 1471px 1957px #fff, 769px 1696px #fff, 774px 973px #fff,
    698px 1904px #fff, 1616px 1098px #fff, 1560px 1560px #fff,
    1282px 1888px #fff, 1733px 1275px #fff, 1602px 1509px #fff,
    1579px 220px #fff, 1860px 1609px #fff, 1157px 1685px #fff,
    1278px 1172px #fff, 758px 277px #fff, 1676px 1446px #fff, 532px 1445px #fff,
    1285px 1024px #fff, 1013px 576px #fff, 635px 1717px #fff, 546px 1058px #fff,
    537px 1261px #fff, 548px 1134px #fff, 919px 1738px #fff, 889px 1641px #fff,
    944px 1035px #fff, 1354px 1298px #fff, 1539px 1950px #fff,
    1157px 1710px #fff, 442px 1488px #fff, 703px 936px #fff, 1395px 226px #fff,
    1946px 783px #fff, 420px 466px #fff, 100px 743px #fff, 361px 523px #fff,
    1218px 151px #fff, 395px 799px #fff, 1977px 1741px #fff, 1570px 991px #fff,
    1124px 375px #fff, 1414px 1520px #fff, 1535px 884px #fff, 1572px 1672px #fff,
    1828px 325px #fff, 650px 128px #fff, 1650px 1509px #fff, 11px 1725px #fff,
    383px 1595px #fff, 1705px 944px #fff, 472px 1684px #fff, 1406px 612px #fff,
    1702px 17px #fff, 214px 1801px #fff, 1126px 1647px #fff, 1454px 1588px #fff,
    210px 1734px #fff, 1937px 685px #fff, 1563px 1972px #fff, 1830px 216px #fff,
    965px 1699px #fff, 1077px 467px #fff, 460px 1225px #fff, 953px 45px #fff,
    1655px 936px #fff, 735px 1358px #fff, 557px 643px #fff, 718px 147px #fff,
    1607px 1301px #fff, 356px 338px #fff, 661px 1688px #fff, 1222px 1982px #fff,
    1892px 1851px #fff, 1419px 998px #fff, 801px 1986px #fff, 70px 410px #fff,
    749px 1282px #fff, 1952px 850px #fff, 1925px 1px #fff, 1478px 1744px #fff,
    193px 393px #fff, 1501px 1712px #fff, 1514px 843px #fff, 5px 440px #fff,
    999px 1317px #fff, 572px 1005px #fff, 1035px 1755px #fff, 619px 1703px #fff,
    664px 1405px #fff, 404px 1649px #fff, 1247px 1359px #fff, 516px 1296px #fff,
    644px 23px #fff, 1683px 1026px #fff, 623px 897px #fff, 1727px 1580px #fff,
    1838px 1281px #fff, 1065px 85px #fff, 1175px 1054px #fff, 480px 147px #fff,
    1778px 865px #fff, 489px 1065px #fff, 767px 896px #fff, 100px 981px #fff,
    788px 286px #fff, 323px 769px #fff, 1470px 1743px #fff, 289px 910px #fff,
    1053px 116px #fff, 1455px 1242px #fff, 1213px 1249px #fff, 301px 561px #fff,
    288px 301px #fff;
  animation: animStar 100s linear infinite;
}
#stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: 0 0;
  box-shadow: 1221px 1713px #fff, 1284px 710px #fff, 1135px 1773px #fff,
    923px 55px #fff, 988px 1462px #fff, 567px 622px #fff, 1634px 1569px #fff,
    812px 588px #fff, 492px 1240px #fff, 1092px 1902px #fff, 536px 933px #fff,
    256px 66px #fff, 86px 735px #fff, 1484px 38px #fff, 460px 720px #fff,
    544px 1890px #fff, 1524px 746px #fff, 1111px 1361px #fff, 210px 609px #fff,
    1782px 1349px #fff, 1698px 1848px #fff, 35px 1588px #fff, 507px 367px #fff,
    918px 1670px #fff, 1564px 1733px #fff, 650px 214px #fff, 290px 418px #fff,
    232px 853px #fff, 1326px 1430px #fff, 1767px 106px #fff, 107px 520px #fff,
    1588px 845px #fff, 1989px 1883px #fff, 662px 1538px #fff, 173px 968px #fff,
    210px 1697px #fff, 698px 847px #fff, 92px 118px #fff, 925px 254px #fff,
    649px 1967px #fff, 482px 1395px #fff, 607px 830px #fff, 1795px 423px #fff,
    809px 1656px #fff, 1606px 1527px #fff, 541px 485px #fff, 1243px 282px #fff,
    1047px 605px #fff, 1771px 1581px #fff, 89px 1709px #fff, 1106px 776px #fff,
    1756px 136px #fff, 957px 1829px #fff, 1092px 529px #fff, 1142px 493px #fff,
    657px 643px #fff, 1957px 753px #fff, 935px 219px #fff, 1197px 1971px #fff,
    336px 1394px #fff, 1451px 215px #fff, 899px 541px #fff, 190px 1411px #fff,
    1012px 1121px #fff, 1914px 361px #fff, 231px 71px #fff, 323px 1631px #fff,
    183px 1377px #fff, 98px 765px #fff, 1520px 320px #fff, 556px 77px #fff,
    588px 1518px #fff, 1177px 1487px #fff, 1172px 1426px #fff, 243px 520px #fff,
    25px 296px #fff, 1021px 344px #fff, 1416px 63px #fff, 1624px 1590px #fff,
    1198px 224px #fff, 72px 136px #fff, 347px 1099px #fff, 1240px 113px #fff,
    506px 1883px #fff, 623px 1889px #fff, 507px 139px #fff, 531px 96px #fff,
    436px 398px #fff, 1471px 1957px #fff, 769px 1696px #fff, 774px 973px #fff,
    698px 1904px #fff, 1616px 1098px #fff, 1560px 1560px #fff,
    1282px 1888px #fff, 1733px 1275px #fff, 1602px 1509px #fff,
    1579px 220px #fff, 1860px 1609px #fff, 1157px 1685px #fff,
    1278px 1172px #fff, 758px 277px #fff, 1676px 1446px #fff, 532px 1445px #fff,
    1285px 1024px #fff, 1013px 576px #fff, 635px 1717px #fff, 546px 1058px #fff,
    537px 1261px #fff, 548px 1134px #fff, 919px 1738px #fff, 889px 1641px #fff,
    944px 1035px #fff, 1354px 1298px #fff, 1539px 1950px #fff,
    1157px 1710px #fff, 442px 1488px #fff, 703px 936px #fff, 1395px 226px #fff,
    1946px 783px #fff, 420px 466px #fff, 100px 743px #fff, 361px 523px #fff,
    1218px 151px #fff, 395px 799px #fff, 1977px 1741px #fff, 1570px 991px #fff,
    1124px 375px #fff, 1414px 1520px #fff, 1535px 884px #fff, 1572px 1672px #fff,
    1828px 325px #fff, 650px 128px #fff, 1650px 1509px #fff, 11px 1725px #fff,
    383px 1595px #fff, 1705px 944px #fff, 472px 1684px #fff, 1406px 612px #fff,
    1702px 17px #fff, 214px 1801px #fff, 1126px 1647px #fff, 1454px 1588px #fff,
    210px 1734px #fff, 1937px 685px #fff, 1563px 1972px #fff, 1830px 216px #fff,
    965px 1699px #fff, 1077px 467px #fff, 460px 1225px #fff, 953px 45px #fff,
    1655px 936px #fff, 735px 1358px #fff, 557px 643px #fff, 718px 147px #fff,
    1607px 1301px #fff, 356px 338px #fff, 661px 1688px #fff, 1222px 1982px #fff,
    1892px 1851px #fff, 1419px 998px #fff, 801px 1986px #fff, 70px 410px #fff,
    749px 1282px #fff, 1952px 850px #fff, 1925px 1px #fff, 1478px 1744px #fff,
    193px 393px #fff, 1501px 1712px #fff, 1514px 843px #fff, 5px 440px #fff,
    999px 1317px #fff, 572px 1005px #fff, 1035px 1755px #fff, 619px 1703px #fff,
    664px 1405px #fff, 404px 1649px #fff, 1247px 1359px #fff, 516px 1296px #fff,
    644px 23px #fff, 1683px 1026px #fff, 623px 897px #fff, 1727px 1580px #fff,
    1838px 1281px #fff, 1065px 85px #fff, 1175px 1054px #fff, 480px 147px #fff,
    1778px 865px #fff, 489px 1065px #fff, 767px 896px #fff, 100px 981px #fff,
    788px 286px #fff, 323px 769px #fff, 1470px 1743px #fff, 289px 910px #fff,
    1053px 116px #fff, 1455px 1242px #fff, 1213px 1249px #fff, 301px 561px #fff,
    288px 301px #fff;
}
#stars3 {
  width: 3px;
  height: 3px;
  background: 0 0;
  box-shadow: 765px 271px #fff, 1412px 1921px #fff, 1809px 339px #fff,
    1582px 36px #fff, 462px 1589px #fff, 1025px 1178px #fff, 826px 1714px #fff,
    1756px 316px #fff, 214px 1719px #fff, 446px 812px #fff, 1094px 908px #fff,
    1944px 2px #fff, 1139px 1913px #fff, 499px 2px #fff, 112px 1939px #fff,
    766px 513px #fff, 1324px 70px #fff, 1850px 650px #fff, 392px 320px #fff,
    834px 1855px #fff, 165px 221px #fff, 81px 1914px #fff, 1911px 237px #fff,
    1813px 1021px #fff, 15px 1572px #fff, 1895px 1844px #fff, 44px 538px #fff,
    1226px 1436px #fff, 667px 1295px #fff, 1906px 1610px #fff, 593px 221px #fff,
    968px 1407px #fff, 992px 1538px #fff, 726px 248px #fff, 1273px 179px #fff,
    138px 1186px #fff, 395px 785px #fff, 1644px 780px #fff, 31px 1348px #fff,
    1942px 87px #fff, 718px 1015px #fff, 1323px 107px #fff, 1436px 421px #fff,
    75px 1863px #fff, 1269px 557px #fff, 1162px 1036px #fff, 257px 669px #fff,
    827px 1098px #fff, 138px 1908px #fff, 439px 527px #fff, 76px 295px #fff,
    1266px 248px #fff, 1940px 718px #fff, 1214px 265px #fff, 37px 1486px #fff,
    1937px 290px #fff, 1129px 785px #fff, 1261px 1650px #fff, 144px 219px #fff,
    1341px 606px #fff, 1317px 872px #fff, 1421px 693px #fff, 496px 1803px #fff,
    1055px 1732px #fff, 1448px 302px #fff, 774px 495px #fff, 266px 1037px #fff,
    941px 792px #fff, 779px 1034px #fff, 1333px 1194px #fff, 1546px 188px #fff,
    947px 1906px #fff, 1769px 1595px #fff, 1667px 724px #fff, 699px 1979px #fff,
    194px 213px #fff, 1984px 1738px #fff, 466px 1754px #fff, 1998px 1908px #fff,
    975px 1413px #fff, 1505px 752px #fff, 1341px 932px #fff, 1260px 812px #fff,
    1591px 50px #fff, 1655px 1730px #fff, 1955px 1340px #fff, 859px 1742px #fff,
    1608px 1931px #fff, 1431px 1227px #fff, 1553px 222px #fff, 684px 1866px #fff,
    371px 59px #fff, 1885px 869px #fff, 1887px 1795px #fff, 1032px 1431px #fff,
    1085px 1840px #fff, 817px 1343px #fff, 1260px 1135px #fff, 124px 1566px #fff,
    1975px 1980px #fff;
  animation: animStar 150s linear infinite;
}
#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: 0 0;
  box-shadow: 765px 271px #fff, 1412px 1921px #fff, 1809px 339px #fff,
    1582px 36px #fff, 462px 1589px #fff, 1025px 1178px #fff, 826px 1714px #fff,
    1756px 316px #fff, 214px 1719px #fff, 446px 812px #fff, 1094px 908px #fff,
    1944px 2px #fff, 1139px 1913px #fff, 499px 2px #fff, 112px 1939px #fff,
    766px 513px #fff, 1324px 70px #fff, 1850px 650px #fff, 392px 320px #fff,
    834px 1855px #fff, 165px 221px #fff, 81px 1914px #fff, 1911px 237px #fff,
    1813px 1021px #fff, 15px 1572px #fff, 1895px 1844px #fff, 44px 538px #fff,
    1226px 1436px #fff, 667px 1295px #fff, 1906px 1610px #fff, 593px 221px #fff,
    968px 1407px #fff, 992px 1538px #fff, 726px 248px #fff, 1273px 179px #fff,
    138px 1186px #fff, 395px 785px #fff, 1644px 780px #fff, 31px 1348px #fff,
    1942px 87px #fff, 718px 1015px #fff, 1323px 107px #fff, 1436px 421px #fff,
    75px 1863px #fff, 1269px 557px #fff, 1162px 1036px #fff, 257px 669px #fff,
    827px 1098px #fff, 138px 1908px #fff, 439px 527px #fff, 76px 295px #fff,
    1266px 248px #fff, 1940px 718px #fff, 1214px 265px #fff, 37px 1486px #fff,
    1937px 290px #fff, 1129px 785px #fff, 1261px 1650px #fff, 144px 219px #fff,
    1341px 606px #fff, 1317px 872px #fff, 1421px 693px #fff, 496px 1803px #fff,
    1055px 1732px #fff, 1448px 302px #fff, 774px 495px #fff, 266px 1037px #fff,
    941px 792px #fff, 779px 1034px #fff, 1333px 1194px #fff, 1546px 188px #fff,
    947px 1906px #fff, 1769px 1595px #fff, 1667px 724px #fff, 699px 1979px #fff,
    194px 213px #fff, 1984px 1738px #fff, 466px 1754px #fff, 1998px 1908px #fff,
    975px 1413px #fff, 1505px 752px #fff, 1341px 932px #fff, 1260px 812px #fff,
    1591px 50px #fff, 1655px 1730px #fff, 1955px 1340px #fff, 859px 1742px #fff,
    1608px 1931px #fff, 1431px 1227px #fff, 1553px 222px #fff, 684px 1866px #fff,
    371px 59px #fff, 1885px 869px #fff, 1887px 1795px #fff, 1032px 1431px #fff,
    1085px 1840px #fff, 817px 1343px #fff, 1260px 1135px #fff, 124px 1566px #fff,
    1975px 1980px #fff;
}
@keyframes animStar {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2000px);
  }
}