/* Prevent auto zoom-in on iPhone */
/* Minimum font size: 16 pixels */
input[type="text"], textarea {
    font-size: max(16px, min(4vh, 4vw)) !important;
}

* {
    box-sizing: border-box;
}
  

#beginGame:hover, .button:hover{
    background-color: #007c3c;
}

a {
    z-index:999999!important
}

#beginAgain:hover{
    background-color:#341567;
}

.typeHere {
    direction: ltr;
    background: #fff;
    border-radius: 60px;
    border: none;
    color: #000;
    font-family: 'Heebo', sans-serif;
    box-shadow: 0 4px 6px -5px #705c5c, inset 0 4px 6px -5px #050505;
    z-index: 999;
    text-align: center !important;
	bottom: auto !important;
    position: relative !important;
    font-size: max(16px, min(4vh, 4vw)) !important;
    width: 600px;
    max-width: 95vw;
    margin: 0;
    padding: 6px 2px;
    /*   
    left: auto !important;
    transform: none !important;
    -ms-transform: none !important;
    -moz-transform: none !important;
    -webkit-transform: none !important;
    -o-transform: none !important;
    */
}


#menu {
    z-index: 999;
    position: absolute;
    text-align: center;
    line-height: 8px;
    font-size: 20px;
    padding: 0px 10px 15px;
    border-radius: 5px;
    left: 20px;
    top: 20px;
    background-color: green;
    cursor: pointer;
}
#menu:hover {
    background-color: #007c3c;
}
#exit:hover {
    background-color: #c31818;
}
#exit1:hover {
    background-color: #454040;
}
#stop:hover,#continue:hover {
    background-color: #13148e;
}
#exit, #exit1, #stop, #continue {
    left: 27px;
    left: 90px;
}
#exit, #exit1, #exit3, #stop, #continue {
    box-sizing: content-box !important;
}
#exit1 {
    padding: 10px 11px;
    top: 75px;
}
#stop {
    padding: 13px 11px;
    top: 132px;
}
#stop, #continue {
    height: 20px;
    left: 70px;
    border-radius: 10px;
    padding: 11.5px;
    top: 115px;
    width: 70px;
    z-index: 999;
    position: absolute;
    font-size: 20px;
    text-align: center;
    background-color: blue;
    cursor:pointer;
}
#exit, #exit3 {
    border-radius: 10px;
    padding: 10px;
    width: 70px;
    background-color: #f53939;
    z-index: 999;
    position: absolute;
    font-size: 20px;
    text-align: center;
}
#exit {
    height: 20px;
    left: 70px;
    top: 20px;
}
#exit3 {
    left: 10px;
    top: 10px;
    width: 70px;
}
/* section: exit buttons */
#exit1 {
    border-radius: 12px;
    padding: 8px 10px;
    top: 65px;
    width: 70px;
    left: 70px;
    color: white;
    background-color: black;
    z-index: 999;
    position: absolute;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
}



.newMessege {
    color: #fff;
    text-align: center;
    position: absolute;
    top: 3vh;
    width: 70%;
    left: 15%;
    font-family: 'Heebo', sans-serif;
    font-size: min(6vh, 6vw);
    z-index: 9999;
    padding: 3px 20px !important;
}
.newMessegeBg {
    background-color: rgba(0, 0, 0, 0.05);
    border: solid 2px green;
    border-radius: 30px;
}
.color1{
    border-color:blueviolet;
}
.color2{
    border-color:green;
}
.color3{
    border-color:darkred;
}
.color4{
    border-color:darkblue;
}
.color5{
    border-color:darkkhaki;
}

.vflex {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;  
}

#gameContainer {
    direction:ltr; 
    background-size:cover;
    background-position: center center;

    height:100%;
    width:100%;
    max-width:100vw; 
    margin: 0;
    padding:10px;
    text-align:center;
}
#gameContainer #startGameButton /*,
#gameContainer #beginGame */{
	bottom: auto !important;
    position: relative !important;
    opacity: 1 !important;
    font-size: min(4vh, 4vw) !important;
    padding: 5px 20px !important;
    width:700px !important;
    max-width: 95vw !important;

    left: auto !important;
    transform: none !important;
    -ms-transform: none !important;
    -moz-transform: none !important;
    -webkit-transform: none !important;
    -o-transform: none !important;
}

#gameContainer .messege,
#gameContainer .h1,
#gameContainer .h2{
    position:relative;
    width: 80%;
    color: #fff;
    text-align: center;
    font-weight: bolder;
    font-family: 'Heebo', sans-serif;
    z-index: 99999;
 /*   
    animation-name: massage;
    animation-duration: 5.5s;
    animation-iteration-count: infinite;*/
}
#gameContainer .messege{
    font-size: min(2vh, 2vw);
}
#gameContainer .h1{
    font-size: min(6vh, 6vw);
}
#gameContainer .h2{
    font-size: min(5vh, 5vw);
}
.secondaryContainer{
    z-index: 99999;
    width:100%;
}

#capture {
    direction:ltr; 
    background-size:cover;
    background-position: center center;

    height:100%;
    width:100vh;
    max-width:100vw; 
    padding:10px;
    margin-left:auto; 
    margin-right:auto; 
    text-align:center;
}
#capture > .item:first-child {
    align-self: flex-start !important; /* align to top */
}
#capture > .item:last-child {
    align-self: flex-end !important; /* align to bottom */
    margin-top: auto !important;
}

#capture #thoughtTitle{
    color: #fff;
    text-align: center;
    font-family: 'Heebo', sans-serif;
    font-size: min(4vh, 4vw);
    z-index: 9999;
}

.oval-thought {
    z-index: 999;
    position: relative;
    box-sizing: content-box !important;
    font-size: min(4vh, 4vw);
   
    min-width:  min(50vh, 50vw);
    max-width: min(90vh, 90vw);
/*  min-height:  min(20vh, 20vw);*/
    height: auto;
    padding: min(6vh, 6vw) min(5vh, 5vw);
/*  margin: 25vh auto 80px;*/
    margin-top: min(7vh, 7vw);
    margin-bottom: min(7vh, 7vw);
    text-align: center;
    color: transparent;
    background: linear-gradient(#d5d7d9, white);
 
/*  border-radius: 440px / 240px;*/
    border-radius: 50%;

    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.oval-thought:before {
	content: "";
	position: absolute;
	bottom: calc(0px - min(5.2vh, 5.2vw));
	left: min(6.2vh, 6.2vw);
	width: min(7.5vh, 7.5vw);
	height: min(7.5vh, 7.5vw);
    background: linear-gradient(#d5d7d9, white);
	border-radius: 100px;
}
.oval-thought:after {
	content: "";
	position: absolute;
	bottom: calc(0px - min(6.8vh, 6.8vw));
	left: min(3.0vh, 3.0vw);
	width: min(4vh, 4vw);
	height: min(4vh, 4vw);
	border-radius: 100px;
	background: linear-gradient(#d5d7d9, white);
}

#capture #myThought {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    border: solid 1px #fff;
    padding: 3px 20px !important;
    border-radius: 5px;
    display: none;
    width: 80%;
    margin-bottom: min(20vh, 20vw);
    text-align: center;
    font-family: 'Heebo', sans-serif;
    font-size: min(6vh, 6vw);
}


/*#capture #saveHtml*/ 
.vflex .button {
	bottom: auto !important;
    position: relative !important;
    opacity: 1 !important;
    font-size: min(5vh, 5vw) !important;

    left: auto !important;
    right: auto !important;
    transform: none !important;
    -ms-transform: none !important;
    -moz-transform: none !important;
    -webkit-transform: none !important;
    -o-transform: none !important;
}
.vflex .button.btn2 {
    font-size: min(4vh, 4vw) !important;
    margin-bottom:10px;
}




.container {
    position: relative;
    color: white;
}
#close {
    position: absolute;
    opacity: 1;
    left: 40vw;
    text-align: center;
    height: 50px;
    width: 160px;
}
/*
.positiveThought {
    background-color: lightblue;
    right: 0;
    height: 70vh;
    width: 35vw;
    top: 15vh;
    left: 60vw;
    margin-right: 0;
    position: absolute;
    font-size: 80px;
    color: black;
    text-align: center;
    font-weight: bolder;
    font-family: 'Heebo', sans-serif;
    border-radius: 10%;
}
*/
#inp2 {
    position: absolute;
    width: 30vw;
    background-color: rgba(0,0,0,0);
    height: 70vh;
    border: none;
    font-size: 60px;
    color: black;
    text-align: center;
    font-weight: bolder;
    font-family: 'Heebo', sans-serif;
    left: 0;
    z-index: 999;
}

/*
#boardImg {
    height: 110vh;
    left: 0;
}
*/

/* Centered text */
#inp {
    height: 250px;
    width: 380px;
    background: rgba(0,0,0,0);
    border: none;
    position: absolute;
    top: 10vh;
    left: 10vw;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: black;
    text-align: center;
    font-weight: bolder;
    font-family: 'Heebo', sans-serif;
}
.centered {
    position: absolute;
    top: 150px;
    left: 245px;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: black;
    text-align: center;
    font-weight: bolder;
    font-family: 'Heebo', sans-serif;
}

.voice1{
    display:none;
}

#mainTytle {
    font-size: min(11vh, 11vw) !important;
    position: relative;
    z-index: 9999;
}

/*
#another {
    left: 52.5vw;
    width: 26vw;
    top: 85vh;
}
*/

/* section: star animation */
.mainStar {
    opacity: 1;
    display: block;
  /*  height: 300px;
    width: 300px;*/
    width: min(42vh, 60vw);
    height: min(42vh, 60vw);

    border-radius: 100%;
    background: #e5f0bb;
    box-shadow: 0 0 50px tomato, 0 0 30px orange, inset 0 10px 10px 20px #dee9a3, inset 30px 0 35px 50px #e6e09c;
    margin: auto;

    position: relative;
/*
    left: 50%;
    margin-left: calc(0 - min(50vh, 60vw)/2);
    position: fixed;
   top: 50%;
    left: 50%;
    margin-left: -170px;
    margin-top: -150px;
    */
    z-index: 1;
    /*animation-name: example;*/
    animation-duration: 90s;
    z-index: 999;
    display: table;
}
@keyframes example {
    from {
        width:300px;
        height:300px
    }
    to {
        width: 2px;
        height: 2px;
    }
}
@keyframes example2 {
    from {
        width: 60vw;
        height: 60vw;
    }
    to {
        width: 10px;
        height: 10px;
    }
}


.thoughts {
    display: block;
/*    
    top: 500px;
    left: 500px;
*/
    font-size: 2vw;
    text-align: center;
    font-family: 'Heebo', sans-serif;
    z-index: 3;
    animation-duration: 95s;
    color: black;
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
    /*animation-name:thoughtsOp;*/
}
@keyframes thoughtsOp {
    from {
        opacity: 1;
        font-size: 25px;
    }
    to {
        opacity: 0;
        font-size: 2px;
    }
}


/*
html {
    height: 100%;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}

#stars {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 1151px 902px #FFF, 952px 514px #FFF, 178px 406px #FFF, 456px 1144px #FFF, 1584px 1759px #FFF, 1853px 1835px #FFF, 1329px 1239px #FFF, 1778px 314px #FFF, 1544px 1657px #FFF, 1986px 1817px #FFF, 881px 957px #FFF, 1094px 776px #FFF, 1851px 1373px #FFF, 466px 1426px #FFF, 942px 507px #FFF, 1500px 1348px #FFF, 1893px 1192px #FFF, 1991px 467px #FFF, 1634px 1398px #FFF, 457px 607px #FFF, 1748px 1778px #FFF, 1053px 1801px #FFF, 566px 293px #FFF, 49px 1329px #FFF, 332px 1832px #FFF, 1637px 797px #FFF, 1199px 1297px #FFF, 707px 32px #FFF, 1412px 1674px #FFF, 1808px 1345px #FFF, 315px 784px #FFF, 845px 1588px #FFF, 1435px 1524px #FFF, 1991px 1266px #FFF, 85px 579px #FFF, 270px 850px #FFF, 1412px 347px #FFF, 1981px 371px #FFF, 1723px 1675px #FFF, 1845px 457px #FFF, 929px 1990px #FFF, 1905px 1745px #FFF, 1124px 411px #FFF, 853px 679px #FFF, 991px 1023px #FFF, 149px 812px #FFF, 1452px 1767px #FFF, 1479px 492px #FFF, 6px 1155px #FFF, 1470px 191px #FFF, 1904px 708px #FFF, 1488px 774px #FFF, 1396px 157px #FFF, 1972px 1051px #FFF, 1887px 163px #FFF, 1574px 554px #FFF, 308px 702px #FFF, 235px 1524px #FFF, 530px 57px #FFF, 826px 1544px #FFF, 1423px 1732px #FFF, 1427px 1417px #FFF, 527px 1664px #FFF, 1300px 1207px #FFF, 92px 486px #FFF, 387px 1511px #FFF, 1993px 540px #FFF, 309px 483px #FFF, 1630px 1286px #FFF, 1150px 837px #FFF, 386px 1130px #FFF, 29px 427px #FFF, 67px 359px #FFF, 1689px 1936px #FFF, 132px 1160px #FFF, 683px 1539px #FFF, 1065px 1508px #FFF, 883px 1547px #FFF, 1013px 407px #FFF, 1452px 1725px #FFF, 430px 1021px #FFF, 1310px 495px #FFF, 467px 558px #FFF, 1071px 1432px #FFF, 626px 32px #FFF, 1078px 782px #FFF, 418px 244px #FFF, 1726px 141px #FFF, 256px 783px #FFF, 1886px 636px #FFF, 1476px 347px #FFF, 1789px 1579px #FFF, 265px 1573px #FFF, 93px 1082px #FFF, 223px 424px #FFF, 1362px 841px #FFF, 186px 1115px #FFF, 140px 1955px #FFF, 641px 1805px #FFF, 1747px 1604px #FFF, 1287px 329px #FFF, 375px 1880px #FFF, 113px 250px #FFF, 87px 443px #FFF, 102px 1829px #FFF, 1620px 977px #FFF, 1342px 408px #FFF, 9px 160px #FFF, 1570px 1368px #FFF, 1357px 1311px #FFF, 1826px 114px #FFF, 173px 929px #FFF, 159px 479px #FFF, 1711px 1712px #FFF, 1597px 1888px #FFF, 1614px 709px #FFF, 1561px 310px #FFF, 537px 1368px #FFF, 1630px 1427px #FFF, 1678px 653px #FFF, 1612px 1176px #FFF, 1530px 790px #FFF, 1185px 1335px #FFF, 1247px 952px #FFF, 1233px 1211px #FFF, 279px 1585px #FFF, 600px 1433px #FFF, 1479px 59px #FFF, 1437px 831px #FFF, 681px 231px #FFF, 486px 763px #FFF, 991px 1936px #FFF, 1319px 1973px #FFF, 910px 714px #FFF, 713px 1333px #FFF, 363px 274px #FFF, 1752px 946px #FFF, 1918px 1848px #FFF, 1732px 1139px #FFF, 1121px 85px #FFF, 768px 1923px #FFF, 49px 1313px #FFF, 34px 1397px #FFF, 331px 963px #FFF, 1249px 1144px #FFF, 122px 203px #FFF, 854px 1140px #FFF, 1966px 193px #FFF, 1142px 737px #FFF, 1669px 1564px #FFF, 71px 495px #FFF, 1365px 700px #FFF, 1600px 224px #FFF, 558px 1581px #FFF, 1997px 1px #FFF, 494px 1421px #FFF, 1874px 720px #FFF, 396px 114px #FFF, 457px 1224px #FFF, 1666px 1492px #FFF, 606px 1197px #FFF, 214px 1485px #FFF, 980px 1964px #FFF, 787px 1718px #FFF, 333px 388px #FFF, 284px 660px #FFF, 199px 307px #FFF, 779px 1997px #FFF, 571px 1915px #FFF, 1632px 1107px #FFF, 656px 1523px #FFF, 1574px 1273px #FFF, 719px 1689px #FFF, 1692px 1024px #FFF, 931px 146px #FFF, 1601px 933px #FFF, 1239px 913px #FFF, 1221px 1728px #FFF, 972px 764px #FFF, 872px 655px #FFF, 308px 548px #FFF, 1496px 751px #FFF, 1917px 1988px #FFF, 1735px 1960px #FFF, 1291px 252px #FFF, 615px 1042px #FFF, 525px 1428px #FFF, 1041px 1739px #FFF, 1802px 1005px #FFF, 1672px 898px #FFF, 446px 1629px #FFF, 1548px 1632px #FFF, 1197px 555px #FFF, 877px 1726px #FFF, 913px 992px #FFF, 461px 409px #FFF, 1451px 107px #FFF, 199px 531px #FFF, 1760px 1535px #FFF, 358px 1006px #FFF, 355px 1740px #FFF, 900px 666px #FFF, 1266px 1869px #FFF, 246px 1489px #FFF, 677px 1988px #FFF, 100px 1218px #FFF, 1830px 1750px #FFF, 198px 106px #FFF, 887px 548px #FFF, 68px 348px #FFF, 282px 81px #FFF, 171px 1057px #FFF, 1606px 935px #FFF, 1937px 1082px #FFF, 855px 819px #FFF, 335px 142px #FFF, 1341px 725px #FFF, 523px 394px #FFF, 1911px 148px #FFF, 975px 1872px #FFF, 1303px 333px #FFF, 1567px 683px #FFF, 491px 440px #FFF, 1850px 1519px #FFF, 224px 284px #FFF, 1225px 1246px #FFF, 1417px 1201px #FFF, 1919px 841px #FFF, 764px 463px #FFF, 1567px 745px #FFF, 141px 482px #FFF, 1838px 355px #FFF, 1453px 1368px #FFF, 1776px 1289px #FFF, 441px 733px #FFF, 251px 461px #FFF, 1742px 394px #FFF, 17px 1027px #FFF, 1785px 401px #FFF, 912px 765px #FFF, 636px 31px #FFF, 1956px 1480px #FFF, 872px 1242px #FFF, 1179px 928px #FFF, 1717px 606px #FFF, 1674px 1616px #FFF, 1339px 720px #FFF, 1388px 628px #FFF, 1155px 272px #FFF, 1787px 1685px #FFF, 1115px 244px #FFF, 1686px 185px #FFF, 248px 266px #FFF, 1318px 1080px #FFF, 1888px 1641px #FFF, 1784px 319px #FFF, 1894px 1347px #FFF, 1461px 563px #FFF, 1131px 1766px #FFF, 1951px 1662px #FFF, 803px 294px #FFF, 1957px 983px #FFF, 1594px 257px #FFF, 1912px 1720px #FFF, 1641px 1708px #FFF, 1366px 1437px #FFF, 1337px 456px #FFF, 1087px 1045px #FFF, 218px 1808px #FFF, 326px 1371px #FFF, 331px 1392px #FFF, 779px 454px #FFF, 568px 1109px #FFF, 57px 1611px #FFF, 710px 5px #FFF, 196px 1079px #FFF, 1224px 346px #FFF, 426px 990px #FFF, 207px 1333px #FFF, 1304px 776px #FFF, 1951px 1866px #FFF, 984px 947px #FFF, 1217px 476px #FFF, 1417px 834px #FFF, 1729px 224px #FFF, 607px 675px #FFF, 471px 946px #FFF, 1853px 87px #FFF, 1311px 1357px #FFF, 948px 555px #FFF, 1487px 1182px #FFF, 721px 341px #FFF, 140px 93px #FFF, 1938px 1891px #FFF, 532px 316px #FFF, 592px 1176px #FFF, 1052px 1724px #FFF, 337px 64px #FFF, 1834px 498px #FFF, 1742px 104px #FFF, 1773px 1244px #FFF, 1197px 183px #FFF, 1136px 1928px #FFF, 1800px 1400px #FFF, 1199px 995px #FFF, 1363px 1908px #FFF, 1440px 511px #FFF, 1944px 211px #FFF, 445px 1975px #FFF, 367px 681px #FFF, 1862px 117px #FFF, 1622px 1769px #FFF, 1346px 1972px #FFF, 83px 656px #FFF, 1082px 742px #FFF, 1015px 1220px #FFF, 602px 850px #FFF, 92px 1326px #FFF, 1222px 1479px #FFF, 1464px 142px #FFF, 267px 1873px #FFF, 1557px 664px #FFF, 1008px 1818px #FFF, 1271px 1918px #FFF, 282px 1530px #FFF, 1898px 1285px #FFF, 1618px 909px #FFF, 1350px 713px #FFF, 382px 817px #FFF, 438px 1282px #FFF, 1150px 1498px #FFF, 137px 1483px #FFF, 1577px 791px #FFF, 889px 777px #FFF, 1803px 192px #FFF, 1060px 1471px #FFF, 1900px 1105px #FFF, 1380px 1936px #FFF, 171px 591px #FFF, 455px 1533px #FFF, 1729px 1859px #FFF, 1022px 425px #FFF, 1072px 503px #FFF, 1497px 717px #FFF, 1130px 168px #FFF, 1180px 641px #FFF, 665px 33px #FFF, 922px 670px #FFF, 371px 236px #FFF, 337px 1608px #FFF, 167px 1355px #FFF, 560px 690px #FFF, 977px 599px #FFF, 1735px 241px #FFF, 1876px 545px #FFF, 997px 286px #FFF, 1431px 684px #FFF, 1292px 917px #FFF, 1425px 1964px #FFF, 1424px 1971px #FFF, 1059px 1922px #FFF, 1299px 52px #FFF, 394px 1588px #FFF, 300px 1370px #FFF, 1201px 1878px #FFF, 159px 1059px #FFF, 791px 310px #FFF, 579px 286px #FFF, 1879px 1635px #FFF, 1991px 1396px #FFF, 821px 1100px #FFF, 1634px 142px #FFF, 616px 1489px #FFF, 1098px 616px #FFF, 852px 84px #FFF, 1233px 1077px #FFF, 175px 44px #FFF, 1588px 1011px #FFF, 1194px 1925px #FFF, 1738px 697px #FFF, 1582px 16px #FFF, 1927px 393px #FFF, 762px 600px #FFF, 746px 1123px #FFF, 1024px 891px #FFF, 90px 1153px #FFF, 708px 1750px #FFF, 1343px 368px #FFF, 482px 523px #FFF, 1979px 1902px #FFF, 1457px 1285px #FFF, 505px 1440px #FFF, 1115px 39px #FFF, 1862px 693px #FFF, 1157px 62px #FFF, 634px 251px #FFF, 464px 1160px #FFF, 1032px 586px #FFF, 574px 581px #FFF, 1128px 837px #FFF, 826px 1530px #FFF, 785px 550px #FFF, 511px 1672px #FFF, 1817px 434px #FFF, 1856px 546px #FFF, 66px 1736px #FFF, 40px 956px #FFF, 1420px 1254px #FFF, 1998px 1964px #FFF, 707px 51px #FFF, 946px 1406px #FFF, 882px 871px #FFF, 1315px 1214px #FFF, 1645px 545px #FFF, 711px 1284px #FFF, 1148px 1852px #FFF, 1394px 390px #FFF, 526px 942px #FFF, 1166px 1293px #FFF, 1214px 745px #FFF, 547px 865px #FFF, 190px 931px #FFF, 1864px 1878px #FFF, 1799px 253px #FFF, 838px 1926px #FFF, 730px 631px #FFF, 1612px 1409px #FFF, 1338px 595px #FFF, 282px 486px #FFF, 1285px 473px #FFF, 1529px 608px #FFF, 1233px 1747px #FFF, 52px 1372px #FFF, 1909px 1141px #FFF, 1688px 938px #FFF, 57px 1677px #FFF, 1279px 1208px #FFF, 524px 93px #FFF, 1364px 1720px #FFF, 1587px 968px #FFF, 250px 1918px #FFF, 379px 544px #FFF, 1667px 1662px #FFF, 1667px 353px #FFF, 1512px 333px #FFF, 632px 117px #FFF, 611px 1384px #FFF, 1119px 1710px #FFF, 1332px 1215px #FFF, 176px 1509px #FFF, 1400px 640px #FFF, 287px 90px #FFF, 247px 785px #FFF, 1238px 643px #FFF, 127px 260px #FFF, 442px 307px #FFF, 753px 163px #FFF, 272px 1447px #FFF, 1303px 1034px #FFF, 660px 1709px #FFF, 206px 1458px #FFF, 1162px 1780px #FFF, 722px 1259px #FFF, 338px 1427px #FFF, 270px 1549px #FFF, 1993px 1839px #FFF, 1131px 825px #FFF, 433px 1201px #FFF, 1914px 1561px #FFF, 704px 841px #FFF, 477px 1409px #FFF, 294px 1240px #FFF, 1221px 1315px #FFF, 866px 37px #FFF, 1813px 1496px #FFF, 1251px 1899px #FFF, 1537px 1338px #FFF, 1872px 528px #FFF, 1176px 186px #FFF, 952px 993px #FFF, 214px 1210px #FFF, 1260px 1247px #FFF, 105px 212px #FFF, 1472px 821px #FFF, 1136px 1790px #FFF, 157px 1477px #FFF, 1352px 1487px #FFF, 217px 1630px #FFF, 1389px 655px #FFF, 1872px 1100px #FFF, 665px 1272px #FFF, 1315px 759px #FFF, 1034px 872px #FFF, 1414px 1618px #FFF, 970px 551px #FFF, 1786px 982px #FFF, 262px 434px #FFF, 1424px 1916px #FFF, 209px 850px #FFF, 1173px 921px #FFF, 1360px 1007px #FFF, 86px 1304px #FFF, 313px 769px #FFF, 1943px 1213px #FFF, 304px 959px #FFF, 963px 890px #FFF, 1944px 774px #FFF, 1840px 1902px #FFF, 426px 1276px #FFF, 1269px 488px #FFF, 1696px 1351px #FFF, 403px 231px #FFF, 1266px 1664px #FFF, 964px 1179px #FFF, 281px 1723px #FFF, 15px 1353px #FFF, 1671px 144px #FFF, 1629px 1530px #FFF, 1506px 361px #FFF, 363px 1490px #FFF, 1043px 1666px #FFF, 1524px 1654px #FFF, 649px 1660px #FFF, 1947px 1331px #FFF, 1738px 1379px #FFF, 378px 1213px #FFF, 1059px 1298px #FFF, 1414px 1639px #FFF, 1399px 142px #FFF, 1942px 1780px #FFF, 1303px 1984px #FFF, 1414px 396px #FFF, 595px 1469px #FFF, 457px 924px #FFF, 1722px 116px #FFF, 1749px 1504px #FFF, 520px 1461px #FFF, 1760px 76px #FFF, 1669px 327px #FFF, 1268px 921px #FFF, 167px 1988px #FFF, 1672px 1860px #FFF, 688px 1700px #FFF, 731px 641px #FFF, 1469px 843px #FFF, 247px 519px #FFF, 1585px 1967px #FFF, 1952px 1831px #FFF, 967px 1988px #FFF, 36px 14px #FFF, 1555px 1946px #FFF, 1999px 1081px #FFF, 37px 906px #FFF, 915px 1573px #FFF, 1270px 1951px #FFF, 1405px 936px #FFF, 1278px 1023px #FFF, 1889px 1971px #FFF, 1775px 1880px #FFF, 138px 1269px #FFF, 1134px 551px #FFF, 1599px 1874px #FFF, 485px 846px #FFF, 359px 212px #FFF, 1659px 1809px #FFF, 890px 1665px #FFF, 178px 1968px #FFF, 1839px 1460px #FFF, 1536px 1286px #FFF, 1258px 1370px #FFF, 1919px 572px #FFF, 707px 1470px #FFF, 1671px 1670px #FFF, 692px 1475px #FFF, 1331px 125px #FFF, 575px 328px #FFF, 1078px 987px #FFF, 739px 1859px #FFF, 1699px 923px #FFF, 219px 188px #FFF, 1801px 297px #FFF, 88px 539px #FFF, 1431px 520px #FFF, 584px 1477px #FFF, 1614px 1520px #FFF, 1496px 370px #FFF, 1079px 813px #FFF, 352px 380px #FFF, 558px 1926px #FFF, 417px 1360px #FFF, 236px 532px #FFF, 1452px 1219px #FFF, 1019px 430px #FFF, 729px 88px #FFF, 227px 1170px #FFF, 237px 70px #FFF, 158px 1410px #FFF, 834px 1285px #FFF, 1965px 136px #FFF, 319px 1761px #FFF, 1930px 401px #FFF, 1634px 1803px #FFF, 87px 980px #FFF, 267px 1582px #FFF, 63px 420px #FFF, 126px 197px #FFF, 1635px 1930px #FFF, 215px 544px #FFF, 1414px 364px #FFF, 866px 465px #FFF, 694px 560px #FFF, 770px 1642px #FFF, 1168px 1983px #FFF, 1202px 1263px #FFF, 226px 982px #FFF, 392px 476px #FFF, 1689px 865px #FFF, 864px 961px #FFF, 1227px 513px #FFF, 1137px 1819px #FFF, 1754px 1256px #FFF, 628px 1808px #FFF, 1736px 583px #FFF, 574px 717px #FFF, 1082px 135px #FFF, 1440px 1486px #FFF, 1461px 1191px #FFF, 832px 1151px #FFF, 787px 325px #FFF, 997px 1060px #FFF, 815px 648px #FFF, 1807px 838px #FFF, 340px 793px #FFF, 1634px 894px #FFF, 1679px 257px #FFF, 435px 1536px #FFF, 1607px 51px #FFF, 1580px 1493px #FFF, 993px 423px #FFF, 1417px 358px #FFF, 1557px 246px #FFF, 64px 882px #FFF, 1632px 797px #FFF, 1191px 46px #FFF, 1816px 1898px #FFF, 1508px 2px #FFF, 826px 276px #FFF, 780px 781px #FFF, 221px 342px #FFF, 1968px 580px #FFF, 920px 1780px #FFF, 760px 848px #FFF, 1098px 1370px #FFF, 382px 301px #FFF, 1976px 1841px #FFF, 1580px 1902px #FFF, 1954px 1054px #FFF, 1992px 1744px #FFF, 307px 1029px #FFF, 278px 342px #FFF, 754px 806px #FFF, 1270px 1937px #FFF, 1284px 1218px #FFF, 1514px 287px #FFF, 869px 1167px #FFF, 1494px 1345px #FFF, 477px 78px #FFF, 633px 1715px #FFF, 77px 195px #FFF, 271px 1430px #FFF, 760px 1531px #FFF, 1479px 1670px #FFF, 607px 239px #FFF, 1392px 701px #FFF, 1795px 172px #FFF, 1259px 1278px #FFF, 1395px 1733px #FFF, 646px 414px #FFF, 1449px 43px #FFF, 168px 1255px #FFF, 258px 1870px #FFF, 1856px 423px #FFF, 611px 1827px #FFF, 1729px 510px #FFF, 1376px 272px #FFF, 1243px 1776px #FFF, 1137px 477px #FFF, 1734px 1717px #FFF, 687px 860px #FFF, 1982px 1858px #FFF, 762px 213px #FFF, 1191px 134px #FFF, 292px 1682px #FFF, 944px 370px #FFF, 363px 1089px #FFF, 112px 238px #FFF, 218px 143px #FFF, 1838px 950px #FFF, 1019px 1448px #FFF, 447px 865px #FFF;
    animation: animStar 20s linear infinite;
}

    #stars:after {
        content: " ";
        position: absolute;
        top: 2000px;
        width: 1px;
        height: 1px;
        background: transparent;
        box-shadow: 1151px 902px #FFF, 952px 514px #FFF, 178px 406px #FFF, 456px 1144px #FFF, 1584px 1759px #FFF, 1853px 1835px #FFF, 1329px 1239px #FFF, 1778px 314px #FFF, 1544px 1657px #FFF, 1986px 1817px #FFF, 881px 957px #FFF, 1094px 776px #FFF, 1851px 1373px #FFF, 466px 1426px #FFF, 942px 507px #FFF, 1500px 1348px #FFF, 1893px 1192px #FFF, 1991px 467px #FFF, 1634px 1398px #FFF, 457px 607px #FFF, 1748px 1778px #FFF, 1053px 1801px #FFF, 566px 293px #FFF, 49px 1329px #FFF, 332px 1832px #FFF, 1637px 797px #FFF, 1199px 1297px #FFF, 707px 32px #FFF, 1412px 1674px #FFF, 1808px 1345px #FFF, 315px 784px #FFF, 845px 1588px #FFF, 1435px 1524px #FFF, 1991px 1266px #FFF, 85px 579px #FFF, 270px 850px #FFF, 1412px 347px #FFF, 1981px 371px #FFF, 1723px 1675px #FFF, 1845px 457px #FFF, 929px 1990px #FFF, 1905px 1745px #FFF, 1124px 411px #FFF, 853px 679px #FFF, 991px 1023px #FFF, 149px 812px #FFF, 1452px 1767px #FFF, 1479px 492px #FFF, 6px 1155px #FFF, 1470px 191px #FFF, 1904px 708px #FFF, 1488px 774px #FFF, 1396px 157px #FFF, 1972px 1051px #FFF, 1887px 163px #FFF, 1574px 554px #FFF, 308px 702px #FFF, 235px 1524px #FFF, 530px 57px #FFF, 826px 1544px #FFF, 1423px 1732px #FFF, 1427px 1417px #FFF, 527px 1664px #FFF, 1300px 1207px #FFF, 92px 486px #FFF, 387px 1511px #FFF, 1993px 540px #FFF, 309px 483px #FFF, 1630px 1286px #FFF, 1150px 837px #FFF, 386px 1130px #FFF, 29px 427px #FFF, 67px 359px #FFF, 1689px 1936px #FFF, 132px 1160px #FFF, 683px 1539px #FFF, 1065px 1508px #FFF, 883px 1547px #FFF, 1013px 407px #FFF, 1452px 1725px #FFF, 430px 1021px #FFF, 1310px 495px #FFF, 467px 558px #FFF, 1071px 1432px #FFF, 626px 32px #FFF, 1078px 782px #FFF, 418px 244px #FFF, 1726px 141px #FFF, 256px 783px #FFF, 1886px 636px #FFF, 1476px 347px #FFF, 1789px 1579px #FFF, 265px 1573px #FFF, 93px 1082px #FFF, 223px 424px #FFF, 1362px 841px #FFF, 186px 1115px #FFF, 140px 1955px #FFF, 641px 1805px #FFF, 1747px 1604px #FFF, 1287px 329px #FFF, 375px 1880px #FFF, 113px 250px #FFF, 87px 443px #FFF, 102px 1829px #FFF, 1620px 977px #FFF, 1342px 408px #FFF, 9px 160px #FFF, 1570px 1368px #FFF, 1357px 1311px #FFF, 1826px 114px #FFF, 173px 929px #FFF, 159px 479px #FFF, 1711px 1712px #FFF, 1597px 1888px #FFF, 1614px 709px #FFF, 1561px 310px #FFF, 537px 1368px #FFF, 1630px 1427px #FFF, 1678px 653px #FFF, 1612px 1176px #FFF, 1530px 790px #FFF, 1185px 1335px #FFF, 1247px 952px #FFF, 1233px 1211px #FFF, 279px 1585px #FFF, 600px 1433px #FFF, 1479px 59px #FFF, 1437px 831px #FFF, 681px 231px #FFF, 486px 763px #FFF, 991px 1936px #FFF, 1319px 1973px #FFF, 910px 714px #FFF, 713px 1333px #FFF, 363px 274px #FFF, 1752px 946px #FFF, 1918px 1848px #FFF, 1732px 1139px #FFF, 1121px 85px #FFF, 768px 1923px #FFF, 49px 1313px #FFF, 34px 1397px #FFF, 331px 963px #FFF, 1249px 1144px #FFF, 122px 203px #FFF, 854px 1140px #FFF, 1966px 193px #FFF, 1142px 737px #FFF, 1669px 1564px #FFF, 71px 495px #FFF, 1365px 700px #FFF, 1600px 224px #FFF, 558px 1581px #FFF, 1997px 1px #FFF, 494px 1421px #FFF, 1874px 720px #FFF, 396px 114px #FFF, 457px 1224px #FFF, 1666px 1492px #FFF, 606px 1197px #FFF, 214px 1485px #FFF, 980px 1964px #FFF, 787px 1718px #FFF, 333px 388px #FFF, 284px 660px #FFF, 199px 307px #FFF, 779px 1997px #FFF, 571px 1915px #FFF, 1632px 1107px #FFF, 656px 1523px #FFF, 1574px 1273px #FFF, 719px 1689px #FFF, 1692px 1024px #FFF, 931px 146px #FFF, 1601px 933px #FFF, 1239px 913px #FFF, 1221px 1728px #FFF, 972px 764px #FFF, 872px 655px #FFF, 308px 548px #FFF, 1496px 751px #FFF, 1917px 1988px #FFF, 1735px 1960px #FFF, 1291px 252px #FFF, 615px 1042px #FFF, 525px 1428px #FFF, 1041px 1739px #FFF, 1802px 1005px #FFF, 1672px 898px #FFF, 446px 1629px #FFF, 1548px 1632px #FFF, 1197px 555px #FFF, 877px 1726px #FFF, 913px 992px #FFF, 461px 409px #FFF, 1451px 107px #FFF, 199px 531px #FFF, 1760px 1535px #FFF, 358px 1006px #FFF, 355px 1740px #FFF, 900px 666px #FFF, 1266px 1869px #FFF, 246px 1489px #FFF, 677px 1988px #FFF, 100px 1218px #FFF, 1830px 1750px #FFF, 198px 106px #FFF, 887px 548px #FFF, 68px 348px #FFF, 282px 81px #FFF, 171px 1057px #FFF, 1606px 935px #FFF, 1937px 1082px #FFF, 855px 819px #FFF, 335px 142px #FFF, 1341px 725px #FFF, 523px 394px #FFF, 1911px 148px #FFF, 975px 1872px #FFF, 1303px 333px #FFF, 1567px 683px #FFF, 491px 440px #FFF, 1850px 1519px #FFF, 224px 284px #FFF, 1225px 1246px #FFF, 1417px 1201px #FFF, 1919px 841px #FFF, 764px 463px #FFF, 1567px 745px #FFF, 141px 482px #FFF, 1838px 355px #FFF, 1453px 1368px #FFF, 1776px 1289px #FFF, 441px 733px #FFF, 251px 461px #FFF, 1742px 394px #FFF, 17px 1027px #FFF, 1785px 401px #FFF, 912px 765px #FFF, 636px 31px #FFF, 1956px 1480px #FFF, 872px 1242px #FFF, 1179px 928px #FFF, 1717px 606px #FFF, 1674px 1616px #FFF, 1339px 720px #FFF, 1388px 628px #FFF, 1155px 272px #FFF, 1787px 1685px #FFF, 1115px 244px #FFF, 1686px 185px #FFF, 248px 266px #FFF, 1318px 1080px #FFF, 1888px 1641px #FFF, 1784px 319px #FFF, 1894px 1347px #FFF, 1461px 563px #FFF, 1131px 1766px #FFF, 1951px 1662px #FFF, 803px 294px #FFF, 1957px 983px #FFF, 1594px 257px #FFF, 1912px 1720px #FFF, 1641px 1708px #FFF, 1366px 1437px #FFF, 1337px 456px #FFF, 1087px 1045px #FFF, 218px 1808px #FFF, 326px 1371px #FFF, 331px 1392px #FFF, 779px 454px #FFF, 568px 1109px #FFF, 57px 1611px #FFF, 710px 5px #FFF, 196px 1079px #FFF, 1224px 346px #FFF, 426px 990px #FFF, 207px 1333px #FFF, 1304px 776px #FFF, 1951px 1866px #FFF, 984px 947px #FFF, 1217px 476px #FFF, 1417px 834px #FFF, 1729px 224px #FFF, 607px 675px #FFF, 471px 946px #FFF, 1853px 87px #FFF, 1311px 1357px #FFF, 948px 555px #FFF, 1487px 1182px #FFF, 721px 341px #FFF, 140px 93px #FFF, 1938px 1891px #FFF, 532px 316px #FFF, 592px 1176px #FFF, 1052px 1724px #FFF, 337px 64px #FFF, 1834px 498px #FFF, 1742px 104px #FFF, 1773px 1244px #FFF, 1197px 183px #FFF, 1136px 1928px #FFF, 1800px 1400px #FFF, 1199px 995px #FFF, 1363px 1908px #FFF, 1440px 511px #FFF, 1944px 211px #FFF, 445px 1975px #FFF, 367px 681px #FFF, 1862px 117px #FFF, 1622px 1769px #FFF, 1346px 1972px #FFF, 83px 656px #FFF, 1082px 742px #FFF, 1015px 1220px #FFF, 602px 850px #FFF, 92px 1326px #FFF, 1222px 1479px #FFF, 1464px 142px #FFF, 267px 1873px #FFF, 1557px 664px #FFF, 1008px 1818px #FFF, 1271px 1918px #FFF, 282px 1530px #FFF, 1898px 1285px #FFF, 1618px 909px #FFF, 1350px 713px #FFF, 382px 817px #FFF, 438px 1282px #FFF, 1150px 1498px #FFF, 137px 1483px #FFF, 1577px 791px #FFF, 889px 777px #FFF, 1803px 192px #FFF, 1060px 1471px #FFF, 1900px 1105px #FFF, 1380px 1936px #FFF, 171px 591px #FFF, 455px 1533px #FFF, 1729px 1859px #FFF, 1022px 425px #FFF, 1072px 503px #FFF, 1497px 717px #FFF, 1130px 168px #FFF, 1180px 641px #FFF, 665px 33px #FFF, 922px 670px #FFF, 371px 236px #FFF, 337px 1608px #FFF, 167px 1355px #FFF, 560px 690px #FFF, 977px 599px #FFF, 1735px 241px #FFF, 1876px 545px #FFF, 997px 286px #FFF, 1431px 684px #FFF, 1292px 917px #FFF, 1425px 1964px #FFF, 1424px 1971px #FFF, 1059px 1922px #FFF, 1299px 52px #FFF, 394px 1588px #FFF, 300px 1370px #FFF, 1201px 1878px #FFF, 159px 1059px #FFF, 791px 310px #FFF, 579px 286px #FFF, 1879px 1635px #FFF, 1991px 1396px #FFF, 821px 1100px #FFF, 1634px 142px #FFF, 616px 1489px #FFF, 1098px 616px #FFF, 852px 84px #FFF, 1233px 1077px #FFF, 175px 44px #FFF, 1588px 1011px #FFF, 1194px 1925px #FFF, 1738px 697px #FFF, 1582px 16px #FFF, 1927px 393px #FFF, 762px 600px #FFF, 746px 1123px #FFF, 1024px 891px #FFF, 90px 1153px #FFF, 708px 1750px #FFF, 1343px 368px #FFF, 482px 523px #FFF, 1979px 1902px #FFF, 1457px 1285px #FFF, 505px 1440px #FFF, 1115px 39px #FFF, 1862px 693px #FFF, 1157px 62px #FFF, 634px 251px #FFF, 464px 1160px #FFF, 1032px 586px #FFF, 574px 581px #FFF, 1128px 837px #FFF, 826px 1530px #FFF, 785px 550px #FFF, 511px 1672px #FFF, 1817px 434px #FFF, 1856px 546px #FFF, 66px 1736px #FFF, 40px 956px #FFF, 1420px 1254px #FFF, 1998px 1964px #FFF, 707px 51px #FFF, 946px 1406px #FFF, 882px 871px #FFF, 1315px 1214px #FFF, 1645px 545px #FFF, 711px 1284px #FFF, 1148px 1852px #FFF, 1394px 390px #FFF, 526px 942px #FFF, 1166px 1293px #FFF, 1214px 745px #FFF, 547px 865px #FFF, 190px 931px #FFF, 1864px 1878px #FFF, 1799px 253px #FFF, 838px 1926px #FFF, 730px 631px #FFF, 1612px 1409px #FFF, 1338px 595px #FFF, 282px 486px #FFF, 1285px 473px #FFF, 1529px 608px #FFF, 1233px 1747px #FFF, 52px 1372px #FFF, 1909px 1141px #FFF, 1688px 938px #FFF, 57px 1677px #FFF, 1279px 1208px #FFF, 524px 93px #FFF, 1364px 1720px #FFF, 1587px 968px #FFF, 250px 1918px #FFF, 379px 544px #FFF, 1667px 1662px #FFF, 1667px 353px #FFF, 1512px 333px #FFF, 632px 117px #FFF, 611px 1384px #FFF, 1119px 1710px #FFF, 1332px 1215px #FFF, 176px 1509px #FFF, 1400px 640px #FFF, 287px 90px #FFF, 247px 785px #FFF, 1238px 643px #FFF, 127px 260px #FFF, 442px 307px #FFF, 753px 163px #FFF, 272px 1447px #FFF, 1303px 1034px #FFF, 660px 1709px #FFF, 206px 1458px #FFF, 1162px 1780px #FFF, 722px 1259px #FFF, 338px 1427px #FFF, 270px 1549px #FFF, 1993px 1839px #FFF, 1131px 825px #FFF, 433px 1201px #FFF, 1914px 1561px #FFF, 704px 841px #FFF, 477px 1409px #FFF, 294px 1240px #FFF, 1221px 1315px #FFF, 866px 37px #FFF, 1813px 1496px #FFF, 1251px 1899px #FFF, 1537px 1338px #FFF, 1872px 528px #FFF, 1176px 186px #FFF, 952px 993px #FFF, 214px 1210px #FFF, 1260px 1247px #FFF, 105px 212px #FFF, 1472px 821px #FFF, 1136px 1790px #FFF, 157px 1477px #FFF, 1352px 1487px #FFF, 217px 1630px #FFF, 1389px 655px #FFF, 1872px 1100px #FFF, 665px 1272px #FFF, 1315px 759px #FFF, 1034px 872px #FFF, 1414px 1618px #FFF, 970px 551px #FFF, 1786px 982px #FFF, 262px 434px #FFF, 1424px 1916px #FFF, 209px 850px #FFF, 1173px 921px #FFF, 1360px 1007px #FFF, 86px 1304px #FFF, 313px 769px #FFF, 1943px 1213px #FFF, 304px 959px #FFF, 963px 890px #FFF, 1944px 774px #FFF, 1840px 1902px #FFF, 426px 1276px #FFF, 1269px 488px #FFF, 1696px 1351px #FFF, 403px 231px #FFF, 1266px 1664px #FFF, 964px 1179px #FFF, 281px 1723px #FFF, 15px 1353px #FFF, 1671px 144px #FFF, 1629px 1530px #FFF, 1506px 361px #FFF, 363px 1490px #FFF, 1043px 1666px #FFF, 1524px 1654px #FFF, 649px 1660px #FFF, 1947px 1331px #FFF, 1738px 1379px #FFF, 378px 1213px #FFF, 1059px 1298px #FFF, 1414px 1639px #FFF, 1399px 142px #FFF, 1942px 1780px #FFF, 1303px 1984px #FFF, 1414px 396px #FFF, 595px 1469px #FFF, 457px 924px #FFF, 1722px 116px #FFF, 1749px 1504px #FFF, 520px 1461px #FFF, 1760px 76px #FFF, 1669px 327px #FFF, 1268px 921px #FFF, 167px 1988px #FFF, 1672px 1860px #FFF, 688px 1700px #FFF, 731px 641px #FFF, 1469px 843px #FFF, 247px 519px #FFF, 1585px 1967px #FFF, 1952px 1831px #FFF, 967px 1988px #FFF, 36px 14px #FFF, 1555px 1946px #FFF, 1999px 1081px #FFF, 37px 906px #FFF, 915px 1573px #FFF, 1270px 1951px #FFF, 1405px 936px #FFF, 1278px 1023px #FFF, 1889px 1971px #FFF, 1775px 1880px #FFF, 138px 1269px #FFF, 1134px 551px #FFF, 1599px 1874px #FFF, 485px 846px #FFF, 359px 212px #FFF, 1659px 1809px #FFF, 890px 1665px #FFF, 178px 1968px #FFF, 1839px 1460px #FFF, 1536px 1286px #FFF, 1258px 1370px #FFF, 1919px 572px #FFF, 707px 1470px #FFF, 1671px 1670px #FFF, 692px 1475px #FFF, 1331px 125px #FFF, 575px 328px #FFF, 1078px 987px #FFF, 739px 1859px #FFF, 1699px 923px #FFF, 219px 188px #FFF, 1801px 297px #FFF, 88px 539px #FFF, 1431px 520px #FFF, 584px 1477px #FFF, 1614px 1520px #FFF, 1496px 370px #FFF, 1079px 813px #FFF, 352px 380px #FFF, 558px 1926px #FFF, 417px 1360px #FFF, 236px 532px #FFF, 1452px 1219px #FFF, 1019px 430px #FFF, 729px 88px #FFF, 227px 1170px #FFF, 237px 70px #FFF, 158px 1410px #FFF, 834px 1285px #FFF, 1965px 136px #FFF, 319px 1761px #FFF, 1930px 401px #FFF, 1634px 1803px #FFF, 87px 980px #FFF, 267px 1582px #FFF, 63px 420px #FFF, 126px 197px #FFF, 1635px 1930px #FFF, 215px 544px #FFF, 1414px 364px #FFF, 866px 465px #FFF, 694px 560px #FFF, 770px 1642px #FFF, 1168px 1983px #FFF, 1202px 1263px #FFF, 226px 982px #FFF, 392px 476px #FFF, 1689px 865px #FFF, 864px 961px #FFF, 1227px 513px #FFF, 1137px 1819px #FFF, 1754px 1256px #FFF, 628px 1808px #FFF, 1736px 583px #FFF, 574px 717px #FFF, 1082px 135px #FFF, 1440px 1486px #FFF, 1461px 1191px #FFF, 832px 1151px #FFF, 787px 325px #FFF, 997px 1060px #FFF, 815px 648px #FFF, 1807px 838px #FFF, 340px 793px #FFF, 1634px 894px #FFF, 1679px 257px #FFF, 435px 1536px #FFF, 1607px 51px #FFF, 1580px 1493px #FFF, 993px 423px #FFF, 1417px 358px #FFF, 1557px 246px #FFF, 64px 882px #FFF, 1632px 797px #FFF, 1191px 46px #FFF, 1816px 1898px #FFF, 1508px 2px #FFF, 826px 276px #FFF, 780px 781px #FFF, 221px 342px #FFF, 1968px 580px #FFF, 920px 1780px #FFF, 760px 848px #FFF, 1098px 1370px #FFF, 382px 301px #FFF, 1976px 1841px #FFF, 1580px 1902px #FFF, 1954px 1054px #FFF, 1992px 1744px #FFF, 307px 1029px #FFF, 278px 342px #FFF, 754px 806px #FFF, 1270px 1937px #FFF, 1284px 1218px #FFF, 1514px 287px #FFF, 869px 1167px #FFF, 1494px 1345px #FFF, 477px 78px #FFF, 633px 1715px #FFF, 77px 195px #FFF, 271px 1430px #FFF, 760px 1531px #FFF, 1479px 1670px #FFF, 607px 239px #FFF, 1392px 701px #FFF, 1795px 172px #FFF, 1259px 1278px #FFF, 1395px 1733px #FFF, 646px 414px #FFF, 1449px 43px #FFF, 168px 1255px #FFF, 258px 1870px #FFF, 1856px 423px #FFF, 611px 1827px #FFF, 1729px 510px #FFF, 1376px 272px #FFF, 1243px 1776px #FFF, 1137px 477px #FFF, 1734px 1717px #FFF, 687px 860px #FFF, 1982px 1858px #FFF, 762px 213px #FFF, 1191px 134px #FFF, 292px 1682px #FFF, 944px 370px #FFF, 363px 1089px #FFF, 112px 238px #FFF, 218px 143px #FFF, 1838px 950px #FFF, 1019px 1448px #FFF, 447px 865px #FFF;
    }

#stars2 {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 1886px 519px #FFF, 1732px 1353px #FFF, 215px 1422px #FFF, 1265px 421px #FFF, 322px 1386px #FFF, 1981px 342px #FFF, 1037px 1933px #FFF, 1611px 266px #FFF, 1331px 448px #FFF, 316px 1868px #FFF, 60px 1340px #FFF, 1509px 936px #FFF, 1978px 993px #FFF, 256px 1603px #FFF, 1421px 357px #FFF, 585px 1954px #FFF, 80px 584px #FFF, 1288px 1306px #FFF, 1546px 1514px #FFF, 611px 1551px #FFF, 1339px 1710px #FFF, 983px 541px #FFF, 1744px 152px #FFF, 1779px 66px #FFF, 369px 1781px #FFF, 461px 1780px #FFF, 542px 1434px #FFF, 1419px 1362px #FFF, 458px 9px #FFF, 521px 1286px #FFF, 1708px 561px #FFF, 253px 841px #FFF, 1532px 1050px #FFF, 1469px 456px #FFF, 1878px 1941px #FFF, 460px 760px #FFF, 274px 162px #FFF, 1673px 1321px #FFF, 5px 529px #FFF, 1821px 1632px #FFF, 1450px 672px #FFF, 1529px 160px #FFF, 1881px 945px #FFF, 797px 373px #FFF, 1095px 1365px #FFF, 1508px 456px #FFF, 505px 1059px #FFF, 86px 863px #FFF, 1947px 900px #FFF, 1394px 399px #FFF, 1531px 581px #FFF, 1197px 440px #FFF, 610px 1565px #FFF, 788px 819px #FFF, 1353px 1058px #FFF, 1675px 1355px #FFF, 1282px 1110px #FFF, 1643px 890px #FFF, 1687px 1474px #FFF, 1811px 1165px #FFF, 587px 581px #FFF, 1292px 689px #FFF, 184px 43px #FFF, 1238px 1551px #FFF, 97px 1454px #FFF, 80px 749px #FFF, 1756px 1243px #FFF, 777px 1682px #FFF, 591px 1636px #FFF, 1546px 1966px #FFF, 477px 465px #FFF, 237px 700px #FFF, 256px 409px #FFF, 661px 636px #FFF, 596px 725px #FFF, 1395px 1036px #FFF, 94px 1061px #FFF, 1354px 787px #FFF, 211px 1851px #FFF, 8px 723px #FFF, 1517px 929px #FFF, 1119px 563px #FFF, 560px 83px #FFF, 444px 450px #FFF, 185px 286px #FFF, 613px 1243px #FFF, 714px 673px #FFF, 66px 1579px #FFF, 193px 1467px #FFF, 1777px 333px #FFF, 586px 688px #FFF, 832px 612px #FFF, 182px 1887px #FFF, 320px 1716px #FFF, 1128px 695px #FFF, 299px 1553px #FFF, 220px 844px #FFF, 1072px 756px #FFF, 1752px 1141px #FFF, 1813px 1431px #FFF, 1554px 1282px #FFF, 1482px 622px #FFF, 497px 201px #FFF, 1039px 632px #FFF, 371px 1178px #FFF, 1827px 698px #FFF, 1356px 755px #FFF, 565px 1554px #FFF, 1384px 943px #FFF, 410px 1023px #FFF, 156px 64px #FFF, 379px 443px #FFF, 1035px 1005px #FFF, 1885px 20px #FFF, 1523px 391px #FFF, 583px 1872px #FFF, 469px 484px #FFF, 844px 488px #FFF, 11px 365px #FFF, 168px 1038px #FFF, 564px 956px #FFF, 37px 889px #FFF, 29px 1549px #FFF, 322px 415px #FFF, 609px 1515px #FFF, 1583px 1213px #FFF, 638px 1935px #FFF, 1411px 247px #FFF, 1388px 357px #FFF, 376px 1733px #FFF, 1014px 136px #FFF, 383px 1443px #FFF, 79px 56px #FFF, 566px 939px #FFF, 590px 212px #FFF, 1582px 593px #FFF, 842px 23px #FFF, 1572px 307px #FFF, 1247px 694px #FFF, 734px 1559px #FFF, 485px 1593px #FFF, 925px 1429px #FFF, 1874px 1298px #FFF, 839px 313px #FFF, 465px 47px #FFF, 1429px 1972px #FFF, 1797px 1862px #FFF, 741px 879px #FFF, 1331px 56px #FFF, 1501px 1461px #FFF, 820px 941px #FFF, 1582px 702px #FFF, 1816px 1692px #FFF, 418px 1757px #FFF, 724px 776px #FFF, 1752px 1229px #FFF, 615px 566px #FFF, 1709px 766px #FFF, 872px 436px #FFF, 1483px 1233px #FFF, 795px 410px #FFF, 1935px 1344px #FFF, 1001px 1374px #FFF, 1717px 1138px #FFF, 1872px 1463px #FFF, 1874px 305px #FFF, 467px 373px #FFF, 887px 446px #FFF, 191px 1267px #FFF, 82px 1014px #FFF, 33px 1956px #FFF, 1739px 1148px #FFF, 1646px 188px #FFF, 106px 245px #FFF, 1192px 196px #FFF, 1850px 1295px #FFF, 375px 39px #FFF, 722px 1164px #FFF, 1741px 1666px #FFF, 628px 576px #FFF, 864px 764px #FFF, 1770px 1499px #FFF, 749px 579px #FFF, 70px 1453px #FFF, 482px 571px #FFF, 1663px 56px #FFF, 1385px 1636px #FFF, 1831px 454px #FFF, 13px 904px #FFF, 787px 1121px #FFF, 278px 1418px #FFF, 528px 372px #FFF, 947px 1573px #FFF, 102px 20px #FFF, 1642px 232px #FFF, 723px 285px #FFF, 1712px 348px #FFF, 1496px 858px #FFF, 1822px 723px #FFF, 346px 1942px #FFF;
    animation: animStar 100s linear infinite;
}

    #stars2:after {
        content: " ";
        position: absolute;
        top: 2000px;
        width: 2px;
        height: 2px;
        background: transparent;
        box-shadow: 1886px 519px #FFF, 1732px 1353px #FFF, 215px 1422px #FFF, 1265px 421px #FFF, 322px 1386px #FFF, 1981px 342px #FFF, 1037px 1933px #FFF, 1611px 266px #FFF, 1331px 448px #FFF, 316px 1868px #FFF, 60px 1340px #FFF, 1509px 936px #FFF, 1978px 993px #FFF, 256px 1603px #FFF, 1421px 357px #FFF, 585px 1954px #FFF, 80px 584px #FFF, 1288px 1306px #FFF, 1546px 1514px #FFF, 611px 1551px #FFF, 1339px 1710px #FFF, 983px 541px #FFF, 1744px 152px #FFF, 1779px 66px #FFF, 369px 1781px #FFF, 461px 1780px #FFF, 542px 1434px #FFF, 1419px 1362px #FFF, 458px 9px #FFF, 521px 1286px #FFF, 1708px 561px #FFF, 253px 841px #FFF, 1532px 1050px #FFF, 1469px 456px #FFF, 1878px 1941px #FFF, 460px 760px #FFF, 274px 162px #FFF, 1673px 1321px #FFF, 5px 529px #FFF, 1821px 1632px #FFF, 1450px 672px #FFF, 1529px 160px #FFF, 1881px 945px #FFF, 797px 373px #FFF, 1095px 1365px #FFF, 1508px 456px #FFF, 505px 1059px #FFF, 86px 863px #FFF, 1947px 900px #FFF, 1394px 399px #FFF, 1531px 581px #FFF, 1197px 440px #FFF, 610px 1565px #FFF, 788px 819px #FFF, 1353px 1058px #FFF, 1675px 1355px #FFF, 1282px 1110px #FFF, 1643px 890px #FFF, 1687px 1474px #FFF, 1811px 1165px #FFF, 587px 581px #FFF, 1292px 689px #FFF, 184px 43px #FFF, 1238px 1551px #FFF, 97px 1454px #FFF, 80px 749px #FFF, 1756px 1243px #FFF, 777px 1682px #FFF, 591px 1636px #FFF, 1546px 1966px #FFF, 477px 465px #FFF, 237px 700px #FFF, 256px 409px #FFF, 661px 636px #FFF, 596px 725px #FFF, 1395px 1036px #FFF, 94px 1061px #FFF, 1354px 787px #FFF, 211px 1851px #FFF, 8px 723px #FFF, 1517px 929px #FFF, 1119px 563px #FFF, 560px 83px #FFF, 444px 450px #FFF, 185px 286px #FFF, 613px 1243px #FFF, 714px 673px #FFF, 66px 1579px #FFF, 193px 1467px #FFF, 1777px 333px #FFF, 586px 688px #FFF, 832px 612px #FFF, 182px 1887px #FFF, 320px 1716px #FFF, 1128px 695px #FFF, 299px 1553px #FFF, 220px 844px #FFF, 1072px 756px #FFF, 1752px 1141px #FFF, 1813px 1431px #FFF, 1554px 1282px #FFF, 1482px 622px #FFF, 497px 201px #FFF, 1039px 632px #FFF, 371px 1178px #FFF, 1827px 698px #FFF, 1356px 755px #FFF, 565px 1554px #FFF, 1384px 943px #FFF, 410px 1023px #FFF, 156px 64px #FFF, 379px 443px #FFF, 1035px 1005px #FFF, 1885px 20px #FFF, 1523px 391px #FFF, 583px 1872px #FFF, 469px 484px #FFF, 844px 488px #FFF, 11px 365px #FFF, 168px 1038px #FFF, 564px 956px #FFF, 37px 889px #FFF, 29px 1549px #FFF, 322px 415px #FFF, 609px 1515px #FFF, 1583px 1213px #FFF, 638px 1935px #FFF, 1411px 247px #FFF, 1388px 357px #FFF, 376px 1733px #FFF, 1014px 136px #FFF, 383px 1443px #FFF, 79px 56px #FFF, 566px 939px #FFF, 590px 212px #FFF, 1582px 593px #FFF, 842px 23px #FFF, 1572px 307px #FFF, 1247px 694px #FFF, 734px 1559px #FFF, 485px 1593px #FFF, 925px 1429px #FFF, 1874px 1298px #FFF, 839px 313px #FFF, 465px 47px #FFF, 1429px 1972px #FFF, 1797px 1862px #FFF, 741px 879px #FFF, 1331px 56px #FFF, 1501px 1461px #FFF, 820px 941px #FFF, 1582px 702px #FFF, 1816px 1692px #FFF, 418px 1757px #FFF, 724px 776px #FFF, 1752px 1229px #FFF, 615px 566px #FFF, 1709px 766px #FFF, 872px 436px #FFF, 1483px 1233px #FFF, 795px 410px #FFF, 1935px 1344px #FFF, 1001px 1374px #FFF, 1717px 1138px #FFF, 1872px 1463px #FFF, 1874px 305px #FFF, 467px 373px #FFF, 887px 446px #FFF, 191px 1267px #FFF, 82px 1014px #FFF, 33px 1956px #FFF, 1739px 1148px #FFF, 1646px 188px #FFF, 106px 245px #FFF, 1192px 196px #FFF, 1850px 1295px #FFF, 375px 39px #FFF, 722px 1164px #FFF, 1741px 1666px #FFF, 628px 576px #FFF, 864px 764px #FFF, 1770px 1499px #FFF, 749px 579px #FFF, 70px 1453px #FFF, 482px 571px #FFF, 1663px 56px #FFF, 1385px 1636px #FFF, 1831px 454px #FFF, 13px 904px #FFF, 787px 1121px #FFF, 278px 1418px #FFF, 528px 372px #FFF, 947px 1573px #FFF, 102px 20px #FFF, 1642px 232px #FFF, 723px 285px #FFF, 1712px 348px #FFF, 1496px 858px #FFF, 1822px 723px #FFF, 346px 1942px #FFF;
    }

#stars3 {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 1067px 1867px #FFF, 704px 100px #FFF, 576px 1384px #FFF, 1802px 971px #FFF, 547px 859px #FFF, 676px 1779px #FFF, 1457px 816px #FFF, 717px 1399px #FFF, 514px 1093px #FFF, 1915px 160px #FFF, 1269px 467px #FFF, 1586px 523px #FFF, 22px 1814px #FFF, 347px 977px #FFF, 1283px 1323px #FFF, 1416px 1291px #FFF, 461px 1216px #FFF, 497px 436px #FFF, 692px 1419px #FFF, 449px 1219px #FFF, 1962px 1883px #FFF, 464px 232px #FFF, 805px 1034px #FFF, 1477px 505px #FFF, 1877px 1166px #FFF, 628px 1963px #FFF, 18px 1031px #FFF, 404px 889px #FFF, 1405px 286px #FFF, 198px 1068px #FFF, 1152px 1309px #FFF, 1513px 1288px #FFF, 914px 1446px #FFF, 1011px 1419px #FFF, 320px 929px #FFF, 714px 698px #FFF, 447px 782px #FFF, 948px 1426px #FFF, 1944px 1604px #FFF, 1153px 850px #FFF, 1924px 12px #FFF, 292px 1768px #FFF, 353px 1232px #FFF, 1003px 968px #FFF, 1698px 1221px #FFF, 689px 1938px #FFF, 1443px 197px #FFF, 1240px 1326px #FFF, 988px 1044px #FFF, 1968px 1933px #FFF, 729px 1152px #FFF, 1405px 991px #FFF, 1517px 1987px #FFF, 1934px 905px #FFF, 251px 212px #FFF, 1542px 1171px #FFF, 1432px 1757px #FFF, 1753px 378px #FFF, 1732px 881px #FFF, 343px 932px #FFF, 1238px 700px #FFF, 933px 1570px #FFF, 1479px 152px #FFF, 1397px 279px #FFF, 653px 1480px #FFF, 581px 1204px #FFF, 1629px 266px #FFF, 751px 919px #FFF, 1019px 807px #FFF, 1641px 461px #FFF, 949px 517px #FFF, 746px 928px #FFF, 1425px 541px #FFF, 1986px 600px #FFF, 829px 1269px #FFF, 41px 1177px #FFF, 289px 949px #FFF, 894px 1555px #FFF, 1644px 1319px #FFF, 651px 1741px #FFF, 1668px 1237px #FFF, 1757px 1087px #FFF, 1804px 1593px #FFF, 282px 923px #FFF, 907px 1480px #FFF, 1805px 1473px #FFF, 751px 700px #FFF, 1326px 890px #FFF, 1738px 1772px #FFF, 1637px 835px #FFF, 454px 269px #FFF, 635px 1334px #FFF, 677px 774px #FFF, 955px 1420px #FFF, 897px 1772px #FFF, 1834px 1265px #FFF, 88px 1465px #FFF, 898px 604px #FFF, 1584px 1957px #FFF, 1889px 1092px #FFF;
    animation: animStar 150s linear infinite;
}

    #stars3:after {
        content: " ";
        position: absolute;
        top: 2000px;
        width: 3px;
        height: 3px;
        background: transparent;
        box-shadow: 1067px 1867px #FFF, 704px 100px #FFF, 576px 1384px #FFF, 1802px 971px #FFF, 547px 859px #FFF, 676px 1779px #FFF, 1457px 816px #FFF, 717px 1399px #FFF, 514px 1093px #FFF, 1915px 160px #FFF, 1269px 467px #FFF, 1586px 523px #FFF, 22px 1814px #FFF, 347px 977px #FFF, 1283px 1323px #FFF, 1416px 1291px #FFF, 461px 1216px #FFF, 497px 436px #FFF, 692px 1419px #FFF, 449px 1219px #FFF, 1962px 1883px #FFF, 464px 232px #FFF, 805px 1034px #FFF, 1477px 505px #FFF, 1877px 1166px #FFF, 628px 1963px #FFF, 18px 1031px #FFF, 404px 889px #FFF, 1405px 286px #FFF, 198px 1068px #FFF, 1152px 1309px #FFF, 1513px 1288px #FFF, 914px 1446px #FFF, 1011px 1419px #FFF, 320px 929px #FFF, 714px 698px #FFF, 447px 782px #FFF, 948px 1426px #FFF, 1944px 1604px #FFF, 1153px 850px #FFF, 1924px 12px #FFF, 292px 1768px #FFF, 353px 1232px #FFF, 1003px 968px #FFF, 1698px 1221px #FFF, 689px 1938px #FFF, 1443px 197px #FFF, 1240px 1326px #FFF, 988px 1044px #FFF, 1968px 1933px #FFF, 729px 1152px #FFF, 1405px 991px #FFF, 1517px 1987px #FFF, 1934px 905px #FFF, 251px 212px #FFF, 1542px 1171px #FFF, 1432px 1757px #FFF, 1753px 378px #FFF, 1732px 881px #FFF, 343px 932px #FFF, 1238px 700px #FFF, 933px 1570px #FFF, 1479px 152px #FFF, 1397px 279px #FFF, 653px 1480px #FFF, 581px 1204px #FFF, 1629px 266px #FFF, 751px 919px #FFF, 1019px 807px #FFF, 1641px 461px #FFF, 949px 517px #FFF, 746px 928px #FFF, 1425px 541px #FFF, 1986px 600px #FFF, 829px 1269px #FFF, 41px 1177px #FFF, 289px 949px #FFF, 894px 1555px #FFF, 1644px 1319px #FFF, 651px 1741px #FFF, 1668px 1237px #FFF, 1757px 1087px #FFF, 1804px 1593px #FFF, 282px 923px #FFF, 907px 1480px #FFF, 1805px 1473px #FFF, 751px 700px #FFF, 1326px 890px #FFF, 1738px 1772px #FFF, 1637px 835px #FFF, 454px 269px #FFF, 635px 1334px #FFF, 677px 774px #FFF, 955px 1420px #FFF, 897px 1772px #FFF, 1834px 1265px #FFF, 88px 1465px #FFF, 898px 604px #FFF, 1584px 1957px #FFF, 1889px 1092px #FFF;
    }

#title {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    color: #FFF;
    text-align: center;
    font-family: "lato", sans-serif;
    font-weight: 300;
    font-size: 50px;
    letter-spacing: 10px;
    margin-top: -60px;
    padding-left: 10px;
}

    #title span {
        background: -webkit-linear-gradient(white, #38495a);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

@keyframes animStar {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-2000px);
    }
}*/
/*////////////////////////////////////////////*/


@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);


/*.messege, 
h1, h2 {
    opacity: 1;
    top: 23%;
    left: 10%;
    width: 80vw;
    color: #fff;
    text-align: center;
    font-size: 2vw;
    font-weight: bolder;
    font-family: 'Heebo', sans-serif;
    position: absolute;
    z-index: 99999;
    animation-name: massage;
    animation-duration: 5.5s;
    animation-iteration-count: infinite;
}
*/


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

    .newMessege {
        width: 74%;
        left: 13%;
    }
    
    .messege {
        font-size: min(3.0vw, 2.3vh) !important;
    }
/*    .mainStar {
        height: 60vw;
        width: 60vw;  
        top: 30%;
        left: 35%;
    }

    #boardImg {
        height: 50vh;
        position: absolute;
        left: 25vw;
    }    

    .positiveThought {
        position: absolute;
        top: 55vh;
        width: 70vw;
        left: 15vw;
        height: 35vh;
    }
*/    

    #inp2 {
        position: absolute;
        left: 0;
        width: 70vw;
    }
    .centered {
        left: 50vw;
    }
    #inp {
        left: 25vw;
    }
/*
    #exit3 {
        width: 50px;
        height: 50px;
        line-height: 25px;
        font-size: 22px;
        left:15px;
    }

	#exit, #exit1, #stop, #continue {
        z-index:999;
        font-size: 50px;
        height: 110px;
        width: 180px;
        left: 180px;
    }
    
    #exit1 {
        top: 170px;
    }
    #stop,#continue {
        top: 320px;
    }
*/   
    #menu {
        left: 5px;
        top: 5px;
        line-height: 8px;
        font-size: 20px;
        padding: 0px 10px 15px;
    }

 /*
	#beginAgain {
        width: 700px;
        font-size: 60px;
    }
    #another {
        width: 500px;
    }
*/
 /*   #img {
        width: 90%;
        left: 5%;
    }
 */
	
	#intractions {
/*        width: 80vw;
        left: 10vw;*/
        font-size: 25px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

    .newMessege {
        width: 80%;
        left: 10%;
    }

    .messege {
        font-size: min(2.3vw, 2.8vh) !important;
    }
/*  .mainStar {
        height: 60vw;
        width: 60vw;
        top: 30%;
        left: 35%;
    }

    #boardImg {
        height: 50vh;
        position: absolute;
        left: 25vw;
    
    }

    .positiveThought {
        position: absolute;
        top: 55vh;
        width: 70vw;
        left: 15vw;
        height: 35vh;
    }
*/    
    #inp2 {
        position: absolute;
        left: 0;
        width: 70vw;
    }
    .centered {
        left: 50vw;
    }
    #inp {
        left: 25vw;
    }
/*
    #exit3 {
        width: 50px;
        height: 50px;
        line-height: 25px;
        font-size: 22px;
        left:15px;
    }

    #exit, #exit1, #stop,#continue {
        z-index: 999;
        font-size: 50px;
        height: 110px;
        width: 180px;
        left: 180px;
    }

    #exit1 {
        top: 170px;
    }

    #stop,#continue {
        top: 320px;
    }
*/
    #menu {
        left: 5px;
        top: 5px;
        line-height: 8px;
        font-size: 20px;
        padding: 0px 10px 15px;
    }


/*
	#beginAgain {
        width: 700px;
        font-size: 60px;
    }

    #another {
        width: 500px;
    }
*/
  /*    #img {
      width: 90%;
        left: 0;
    }
*/
	
	#intractions {
/*        width: 80vw;
        left: 10vw;*/
        font-size: 25px;
    }
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: black;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: black;
    opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: black;
    opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: black;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: black;
}

::placeholder { /* Most modern browsers support this now. */
    color: black;
}

#img {
    z-index: 9999;
    width: min(42vh, 60vw);
    height: min(42vh, 60vw);
    position: relative;
    border-radius: 50%;
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

    .newMessege {
        width: 70%;
        left: 15%;
    }

    .messege {
        font-size: min(5vw, 2.8vh) !important;
    }
    /*
    .mainStar {
        height: 60vw;
        width: 60vw;
        top: 30%;
        left: 35%;
    }
    #boardImg {
        height: 50vh;
        position: absolute;
        left: 25vw;
    }
    
    .positiveThought {
        position: absolute;
        top: 55vh;
        width: 70vw;
        left: 15vw;
        height: 35vh;
    }
    */
    #inp2 {
        position: absolute;
        left: 0;
        width: 70vw;
    }
    .centered {
        left: 50vw;
    }
    #inp {
        left: 25vw;
    }
/*
	#exit3 {
        width: 50px;
        height: 50px;
        line-height: 25px;
        font-size: 22px;
        left:15px;
    }
   
    #exit, #exit1, #stop,#continue {
        z-index: 999;
        font-size: 50px;
        height: 110px;
        width: 180px;
        left: 180px;
    }

    #exit1 {
        top: 170px;
    }

    #stop,#continue {
        top: 320px;
    }
*/
    #menu {
        line-height: 8px;
        font-size: 20px;
        padding: 0px 10px 15px;
    }

/*
	#beginAgain {
        width: 700px;
        font-size: 60px;
    }

    #another {
        width: 500px;
    }
*/
/*   #img {
        width: 90%;
        left: 0;
    }
*/
/*	
	#intractions {
        width: 80vw;
        left: 10vw;
        font-size: 60px;
    }
*/
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    .messege {
        font-size: 2.8vh !important;
    }
 /*   .mainStar {
        height: 300px;
        width: 300px;
        top: 45%;
        left: 50%;
    }

    #boardImg {
        height: 110vh;
        left: 0;
    }
    
    .positiveThought {
        background-color: lightblue;
        right: 0;
        height: 70vh;
        width: 35vw;
        top: 15vh;
        left: 60vw;
        margin-right: 0;
        position: absolute;
        font-size: 80px;
        color: black;
        text-align: center;
        font-weight: bolder;
        font-family: 'Heebo', sans-serif;
        border-radius: 10%;
    }
    */    

    #inp {
        left: 10vw;
    }
    .centered {
        left: 245px;
    }
/*
    #exit3 {
        width: 50px;
        height: 50px;
        line-height: 25px;
        font-size: 22px;
        left:15px;
    }
    #exit, #exit1, #stop,#continue {
        z-index: 999;
        height: 20px;
        left: 70px;
        width: 70px;
        font-size: 20px;
    }

    #exit1 {
        padding: 12px 10px;
        top: 65px;
        width: 70px;
    }

    #stop,#continue {
        top: 115px;
    }
*/
    #menu {
        line-height: 8px;
        font-size: 20px;
        padding: 0px 10px 15px;
    }



/* 
	#beginAgain {
        font-size: 24px;
        width: 26vw;
    }

    #another {
        width: 26vw;
    }
*/
 /*   #img {
        left: 32%;
        width: 35%;
    }
*/
/*
    #intractions {
        width: 500px;
        font-size: 18px;
        left: calc(50% - 200px);
    }
*/
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .messege {
        font-size: 2.8vh !important;
    }
    /*
    .mainStar {
        height: 300px;
        width: 300px;
        top: 45%;
        left: 50%;
    }
    #boardImg {
        height: 110vh;
        left: 0;
    }

   .positiveThought {
        background-color: lightblue;
        right: 0;
        height: 70vh;
        width: 35vw;
        top: 15vh;
        left: 60vw;
        margin-right: 0;
        position: absolute;
        font-size: 80px;
        color: black;
        text-align: center;
        font-weight: bolder;
        font-family: 'Heebo', sans-serif;
        border-radius: 10%;
    }
    */
    #inp {
        left: 10vw;
    }
    .centered {
        left: 245px;
    }
/*
    #exit3 {
        width: 50px;
        height: 50px;
        line-height: 25px;
        font-size: 22px;
        left:15px;
    }
    #exit, #exit1, #stop,#continue {
        z-index: 999;
        height: 20px;
        left: 70px;
        width: 70px;
        font-size: 20px;
    }

    #exit1 {
        padding: 12px 10px;
        top: 65px;
        width: 70px;
    }

    #stop,#continue {
        top: 115px;
    }
*/
    #menu {
        line-height: 8px;
        font-size: 20px;
        padding: 0px 10px 15px;
    }



/*
	#beginAgain {
        font-size: 24px;
        width: 26vw;
    }

    #another {
        width: 26vw;
    }
*/
 /*   #img {
        left: 32%;
        width: 35%;
    }
*/
/*
    #intractions {
        width: 500px;
        font-size: 18px;
        left: calc(50% - 200px);
    }
*/
}



#beginAgain {
    display: block;
    background-color: #773f77;
    border-radius: 60px;
    padding: 5px;
    /*top: 72vh;*/
    text-align: center;
    z-index: 999;
    position: absolute;
    opacity: 1;
    text-decoration: none;
    font-size: 24px;
    /*left: 52.5vw;*/
    width: 26vw;
}

#intractions {
    text-align: center;
    z-index: 999;
    position: relative;
    border: 4px solid green;
    border-radius: 60px;
    width: 500px;
    max-width: 95vw;
    font-size: 30px;
    padding: 5px 0 5px 0;
    margin-bottom: 5vh;
}

#beginGame {
    text-align: center;
    z-index: 999;
    width: 500px;
    max-width: 95vw;
    font-weight: bold;
    font-size: 30px;
    background-color: #2f9e2f;
    color: white;
    border-radius: 60px;
    padding: 9px 0;
 }


#noneThought {
    position: relative;
    color: white;
    z-index: 999;
    font-size: min(3vh, 3vw) !important;
}

.submit {
    direction: ltr;
    opacity: 0;
    font-family: 'Heebo', sans-serif;
}
.btn-enterthought {
	/* top: 90%;*/
    /*margin-left: -15px;*/
}
.button /*, #beginGame */ {
	bottom: 8vh;
    text-align: center;
    z-index: 999;
    position: absolute;
    /* position: fixed; */
    /*top: 90vh;*/
    /*left: calc(50%);*/
    width: 500px;
    max-width:95vw;
    opacity: 1;
    font-weight: bold;
    font-size: 30px;
    background-color: #2f9e2f;
    color: white;
    border-radius: 60px;
    padding: 9px 0;
    /*margin-left: 0;*/
}

/*.typeHere,.button, #intractions, *//*#beginGame, */ /*#noneThought,*/ #beginAgain{
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

@media only screen and (max-width: 991px) {

	/*
    .button, #beginGame {
		bottom: max(8vh, 40px);
		font-size: 30px;
		opacity: 1;
	}
    */
    /*
	.typeHere {
		font-size: 35px;
		bottom: max(25vh, max(8vh, 40px) + 100px);
		width: 90vw;
		opacity: 1;
	}
    */
	#intractions {
		font-size: 30px;
	/*	bottom: max(25vh, max(8vh, 40px) + 65px);*/
		width: 95%;
	}
	#beginAgain {
		font-size: 30px;
		bottom: max(25vh, max(8vh, 40px) + 65px);
		width: 95%;
	}
/*	#noneThought {
		font-size: 30px;
		bottom: calc( max(25vh, max(8vh, 40px) + 100px) - 40px);
	}*/
}

@media only screen and (min-width: 992px) {

    /*.button, #beginGame {
		bottom: max(8vh, 40px);
		font-size: 18px;
		opacity: 1;
    }*/
    /*
   .typeHere {
        font-size: 30px;
		bottom: max(25vh, max(8vh, 40px) + 80px);
        width: 600px;
		opacity: 1;
    }
    */
	#intractions {
		font-size: 35px;
	/*	bottom: max(25vh, max(8vh, 40px) + 50px);*/
		width: 600px;
	}
	#beginAgain {
		font-size: 35px;
		bottom: max(25vh, max(8vh, 40px) + 50px);
		width: 600px;
	}
/*	#noneThought {
		bottom: calc( max(25vh, max(8vh, 40px) + 80px) - 35px);
	}*/
}

/*
.button span:after {
	content: " ";
	position: absolute;
	top: 0;
	right: -18px;
	opacity: 0;
	width: 10px;
	height: 10px;
	margin-top: -10px;
	background: transparent;
	border: 3px solid #fff;
	border-top: none;
	border-right: none;
	transition: opacity .5s,top .5s,right .5s;
	transform: rotate(-45deg)
}
.button:hover span,
.button:active span {
	padding-right: 30px
}
.button:hover span:after, .button:active span:after {
	-webkit-transition: opacity .5s,top .5s,right .5s;
	transition: opacity .5s,top .5s,right .5s;
	opacity: 1;
	-ms-filter: "alpha(opacity=100)";
	border-color: #a7582c;
	right: 0;
	top: 50%
}
*/






h1 {
    font-size: 50px;
    top:0;
}
h2 {
    font-size: 35px;
    top: 10%;
}


/* Global Styles
  ---------------------------------------------- */

body, html {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
   /* height: 100vh !important;*/
    height: calc(100vh - env(safe-area-inset-bottom));    
    overflow: hidden;
    position: relative;
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

html {
    font-family: 'Heebo', sans-serif;
    background: #0D133A;
    font-size: 100%;
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-smoothing: antialiased;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
}

svg:not(:root) {
    overflow: hidden;
}

a {
    color: white;
    text-decoration: none;
}

/* Animation globals
  ---------------------------------------------- */
#landscape, .land, #bottom, .stags, .stag, .counter:before, #lensFlare, .sunMask {
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* Background gradients
  ---------------------------------------------- */
#sky {
    height: 60%;
    margin-bottom: -6px;
    position: absolute;
    top: 0px;
    z-index: 2;
}

#sky-rect {
    height: 100%;
}

#reflection, #sunMask {
    height: 40%;
    position: absolute;
    top: 60%;
    z-index: 4;
}

#reflection-rect {
    height: 100%;
}

#sunMask {
    background: #0D133A;
    height: 40%;
    position: absolute;
    top: 60%;
    width: 100%;
}

/* Stag
  ---------------------------------------------- */
#stag {
    position: absolute;
    bottom: 15.3%;
    width: 6.3%;
    left: 38%;
    z-index: 5;
}

.stag {
    width: 100%;
    position: absolute;
    bottom: 0px;
}

.stags {
    animation-name: stags;
    animation-delay: 1s;
}

@keyframes stags {
    0% {
        fill: #0D141E;
    }

    4% {
        fill: #101522;
    }

    8% {
        fill: #121726;
    }

    12% {
        fill: #141829;
    }

    16% {
        fill: #1C1E3C;
    }

    20% {
        fill: #22214F;
    }

    24% {
        fill: #262262;
    }

    28% {
        fill: #1D4065;
    }

    32% {
        fill: #125768;
    }

    36% {
        fill: #1E4553;
    }

    40% {
        fill: #1E404E;
    }

    44% {
        fill: #1E3B49;
    }

    48% {
        fill: #1D3643;
    }

    52% {
        fill: #1C313E;
    }

    56% {
        fill: #1C3344;
    }

    60% {
        fill: #1C3449;
    }

    64% {
        fill: #1B344F;
    }

    68% {
        fill: #183454;
    }

    72% {
        fill: #242B4A;
    }

    76% {
        fill: #2B2241;
    }

    80% {
        fill: #24203C;
    }

    84% {
        fill: #1D1D37;
    }

    88% {
        fill: #151A32;
    }

    92% {
        fill: #14192C;
    }

    96% {
        fill: #111725;
    }

    100% {
        fill: #0D141E;
    }
}

#stag1 {
    animation-name: stag_one;
    width: 108%;
    left: -20%;
}

@keyframes stag_one {
    0% {
        opacity: 1.0;
    }

    15% {
        opacity: 1.0;
    }

    20% {
        opacity: 0.0;
    }

    90% {
        opacity: 0.0;
    }

    95% {
        opacity: 1.0;
    }

    100% {
        opacity: 1.0;
    }
}

#stag2 {
    animation-name: stag_two;
}

@keyframes stag_two {
    0% {
        opacity: 0.0;
    }

    17% {
        opacity: 0.0;
    }

    20% {
        opacity: 1.0;
    }

    40% {
        opacity: 1.0;
    }

    45% {
        opacity: 0.0;
    }

    65% {
        opacity: 0.0;
    }

    70% {
        opacity: 1.0;
    }

    90% {
        opacity: 1.0;
    }

    95% {
        opacity: 0.0;
    }

    100% {
        opacity: 0.0;
    }
}

#stag3 {
    animation-name: stag_three;
    width: 144%;
    left: -10%;
    bottom: -3%;
}

@keyframes stag_three {
    0% {
        opacity: 0.0;
    }

    15% {
        opacity: 0.0;
    }

    20% {
        opacity: 0.0;
    }

    40% {
        opacity: 0.0;
    }

    45% {
        opacity: 1.0;
    }

    65% {
        opacity: 1.0;
    }

    70% {
        opacity: 0.0;
    }

    100% {
        opacity: 0.0;
    }
}

/* Sun
  ---------------------------------------------- */
.sunMask {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    z-index: 4;
    mix-blend-mode: screen;
    animation-name: sunFocus;
}

@keyframes sunFocus {
    0% {
        filter: blur(10px);
        opacity: 0;
    }

    16% {
        filter: blur(10px);
    }

    20% {
        filter: blur(10px);
    }

    25% {
        filter: blur(5px);
        opacity: 0;
    }

    30% {
        filter: blur(0px);
        opacity: 1;
    }

    80% {
        filter: blur(0px);
        opacity: 1;
    }

    88% {
        filter: blur(5px);
        opacity: 0;
    }

    100% {
        filter: blur(10px);
        opacity: 0;
    }
}

.sun {
    width: 100%;
    padding-bottom: 100%;
    position: absolute;
    right: -51%;
    top: -330%;
}

    .sun div {
        background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21555/sun.svg);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

.suncrane {
    animation: suncrane 60s linear infinite;
    position: absolute;
    width: 21%;
    height: 4%;
    background: transparent;
    margin: auto;
    top: 57%;
    left: 0;
    right: 0;
}

@keyframes suncrane {
    0% {
        transform: rotate(90deg);
    }

    100% {
        transform: rotate(-270deg);
    }
}

.sun:before {
    display: block;
    content: ' ';
    animation: glare 60s linear infinite;
    position: absolute;
    width: 120%;
    height: 120%;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21555/glare.svg) no-repeat scroll center;
    top: -10%;
    left: -10%;
    background-size: 100%;
}

@keyframes glare {
    from {
        transform: rotate(90deg);
        opacity: 0.0;
    }

    30% {
        opacity: 0.0;
    }

    36% {
        opacity: 1.0;
    }

    68% {
        opacity: 1.0;
    }

    74% {
        opacity: 0.0;
    }

    to {
        transform: rotate(450deg);
        opacity: 0.0;
    }
}


.sun:after {
    display: block;
    content: ' ';
    position: absolute;
    background: white;
    width: 10%;
    height: 10%;
    top: 45%;
    border-radius: 100%;
    margin: auto;
    left: 0;
    right: 0;
    box-shadow: 0px 0px 80px 30px white;
}

/* Clouds
  ---------------------------------------------- */
.clouds {
    position: absolute;
    width: 100%;
    z-index: 4;
    mix-blend-mode: screen;
    height: 100%;
}

    .clouds svg {
        width: 60%;
        position: absolute;
        top: 51%;
        filter: blur(2px);
        opacity: 0.4;
        left: -60%;
        animation-duration: 60s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-name: clouds;
    }

@keyframes clouds {
    0% {
        transform: translate3d(110%, 0px, 0px);
        opacity: 0.0;
    }

    19% {
        opacity: 0.0;
        filter: blur(5px);
    }

    25% {
        opacity: 0.3;
        filter: blur(2px);
    }

    50% {
        opacity: 0.6;
    }

    75% {
        opacity: 0.2;
    }

    90% {
        opacity: 0.0;
    }

    100% {
        transform: translate3d(150%, 0px, 0px);
        opacity: 0.0
    }
}

/* Lens flare
  ---------------------------------------------- */
.lighting {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 8;
    opacity: 0.3;
    -webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,1)));
    mix-blend-mode: screen;
    pointer-events: none;
    filter: blur(3px);
}

    .lighting .suncrane {
        width: 100%;
    }

#lensFlare {
    transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
    animation-name: flaring;
}

@keyframes flaring {
    0% {
        transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
        opacity: 0.0;
    }

    28% {
        transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
        opacity: 0.0;
    }

    35% {
        transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
        opacity: 1.0;
    }

    70% {
        transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
        opacity: 1.0;
    }

    78% {
        transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
        opacity: 0.0;
    }

    100% {
        transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
        opacity: 0.0;
    }
}

/* Sun on lake twinkles
  ---------------------------------------------- */
.twinkleWrap {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0.55;
}

.twinkles {
    width: 2.3%;
    position: absolute;
    right: 49.2%;
    top: 72.5%;
    animation: twinkles 60s linear infinite;
}

@keyframes twinkles {
    0% {
        transform: translate(450%, 0%);
        opacity: 0.0;
    }

    32% {
        opacity: 0.0;
    }

    34% {
        opacity: 1.0;
    }

    36.5% {
        transform: translate(450%, 0%);
    }

    54% {
        transform: translate(0%, 0%);
    }

    72% {
        transform: translate(-450%, 0%);
        opacity: 1.0;
    }

    78% {
        opacity: 0.0;
    }

    100% {
        transform: translate(-450%, 0%);
        opacity: 0.0;
    }
}

.twinkles:before {
    content: ' ';
    display: none;
    position: absolute;
    height: 600px;
    width: 3px;
    background: red;
    top: -600px;
    left: 50%;
}

.twinkles svg {
    width: 100%;
    position: absolute;
    top: 0;
}

#twinkle1 {
    animation: twinkle1 2s linear infinite;
}

@keyframes twinkle1 {
    0% {
        opacity: 1.0;
    }

    33.33% {
        opacity: 0.0;
    }

    66.66% {
        opacity: 0.0;
    }

    99.99% {
        opacity: 1.0;
    }

    100% {
        opacity: 1.0;
    }
}

#twinkle2 {
    animation: twinkle2 2s linear infinite;
}

@keyframes twinkle2 {
    0% {
        opacity: 0.0;
    }

    33.33% {
        opacity: 1.0;
    }

    66.66% {
        opacity: 0.0;
    }

    99.99% {
        opacity: 0.0;
    }

    100% {
        opacity: 0.0;
    }
}

#twinkle3 {
    animation: twinkle3 2s linear infinite;
}

@keyframes twinkle3 {
    0% {
        opacity: 0.0;
    }

    33.33% {
        opacity: 0.0;
    }

    66.66% {
        opacity: 1.0;
    }

    99.99% {
        opacity: 0.0;
    }

    100% {
        opacity: 0.0;
    }
}

/* Vignette
  ---------------------------------------------- */
.vignette {
    background: radial-gradient(transparent 60%, rgb(1, 14, 39) 130%);
    background-size: cover;
    height: 100%;
    z-index: 9;
    position: absolute;
    width: 100%;
    pointer-events: none;
}

/* Stars
  ---------------------------------------------- */
.stars {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    overflow: hidden;
}

.starWrap {
    width: 100%;
    height: 60%;
    position: relative;
}

.starProject {
    overflow: hidden;
}

.starReflect {
    overflow: hidden;
    height: 40%;
    opacity: 0.9;
    top: 1%;
}

#stars {
    position: absolute;
    width: 120%;
    border-radius: 100%;
    margin: auto;
    left: -10%;
    right: 0;
    animation: stars 120s linear infinite;
    transform: rotate(0deg);
    top: -35%;
}

@keyframes stars {
    100% {
        transform: rotate(-360deg);
    }
}

#starReflection {
    position: absolute;
    width: 120%;
    border-radius: 100%;
    margin: auto;
    left: -10%;
    right: 0;
    animation: starsReflect 120s linear infinite;
    transform: rotate(0deg);
    top: initial;
    bottom: -102%;
}

@keyframes starsReflect {
    100% {
        transform: rotate(360deg);
    }
}

/* Sprites 
  ----------------------------------------------- */
.spriteWrap {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 13;
    animation: sprites 60s linear infinite;
    pointer-events: none;
}

@keyframes sprites {
    0% {
        opacity: 0.8;
    }

    20% {
        opacity: 0.8;
    }

    25% {
        opacity: 0.0;
    }

    73% {
        opacity: 0.0;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.8;
    }
}

#sprites {
    height: 100%;
    width: 100%;
}

/* Controls
  ---------------------------------------------- */
.controls {
    position: absolute;
    top: 0px;
    width 20%;
    z-index: 10;
    background: rgba(0, 0, 0, 0.16);
    height: 100%;
    width: 380px;
    padding: 23px;
    transform: translate3d(-250px, 0px, 0px);
    -moz-transform: translate3d(-250px, 0px, 0px);
    -o-transform: translate3d(-250px, 0px, 0px);
    -ms-transform: translate3d(-250px, 0px, 0px);
    transform: translate3d(-250px, 0px, 0px);
    opacity: 0;
}

    .controls, .controls * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        transition: all 0.25s ease;
        -moz-transition: all 0.25s ease;
        -o-transition: all 0.25s ease;
        transition: all 0.25s ease;
    }

        .controls:hover {
            transform: translate3d(0px, 0px, 0px);
            -moz-transform: translate3d(0px, 0px, 0px);
            -o-transform: translate3d(0px, 0px, 0px);
            -ms-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
            opacity: 1.0;
        }

        .controls ul {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

            .controls ul li {
                border-bottom: 1px solid rgba(255, 255, 255, 0.09);
                color: white;
            }

                .controls ul li span.title {
                    display: inline-block;
                    padding: 10px 0px;
                }

                .controls ul li a {
                    display: block;
                    padding: 10px 0px;
                }

                    .controls ul li a:hover {
                        padding-left: 10px;
                    }

                    .controls ul li a.active {
                    }

                        .controls ul li a.active:after {
                            content: 'on';
                            float: right;
                        }

        .controls audio {
            width: 100%;
            opacity: 0.2;
            position: relative;
            width: 80%;
            display: inline-block;
            top: 8px;
            float: right;
        }

            .controls audio:hover {
                opacity: 1.0;
            }

.noise {
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0.03;
    z-index: 9;
    position: absolute;
    top: 0;
    pointer-events: none;
}

    .noise.active {
        background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21555/static2.gif);
        opacity: 0.015;
        background-size: 620px;
    }

.counter {
    color: rgba(255, 255, 255, 0.12);
    position: absolute;
    width: calc(100% - 46px);
    bottom: 21px;
    text-align: justify;
    font-size: 0px;
}

    .counter:before {
        content: ':';
        display: inline-block;
        position: absolute;
        animation-name: timer;
        background: rgba(255, 255, 255, 0.03);
        text-align: right;
        left: 0px;
        bottom: 0px;
        color: transparent;
        border-right: 1px solid rgba(255, 255, 255, 0.13);
        line-height: 34px;
    }

@keyframes timer {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* Landscape
  ---------------------------------------------- */
#landscape {
    width: 100.02%;
    position: absolute;
    bottom: 11%;
    z-index: 5;
    animation-name: focus;
}

@keyframes focus {
    0% {
        filter: blur(5px);
    }

    16% {
        filter: blur(2px);
    }

    20% {
        filter: blur(0px);
    }

    80% {
        filter: blur(0px);
    }

    88% {
        filter: blur(2px);
    }

    100% {
        filter: blur(5px);
    }
}

#bottom {
    animation-name: bottomFill;
    height: 100%;
    position: absolute;
    top: 88%;
    width: 100%;
    z-index: 5;
    animation-delay: 1s;
}

@keyframes bottomFill {
    0% {
        background: #0D141E;
    }

    4% {
        background: #101522;
    }

    8% {
        background: #121726;
    }

    12% {
        background: #141829;
    }

    16% {
        background: #1C1E3C;
    }

    20% {
        background: #22214F;
    }

    24% {
        background: #262262;
    }

    28% {
        background: #1D4065;
    }

    32% {
        background: #125768;
    }

    36% {
        background: #1E4553;
    }

    40% {
        background: #1E404E;
    }

    44% {
        background: #1E3B49;
    }

    48% {
        background: #1D3643;
    }

    52% {
        background: #1C313E;
    }

    56% {
        background: #1C3344;
    }

    60% {
        background: #1C3449;
    }

    64% {
        background: #1B344F;
    }

    68% {
        background: #183454;
    }

    72% {
        background: #242B4A;
    }

    76% {
        background: #2B2241;
    }

    80% {
        background: #24203C;
    }

    84% {
        background: #1D1D37;
    }

    88% {
        background: #151A32;
    }

    92% {
        background: #14192C;
    }

    96% {
        background: #111725;
    }

    100% {
        background: #0D141E;
    }
}

/* Land - layer 1 animation */
#landscape .layer1 {
    fill: #F1F2F2;
    animation-name: layer1;
    animation-delay: 1s;
}

@keyframes layer1 {
    0% {
        fill: #244154;
    }

    4% {
        fill: #344358;
    }

    8% {
        fill: #42465D;
    }

    12% {
        fill: #4F4761;
    }

    16% {
        fill: #7E5773;
    }

    20% {
        fill: #A3517F;
    }

    24% {
        fill: #F3829F;
    }

    28% {
        fill: #D4B2AF;
    }

    32% {
        fill: #AEDABB;
    }

    36% {
        fill: #A1D6D6;
    }

    40% {
        fill: #9ED5DD;
    }

    44% {
        fill: #9AD4E4;
    }

    48% {
        fill: #97D3EA;
    }

    52% {
        fill: #92D3F4;
    }

    56% {
        fill: #95C8DA;
    }

    60% {
        fill: #96BDC5;
    }

    64% {
        fill: #96B3B2;
    }

    68% {
        fill: #96AA9E;
    }

    72% {
        fill: #AF866A;
    }

    76% {
        fill: #C0633B;
    }

    80% {
        fill: #9D5E51;
    }

    84% {
        fill: #7B5960;
    }

    88% {
        fill: #59546D;
    }

    92% {
        fill: #484E64;
    }

    96% {
        fill: #37475C;
    }

    100% {
        fill: #244154;
    }
}

/* Land - layer 2 animation */
#landscape .layer2 {
    fill: #E6E7E8;
    animation-name: layer2;
    animation-delay: 1s;
}

@keyframes layer2 {
    0% {
        fill: #0F2B46;
    }

    4% {
        fill: #1C2D4A;
    }

    8% {
        fill: #272E4E;
    }

    12% {
        fill: #302F52;
    }

    16% {
        fill: #663966;
    }

    20% {
        fill: #913776;
    }

    24% {
        fill: #D94A93;
    }

    28% {
        fill: #BB94AD;
    }

    32% {
        fill: #76CCCE;
    }

    36% {
        fill: #6BAEC9;
    }

    40% {
        fill: #62A7CA;
    }

    44% {
        fill: #59A0CB;
    }

    48% {
        fill: #5099CC;
    }

    52% {
        fill: #4692CF;
    }

    56% {
        fill: #4D8FBD;
    }

    60% {
        fill: #518CAF;
    }

    64% {
        fill: #548AA1;
    }

    68% {
        fill: #578793;
    }

    72% {
        fill: #7E6768;
    }

    76% {
        fill: #8F4244;
    }

    80% {
        fill: #74404D;
    }

    84% {
        fill: #593D55;
    }

    88% {
        fill: #393B5D;
    }

    92% {
        fill: #2C3655;
    }

    96% {
        fill: #1F304E;
    }

    100% {
        fill: #0F2B46;
    }
}

/* Land - layer 3 animation */
#landscape .layer3 {
    fill: #D1D3D4;
    animation-name: layer3;
    animation-delay: 1s;
}

@keyframes layer3 {
    0% {
        fill: #0F2944;
    }

    4% {
        fill: #1B2B47;
    }

    8% {
        fill: #252C4B;
    }

    12% {
        fill: #2E2D4E;
    }

    16% {
        fill: #5F3663;
    }

    20% {
        fill: #863572;
    }

    24% {
        fill: #C8458D;
    }

    28% {
        fill: #A48BAB;
    }

    32% {
        fill: #68BFC7;
    }

    36% {
        fill: #54A4C8;
    }

    40% {
        fill: #4F9EC8;
    }

    44% {
        fill: #4B98C7;
    }

    48% {
        fill: #4691C7;
    }

    52% {
        fill: #408BC8;
    }

    56% {
        fill: #4688B7;
    }

    60% {
        fill: #4984A9;
    }

    64% {
        fill: #4C819C;
    }

    68% {
        fill: #4E7E8F;
    }

    72% {
        fill: #776167;
    }

    76% {
        fill: #893E45;
    }

    80% {
        fill: #6F3C4C;
    }

    84% {
        fill: #543A52;
    }

    88% {
        fill: #353758;
    }

    92% {
        fill: #2A3351;
    }

    96% {
        fill: #1E2E4A;
    }

    100% {
        fill: #0F2944;
    }
}

/* Land - layer 4 animation */
#landscape .layer4 {
    fill: #BCBEC0;
    animation-name: layer4;
    animation-delay: 1s;
}

@keyframes layer4 {
    0% {
        fill: #0F2841;
    }

    4% {
        fill: #1A2945;
    }

    8% {
        fill: #232A48;
    }

    12% {
        fill: #2B2A4B;
    }

    16% {
        fill: #59335F;
    }

    20% {
        fill: #7C336D;
    }

    24% {
        fill: #B84089;
    }

    28% {
        fill: #9683A5;
    }

    32% {
        fill: #57B5C1;
    }

    36% {
        fill: #4798BD;
    }

    40% {
        fill: #4391BC;
    }

    44% {
        fill: #408BBB;
    }

    48% {
        fill: #3D85BA;
    }

    52% {
        fill: #397FBA;
    }

    56% {
        fill: #3E7DAC;
    }

    60% {
        fill: #407AA1;
    }

    64% {
        fill: #427896;
    }

    68% {
        fill: #44768B;
    }

    72% {
        fill: #705B66;
    }

    76% {
        fill: #823B46;
    }

    80% {
        fill: #69394B;
    }

    84% {
        fill: #503650;
    }

    88% {
        fill: #323454;
    }

    92% {
        fill: #27304D;
    }

    96% {
        fill: #1C2C47;
    }

    100% {
        fill: #0F2841;
    }
}

/* Land - layer 5 animation */
#landscape .layer5 {
    fill: #A7A9AC;
    animation-name: layer5;
    animation-delay: 1s;
}

@keyframes layer5 {
    0% {
        fill: #0E263F;
    }

    4% {
        fill: #192742;
    }

    8% {
        fill: #212745;
    }

    12% {
        fill: #292848;
    }

    16% {
        fill: #51305B;
    }

    20% {
        fill: #6E3068;
    }

    24% {
        fill: #A23B82;
    }

    28% {
        fill: #84799F;
    }

    32% {
        fill: #44AABC;
    }

    36% {
        fill: #3A8DB3;
    }

    40% {
        fill: #3887B1;
    }

    44% {
        fill: #3680AF;
    }

    48% {
        fill: #347AAD;
    }

    52% {
        fill: #3273AB;
    }

    56% {
        fill: #3672A1;
    }

    60% {
        fill: #387198;
    }

    64% {
        fill: #396F90;
    }

    68% {
        fill: #3A6E87;
    }

    72% {
        fill: #695565;
    }

    76% {
        fill: #7C3747;
    }

    80% {
        fill: #64354A;
    }

    84% {
        fill: #4B334D;
    }

    88% {
        fill: #2E314F;
    }

    92% {
        fill: #252D4A;
    }

    96% {
        fill: #1B2A44;
    }

    100% {
        fill: #0E263F;
    }
}

/* Land - layer 6 animation */
#landscape .layer6 {
    fill: #939598;
    animation-name: layer6;
    animation-delay: 1s;
}

@keyframes layer6 {
    0% {
        fill: #0E243C;
    }

    4% {
        fill: #18253F;
    }

    8% {
        fill: #202542;
    }

    12% {
        fill: #262544;
    }

    16% {
        fill: #482C56;
    }

    20% {
        fill: #612D63;
    }

    24% {
        fill: #8D357C;
    }

    28% {
        fill: #6F719B;
    }

    32% {
        fill: #00A1BC;
    }

    36% {
        fill: #2583A8;
    }

    40% {
        fill: #287CA3;
    }

    44% {
        fill: #2A759F;
    }

    48% {
        fill: #2D6F9A;
    }

    52% {
        fill: #2E6895;
    }

    56% {
        fill: #2F6891;
    }

    60% {
        fill: #30678D;
    }

    64% {
        fill: #306788;
    }

    68% {
        fill: #306683;
    }

    72% {
        fill: #625064;
    }

    76% {
        fill: #753347;
    }

    80% {
        fill: #5E3249;
    }

    84% {
        fill: #47304A;
    }

    88% {
        fill: #2B2E4B;
    }

    92% {
        fill: #222A46;
    }

    96% {
        fill: #192741;
    }

    100% {
        fill: #0E243C;
    }
}

/* Land - layer 7 animation */
#landscape .layer7 {
    fill: #808285;
    animation-name: layer7;
    animation-delay: 1s;
}

@keyframes layer7 {
    0% {
        fill: #102237;
    }

    4% {
        fill: #18223A;
    }

    8% {
        fill: #1E233D;
    }

    12% {
        fill: #242340;
    }

    16% {
        fill: #402952;
    }

    20% {
        fill: #542A5E;
    }

    24% {
        fill: #793177;
    }

    28% {
        fill: #5F668F;
    }

    32% {
        fill: #0A8FA7;
    }

    36% {
        fill: #237595;
    }

    40% {
        fill: #256F90;
    }

    44% {
        fill: #27698C;
    }

    48% {
        fill: #286387;
    }

    52% {
        fill: #285D82;
    }

    56% {
        fill: #285E82;
    }

    60% {
        fill: #285F81;
    }

    64% {
        fill: #275F81;
    }

    68% {
        fill: #255F7F;
    }

    72% {
        fill: #574A63;
    }

    76% {
        fill: #683148;
    }

    80% {
        fill: #542F48;
    }

    84% {
        fill: #3F2D47;
    }

    88% {
        fill: #242742;
    }

    92% {
        fill: #202841;
    }

    96% {
        fill: #19253C;
    }

    100% {
        fill: #102237;
    }
}

/* Land - layer 8 animation */
#landscape .layer8 {
    fill: #6D6E71;
    animation-name: layer8;
    animation-delay: 1s;
}

@keyframes layer8 {
    0% {
        fill: #111F31;
    }

    4% {
        fill: #172034;
    }

    8% {
        fill: #1C2037;
    }

    12% {
        fill: #20213B;
    }

    16% {
        fill: #37274C;
    }

    20% {
        fill: #472759;
    }

    24% {
        fill: #662C71;
    }

    28% {
        fill: #4F5C83;
    }

    32% {
        fill: #118095;
    }

    36% {
        fill: #206983;
    }

    40% {
        fill: #21637E;
    }

    44% {
        fill: #225D7A;
    }

    48% {
        fill: #225775;
    }

    52% {
        fill: #225270;
    }

    56% {
        fill: #235372;
    }

    60% {
        fill: #235574;
    }

    64% {
        fill: #235675;
    }

    68% {
        fill: #235676;
    }

    72% {
        fill: #4C445F;
    }

    76% {
        fill: #5B2F49;
    }

    80% {
        fill: #4A2C47;
    }

    84% {
        fill: #382A44;
    }

    88% {
        fill: #242742;
    }

    92% {
        fill: #1E253D;
    }

    96% {
        fill: #182338;
    }

    100% {
        fill: #111F31;
    }
}

/* Land - layer 9 animation */
#landscape .layer9 {
    fill: #58595B;
    animation-name: layer9;
    animation-delay: 1s;
}

@keyframes layer9 {
    0% {
        fill: #111C2B;
    }

    4% {
        fill: #151D2E;
    }

    8% {
        fill: #191E32;
    }

    12% {
        fill: #1D1E35;
    }

    16% {
        fill: #2F2447;
    }

    20% {
        fill: #3A2454;
    }

    24% {
        fill: #52296C;
    }

    28% {
        fill: #405279;
    }

    32% {
        fill: #137185;
    }

    36% {
        fill: #1C5C72;
    }

    40% {
        fill: #1C576E;
    }

    44% {
        fill: #1C5269;
    }

    48% {
        fill: #1B4C64;
    }

    52% {
        fill: #1A475F;
    }

    56% {
        fill: #1C4A63;
    }

    60% {
        fill: #1E4B67;
    }

    64% {
        fill: #1F4D6A;
    }

    68% {
        fill: #204E6D;
    }

    72% {
        fill: #413E5A;
    }

    76% {
        fill: #4E2D49;
    }

    80% {
        fill: #402A45;
    }

    84% {
        fill: #312742;
    }

    88% {
        fill: #20243E;
    }

    92% {
        fill: #1B2238;
    }

    96% {
        fill: #171F32;
    }

    100% {
        fill: #111C2B;
    }
}

/* Land - layer 10 animation */
#landscape .layer10 {
    fill: #414042;
    animation-name: layer10;
    animation-delay: 1s;
}

@keyframes layer10 {
    0% {
        fill: #101825;
    }

    4% {
        fill: #131928;
    }

    8% {
        fill: #161A2C;
    }

    12% {
        fill: #181B2F;
    }

    16% {
        fill: #262141;
    }

    20% {
        fill: #2C214F;
    }

    24% {
        fill: #3D2567;
    }

    28% {
        fill: #30486F;
    }

    32% {
        fill: #136476;
    }

    36% {
        fill: #165163;
    }

    40% {
        fill: #154C5E;
    }

    44% {
        fill: #144759;
    }

    48% {
        fill: #134254;
    }

    52% {
        fill: #113D4F;
    }

    56% {
        fill: #154055;
    }

    60% {
        fill: #19425A;
    }

    64% {
        fill: #1B445F;
    }

    68% {
        fill: #1E4564;
    }

    72% {
        fill: #363856;
    }

    76% {
        fill: #412A49;
    }

    80% {
        fill: #352744;
    }

    84% {
        fill: #29243F;
    }

    88% {
        fill: #1C203A;
    }

    92% {
        fill: #191F33;
    }

    96% {
        fill: #151C2C;
    }

    100% {
        fill: #101825;
    }
}

/* Land - layer 11 animation */
#landscape .layer11 {
    fill: #232323;
    animation-name: layer11;
    animation-delay: 1s;
}

@keyframes layer11 {
    0% {
        fill: #0D141E;
        transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    4% {
        fill: #101522;
        transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
    }

    8% {
        fill: #121726;
        transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    12% {
        fill: #141829;
        transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
    }

    16% {
        fill: #1C1E3C;
        transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    20% {
        fill: #22214F;
        transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
    }

    24% {
        fill: #262262;
        transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    28% {
        fill: #1D4065;
        transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
    }

    32% {
        fill: #125768;
        transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    36% {
        fill: #1E4553;
        transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
    }

    40% {
        fill: #1E404E;
        transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    44% {
        fill: #1E3B49;
        transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
    }

    48% {
        fill: #1D3643;
        transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    52% {
        fill: #1C313E;
        transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
    }

    56% {
        fill: #1C3344;
        transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    60% {
        fill: #1C3449;
        transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
    }

    64% {
        fill: #1B344F;
        transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    68% {
        fill: #183454;
        transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
    }

    72% {
        fill: #242B4A;
        transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    76% {
        fill: #2B2241;
        transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
    }

    80% {
        fill: #24203C;
        transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
    }

    84% {
        fill: #1D1D37;
    }

    88% {
        fill: #151A32;
    }

    92% {
        fill: #14192C;
    }

    96% {
        fill: #111725;
    }

    100% {
        fill: #0D141E;
    }
}

/* Aspect ratio media queries
  ---------------------------------------------- */

/* 3/2 and 6/1 -- out of range*/
@media screen and (min-aspect-ratio: 3/1) and (max-aspect-ratio: 6/1) {
    /*     
    body {
        background: rgb(31, 60, 80);
    }

        body:before {
            content: 'Aspect ratio out of range - too wide';
            color: white;
            text-align: center;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 50%;
        }

    #sky, #reflection, #sunMask, #landscape, #bottom, #stag, .controls, .stars, .sunMask, .clouds, .lighting, .vignette, .twinkleWrap, .spriteWrap {
       display: none;
    }
    */
}

/* 14/5 and 3/1 */
@media screen and (min-aspect-ratio: 14/5) and (max-aspect-ratio: 7/2) {
    .twinkles {
    }

    #reflection, #sunMask {
        height: 42%;
    }

    #landscape {
        bottom: -3%;
    }

    #bottom {
        top: 101%;
    }

    #stag {
        bottom: 3%;
    }

    .sun {
        top: -570%;
    }

    .twinkles {
        top: 77%;
    }
}
/* 5/2 and 14/5 */
@media screen and (min-aspect-ratio: 5/2) and (max-aspect-ratio: 14/5) {
    .twinkles {
        top: 75%;
    }

    #reflection, #sunMask {
    }

    #landscape {
        bottom: 1%;
    }

    #bottom {
        top: 98%;
    }

    #stag {
        bottom: 7%;
    }

    .sun {
        top: -532%;
    }
}
/* 9/4 and 5/2 */
@media screen and (min-aspect-ratio: 9/4) and (max-aspect-ratio: 5/2) {
    .twinkles {
        top: 75%;
    }

    #reflection, #sunMask {
        height: 40%;
    }

    #landscape {
        bottom: 5%;
    }

    #bottom {
        top: 94%;
    }

    #stag {
        bottom: 10%;
    }

    .sun {
        top: -452%;
    }
}
/* 11/5 and 9/4 */
@media screen and (min-aspect-ratio: 11/5) and (max-aspect-ratio: 9/4) {
    .twinkles {
    }

    #reflection, #sunMask {
    }

    #landscape {
        bottom: 6%;
    }

    #bottom {
        top: 93%;
    }

    #stag {
        bottom: 11%;
    }

    .sun {
        top: -410%;
    }
}
/* 13/6 and 11/5 */
@media screen and (min-aspect-ratio: 13/6) and (max-aspect-ratio: 11/5) {
    .twinkles {
    }

    #reflection, #sunMask {
        height: 37%;
    }

    #landscape {
        bottom: 6%;
    }

    #bottom {
        top: 93%;
    }

    #stag {
        bottom: 11%;
    }

    .sun {
    }
}

/* 15/7 and 13/6 */
@media screen and (min-aspect-ratio: 15/7) and (max-aspect-ratio: 13/6) {
    .twinkles {
    }

    #reflection, #sunMask {
        height: 31%;
    }

    #landscape {
        bottom: 7%;
    }

    #bottom {
        top: 92%;
    }

    #stag {
        bottom: 12%;
    }

    .sun {
    }
}

/* 2/1 and 15/7 */
@media screen and (min-aspect-ratio: 2/1) and (max-aspect-ratio: 15/7) {
    .twinkles {
    }

    #reflection, #sunMask {
        height: 31%;
    }

    #landscape {
        bottom: 8%;
    }

    #bottom {
        top: 91%;
    }

    #stag {
        bottom: 12%;
    }

    .sun {
        top: -370%;
    }
}

@media screen and (min-aspect-ratio: 15/8) and (max-aspect-ratio: 2/1) {
    .twinkles {
    }

    #reflection, #sunMask {
        height: 30%;
    }

    #landscape {
    }

    #bottom {
    }

    #stag {
        bottom: 15%;
    }

    .sun {
    }
}

/* 7/4 and 15/8 */
@media screen and (min-aspect-ratio: 7/4) and (max-aspect-ratio: 15/8) {
    .twinkles {
        top: 71%;
    }

    #reflection, #sunMask {
        height: 28%;
    }

    #landscape {
        bottom: 13%;
    }

    #bottom {
        top: 86%;
    }

    #stag {
        bottom: 17%;
    }

    .sun {
        top: -300%;
    }
}
/* 11/7 and 7/4 */
@media screen and (min-aspect-ratio: 11/7) and (max-aspect-ratio: 7/4) {
    .twinkles {
        top: 69%;
    }

    #reflection, #sunMask {
        height: 24%;
    }

    #landscape {
        bottom: 16%;
    }

    #bottom {
        top: 83%;
    }

    #stag {
        bottom: 20%;
    }

    .sun {
        top: -270%;
    }
}
/* 13/9 and 11/7 */
@media screen and (min-aspect-ratio: 13/9) and (max-aspect-ratio: 11/7) {
    .twinkles {
        top: 68%;
    }

    #reflection, #sunMask {
        height: 22%;
    }

    #landscape {
        bottom: 18%;
    }

    #bottom {
        top: 81%;
    }

    #stag {
        bottom: 21.6%;
    }

    .sun {
        top: -240%;
    }
}
/* 4/3 and 13/9 */
@media screen and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 13/9) {
    .twinkles {
        top: 66%;
    }

    #reflection, #sunMask {
        height: 19%;
    }

    #landscape {
        bottom: 22%;
    }

    #bottom {
        top: 77%;
    }

    #stag {
        bottom: 25%;
    }

    .sun {
        top: -230%;
    }
}
/* 8/7 and 4/3 */
@media screen and (min-aspect-ratio: 8/7) and (max-aspect-ratio: 4/3) {
    .twinkles {
        top: 65%;
    }

    #reflection, #sunMask {
        height: 18%;
    }

    #landscape {
        bottom: 23%;
    }

    #bottom {
        top: 76%;
    }

    #stag {
        bottom: 25.3%;
    }

    .sun {
        top: -180%;
    }
}
/* 14/15 and 8/7 */
@media screen and (min-aspect-ratio: 14/15) and (max-aspect-ratio: 8/7) {
    .twinkles {
        top: 63%;
        width: 3%;
    }

    #reflection, #sunMask {
        height: 17%;
    }

    #landscape {
        bottom: 26%;
    }

    #bottom {
        top: 73.8%;
    }

    #stag {
        bottom: 28.3%;
    }

    .sun {
        top: -140%;
    }
}
/* 5/6 and 14/15 */
@media screen and (min-aspect-ratio: 5/6) and (max-aspect-ratio: 14/15) {
    .twinkles {
        top: 63%;
        width: 3%;
    }

    #reflection, #sunMask {
        height: 13%;
    }

    #landscape {
        bottom: 28%;
    }

    #bottom {
        top: 71.5%;
    }

    #stag {
        bottom: 30%;
    }

    .sun {
        top: -110%;
    }
}
/* 7/10 and 5/6 */
@media screen and (min-aspect-ratio: 7/10) and (max-aspect-ratio: 5/6) {
    .twinkles {
        top: 62%;
        width: 3%;
    }

    #reflection, #sunMask {
        height: 11%;
    }

    #landscape {
        bottom: 30%;
    }

    #bottom {
        top: 69.6%;
    }

    #stag {
        bottom: 31.8%;
    }

    .sun {
        top: -70%;
    }
}
/* 5/9 and 7/10 */
@media screen and (min-aspect-ratio: 5/9) and (max-aspect-ratio: 7/10) {
    .twinkles {
        top: 62%;
        width: 3%;
    }

    #reflection, #sunMask {
        height: 8%;
    }

    #landscape {
        bottom: 32%;
    }

    #bottom {
        top: 67.5%;
    }

    #stag {
        bottom: 33.5%;
    }

    .sun {
        top: -55%;
    }
}

/* 1/10 and 5/9 --- out of range*/
@media screen and (min-aspect-ratio: 1/10) and (max-aspect-ratio: 5/9) {
    /*
    body {
        background: rgb(31, 60, 80);
    }

        body:before {
            content: 'Aspect ratio out of range - too narrow';
            color: white;
            text-align: center;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 50%;
        }

    #sky, #reflection, #sunMask, #landscape, #bottom, #stag, .controls, .stars, .sunMask, .clouds, .lighting, .vignette, .twinkleWrap, .spriteWrap {
        display: none;
    }
    */
}