/*I hate that I even have to do this*/ .preGame {text-align: center; padding: 8%; } .preGame .option {float: none; text-align: center; margin: 5% 37%; } .initialMobile {max-width: 900px !important; width: 98% !important; } .tooSmall {display: none; } @media only screen and (max-width: 180px) {#stage, #materialBox {display:none; } .tooSmall {display: inline-block; } #outterStage, #stage, #container {width: 98%; } } @media only screen and (max-width: 500px) {.initialMobile {font-size: 8px; } .preGame .option {margin: 5% 0%; } } /*pink in mountain #eb0ab9 */ /* Your local CSS File */ @font-face {font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; src:url(../fonts/PressStart2P-Regular.ttf) format('truetype'); } * {margin: 0; padding: 0; font-family: 'Press Start 2P', normal; line-height: 1.5; color: #fff; } body {background: #000;margin-top:300px;cursor:none; } #materialBox {width: 40px; height: 250px; margin: 0 auto; margin-left: -41px; border:5px solid #fff; text-align: center; } #materialBox>div {display:inline-block; width: 40px; height: 30px; } #materialBox>div>div {margin: 0 auto; } .centerText {text-align: center; width: 100%; } #container {width:910px; height: 600px; padding-top:10px; position:relative; background: #000; margin: 20px auto; display: block; } #grid {position:absolute; top: 0px; left: 0px; z-index: 10000000; } #grid div {width: 100px; height: 100px; border-right:1px dotted black; border-bottom:1px dotted black; float: left; } #mainContent {padding: 40px 30px 30px 30px; } #mainContent h1 {text-align: -9999px; height: 0; overflow: hidden; margin: 0; } #content {margin-right: 250px; } .panel {margin-bottom: 2em; display: none; } .option {width: 198px; padding-left: 12px; float:left; margin-right: -2px; margin-bottom: -2px; border-bottom: 2px solid #000; border-right: 2px solid #000; } .longOption {width: 400px; margin-right: 5px; margin-right: -2px; margin-bottom: -2px; border-bottom: 2px solid #000; border-right: 2px solid #000; } /*pure css two lines of options ONLY if there are the correct amount of options*/ /* more info*/ /* https://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has*/ .option:first-child:nth-last-child(8), .option:first-child:nth-last-child(8) ~ .option {width: 420px; margin-right: 5px; } .option:first-child:nth-last-child(8) ~ .option:nth-child(n+5) {position: absolute; right: 0px; bottom:7px; } .option:first-child:nth-last-child(8) ~ .option:nth-child(7) {bottom:33px; } .option:first-child:nth-last-child(8) ~ .option:nth-child(6) {bottom:58px; } .option:first-child:nth-last-child(8) ~ .option:nth-child(5) {bottom:83px; } /*if 9 items*/ .option:first-child:nth-last-child(9), .option:first-child:nth-last-child(9) ~ .option {width: 420px; margin-right: 5px; } .option:first-child:nth-last-child(9) ~ .option:nth-child(n+6) {position: absolute; right: 0px; bottom:33px; } .option:first-child:nth-last-child(9) ~ .option:nth-child(8) {bottom:58px; } .option:first-child:nth-last-child(9) ~ .option:nth-child(7) {bottom:83px; } .option:first-child:nth-last-child(9) ~ .option:nth-child(6) {bottom:108px; } /* if 10 items*/ .option:first-child:nth-last-child(10), .option:first-child:nth-last-child(10) ~ .option {width: 420px; margin-right: 5px; } .option:first-child:nth-last-child(10) ~ .option:nth-child(n+6) {position: absolute; right: 0px; bottom:7px; } .option:first-child:nth-last-child(10) ~ .option:nth-child(9) {bottom:33px; } .option:first-child:nth-last-child(10) ~ .option:nth-child(8) {bottom:58px; } .option:first-child:nth-last-child(10) ~ .option:nth-child(7) {bottom:83px; } .option:first-child:nth-last-child(10) ~ .option:nth-child(6) {bottom:108px; } .selected {background: #fff; color: #000; margin-right: -2px; margin-bottom: -2px; border-bottom: 2px solid grey; border-right: 2px solid grey; } #textBox {position: relative; top: 0px; margin: 0 auto; width: 910px; } #textAreaBox {width: 850px; position: relative; display: inline-block; z-index: 100; height: 137px; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; } #textArea {font-size: 10px; border:5px solid #fff; margin-top: 3px; color: #fff; padding: 10px; width: 850px; min-height: 90px; position: absolute; bottom: 0px; left: 0px; background: #000; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; } #textAreaBox span {position: relative; top: -110px; } #scoreBox {color: #fff; width: 780px; min-height: 150px; display: inline-block; } #scoreBox div {border:5px solid #fff; width: 10px; height: 10px; margin: 3px; padding: 20px; display: inline-block; } #time {display: inline-block; position: absolute; right: -40px; top: -16px; } #time div {border:5px solid #fff; width: 10px; height: 10px; margin: 3px; padding: 20px; } #outterStage {position: absolute; top: 0px; left: 0px; z-index: 100; width: 900px; height: 600px; } #stage {position: absolute; top: 0px; left: 0px; z-index: 100; width: 900px; height: 600px; overflow: hidden; border: 5px solid #fff; background: transparent url(../images/night.gif) 0 0 repeat-x; /*background: transparent url(../images/alltheThings.gif) 0 0 repeat-x;*/ } .stage {position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; min-width: 900px; height: 600px; z-index: 150; } .sky {position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; min-width: 900px; height: 600px; z-index: 50; } .scene, .stage {opacity: 0; } #bg {background: transparent url(../images/sky.gif) 0 0 repeat-x; animation: daynight 150s linear infinite; z-index: -2; } #backRight{background: transparent url(../images/backRight.png) 0 249px repeat-x;} #theEdge{background: transparent url(../images/theEdge.png) 0 249px repeat-x;} #hill{background: transparent url(../images/hill.png) 0 249px repeat-x;} #hillFour{background: transparent url(../images/hillFour.png) 0 249px repeat-x;} #hillFive{background: transparent url(../images/hillFive.png) 0 249px repeat-x;} #mountainFour{background: transparent url(../images/mountainFour.png) 0 249px repeat-x;z-index:1010;} #mountainFive{background: transparent url(../images/mountainFive.png) 0 249px repeat-x;z-index:1010;} #exploreRightFlooded{background: transparent url(../images/blackSquares.png) 0 249px repeat-x;} #exploreRightFlooded{display: none;} #sun {background: transparent url(../images/sun3.png) 480px 450px no-repeat; z-index: 100; } .sunArc {animation: drawArc 200s linear infinite; } #stars {background: transparent url(../images/stars.gif) 0px 0px no-repeat; animation: drawArc2 200s linear 100s infinite, opacity0to0 200s linear 100s infinite; opacity:0; z-index: 120; } .brokenSun {animation: drawArc 8s infinite alternate cubic-bezier(0.1, 0.7, 1.0, 0.1);; transition-timing-function: } #stars.brokenStars {animation: none; opacity: 1; animation: drawArc2 8s infinite alternate cubic-bezier(0.1, 0.7, 1.0, 0.1) 8s; transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); } #lake{position: absolute; background: transparent url(../images/lake.gif) 0px 0px; width: 345px; height: 183px; z-index:998; top: 290px; left: 425px; } #lakeTwo{position: absolute; background: transparent url(../images/lake.gif) 0px 0px; width: 345px; height: 183px; z-index:1000; top: 280px; left: -100px; } #justChip {position: absolute; background: transparent url(../images/justChip.gif) 0px 0px no-repeat; width: 179px; height: 180px; top: 205px; left: 360px; animation: grow 150s linear; z-index: 1101; } #blackBack {width: 900px; height: 600px; position: absolute; background: #000; z-index: 1100; } #person{top: 360px; left: 175px; } #person.deadPerson, .deadPerson {position: absolute; z-index: 1000; background: transparent url(../images/deadPerson.gif) 0px 0px no-repeat !important; width: 90px; height: 26px; margin-top: 80px; } .deadHuman {position: absolute; z-index: 1000; background: transparent url(../images/deadHuman.gif) 0px 0px no-repeat !important; width: 90px; height: 26px; margin-top: 80px; } #person.deadPersonStarved, .deadPersonStarved {position: absolute; background: transparent url(../images/deadPersonStarved.gif) 0px 0px no-repeat !important; width: 90px; height: 26px; margin-top: 80px; } .people {background: transparent url(../images/peoplesprite.gif) 0px 0px no-repeat; position: absolute; top: 360px; left: 100px; width: 30px; height: 78px; z-index: 1001; } .otherPeople {background: transparent url(../images/peoplesprite.gif) 0px 0px no-repeat; position: absolute; top: 360px; left: 100px; width: 30px; height: 78px; z-index: 1001; } .otherPeopleChild {background: transparent url(../images/peoplesprite.gif) 0px 0px no-repeat; background-size: 80%; position: absolute; top: 360px; left: 100px; width: 24px; height: 62px; z-index: 1000; } .human{background: transparent url(../images/humans.gif) 0px 0px no-repeat; position: absolute; top: 360px; left: 500px; width: 30px; height: 78px; z-index: 1000; } .human.two {left: 600px; } .human.three {left: 620px; top: 400px; } .human.four {top: 500px; left: 400px; } .deadHuman {position: absolute; z-index: 1000; background: transparent url(../images/deadHuman.gif) 0px 0px no-repeat !important; width: 90px; height: 26px; margin-top: 80px; } #dogo{background: transparent url(../images/dogosprite.gif) 0px 0px no-repeat; position: absolute; top: 430px; left: 700px; width: 72px; height: 36px; z-index: 1000; } .dogo{background: transparent url(../images/dogosprite.gif) 0px 0px no-repeat; position: absolute; top: 430px; left: 700px; width: 72px; height: 36px; z-index: 1000; } .alien{background: transparent url(../images/aliens.gif) 0px 0px no-repeat; position: absolute; bottom: 230px; left: 200px; width: 88px; height: 146px; z-index: 998; } .hiddenDown {max-height: 0px; transition: max-height 15s; } .shownUp {max-height: 400px; } .deadAnimal {position:absolute; z-index: 200; width: 40px; height: 22px; background: transparent url(../images/deadAnimal.gif) 0px 0px no-repeat; } .deadAnimalScreen {position:absolute; z-index: 200; width: 40px; height: 22px; background: transparent url(../images/deadAnimal.gif) 0px 0px no-repeat; } .waterCrystal, .black {position:absolute; z-index: 2000; width: 40px; height: 22px; top: 445px; left:500px; } .black {top: 480px; left:460px; } .black:nth-of-type(2) {top: 495px; left:450px; } .black:nth-of-type(3) {top: 480px; left:500px; } .waterCrystal {background: #7985de; width: 20px; height: 20px; animation: crystal 5s linear infinite alternate; z-index: 1000; margin-left: 10px; } .waterCrystalScreen {background: #7985de; width: 20px; height: 20px; animation: crystal 5s linear infinite alternate; } .scoringCube {position: absolute; top:20px; left: -10px; -webkit-transition: all 5s; } .black {left: 576px; animation: crystalBlack 5s linear infinite alternate; border: 1px solid #fff; width: 20px; height: 20px; } .blackScreen {left: 576px; animation: crystalBlack 5s linear infinite alternate; border: 1px solid #fff; width: 20px; height: 20px; } #firstCube, #secondCube, #thirdCube {border: 10px green; position: absolute; left: 330px; top: 200px; perspective: 400px; z-index: 10000; -webkit-transition: left 4s; -o-transition: left 4s; transition: left 4s; } #firstCube {left: 0px; } #thirdCube {left: 800px; } .centeredCube {left: 325px !important; } .dCounters {opacity: 0; -webkit-transition: opacity 2s; -o-transition: opacity 2s; transition: opacity 2s; } #c .count, #d .count {margin-top: 31px; } #d .count {margin-left: 25px; } .Well {background: transparent url(../images/well.gif) 0px 0px no-repeat; position: absolute; top: 300px; left: 480px; width: 63px; height: 70px; z-index: 2000; } /*5150*/ .peopleOnBoat {background: transparent url(../images/peoplesprite.gif) 0px 0px no-repeat; position: relative; top:-30px; left: 20px; z-index: 1001; width: 31px; height: 78px; } .boatBox {animation: rocking 5s alternate ease-in-out infinite; width: 0px; left: 0px; z-index: 1100; position: absolute; left: 740px; top: 385px; width: 50px; height: 50px; transition: all 4s; } .boat {border-bottom-style: dotted; border-color: #d2979d; width: 50px; height: 50px; border-width: 2px; z-index:1000; transform: scale(0.7); transition: all 4s; } .boatBox.atShore {animation: none; left: 565px; top: 414px; } .boatBox.atShore .boat {transform: scale(1); } .scene5150.Well {background: transparent url(../images/well.gif) 0px 0px no-repeat; position: absolute; top: 440px; left: 500px; width: 63px; height: 70px; z-index: 200; } #makingBlack {position: absolute; top: 324px; left: 321px; z-index: 2000; } .tree {background: transparent url(../images/tree.gif) 0px 0px; position: absolute; bottom: 200px; left: 330px; width: 108px; height: 0px; z-index: 1000; overflow: hidden; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; } .tree.scene5147 {bottom:110px; left:380px; } .fullTree {height:141px !important; } .leaves {background: transparent url(../images/leaves.gif) 0px 0px no-repeat; position: absolute; top: 0px; left: 0px; width: 108px; height: 141px; z-index: 2000; } .fruit {background: transparent url(../images/fruit.gif) 0px 0px no-repeat; position: absolute; top: 5%; left: 10%; width: 12px; height: 12px; z-index: 2000; } .stone {width: 25px; height: 25px; background: transparent url('../images/stone.gif'); position: absolute; z-index: 1000; } .energon {position: absolute; width: 0px; height: 2000px; z-index: 500; animation: energonw 5s linear infinite alternate; transition: all 2s; padding:0px; } .waterCrystal {background: #7985de; width: 20px; height: 20px; animation: crystal 5s linear infinite alternate; left: 550px; top: 420px; position: absolute; z-index: 1000; } .sizedEnergon {margin: -10px; width: 20px; } .sizedEnergonTwo {height: 20px; } .energonOnScreen, .deadAnimalOnScreen, .waterCrystalOnScreen, .blackOnScreen {opacity: 0; } .energonScreen {width: 20px; height: 20px; animation: energonw 5s linear infinite alternate; transition: all 2s; } #hiddenShit {position: absolute; width: 0px; height: 0px; overflow: hidden; } /*PERSON THINGS*/ .goLeft {} #person.offScreen {left: -100px; } #thrownNet {background: transparent url(../images/net.gif) 0px 0px no-repeat; position: absolute; width: 63px; height: 70px; z-index: 2000; } .knockBack {animation: knockBack 1s linear 1; } .jumpDown {animation: jumpDown 20s linear 1; } @keyframes grow {/*0% { transform: rotate(-160deg) translateX(400px) rotate(160deg) ;}*/ /*100%{ transform: rotate(-30deg) translateX(560px) rotate(30deg); }*/ } @keyframes drawArc {0% { transform: rotate(-160deg) translateX(400px) rotate(160deg) ;} 50%{ transform: rotate(-30deg) translateX(560px) rotate(30deg); } 100%{ transform: rotate(-30deg) translateX(560px) rotate(30deg); } } @keyframes opacity0to0 {0% { opacity:0; } 25% { opacity:1; } 50% { opacity:0; } 100% { opacity:0; } } @keyframes glowing {0% { opacity:.7; } 25% { opacity:1; } 50% { opacity:.7; } 100% { opacity:1; } } @keyframes glowingLite {0% { opacity:.7; } 25% { opacity:.2; } 50% { opacity:.7; } 100% { opacity:.2; } } @keyframes drawArc2 {0% { transform: rotate(0deg) translateY(0px);} 25%{ transform: rotate(10deg) translateY(-150px);} 50%{ transform: rotate(20deg) translateY(-300px);} 100%{ transform: rotate(20deg) translateY(-300px);} } @keyframes daynight {0% {opacity: .5;} 25% {opacity: 1;} 75% {opacity: .5;} 100% {opacity: 0;} } @keyframes energonw {0%{background: #ffffff;} 50%{background: #ff00ff;} 100%{background: #ffffff;} } @keyframes crystal {0%{background: #7985de;} 50%{background: #662d91;} 100%{background: #7985de;} } @keyframes meat {0%{background: #030303;} 50%{background: #303030;} 100%{background: #030303;} } @keyframes crystalBlack {0%{background: #fff;} 50%{background: #000;} 100%{background: #fff;} } @keyframes knockBack {0% { transform: translateY(0px) translateX(0px); } 5% { transform: translateY(-10px) translateX(-30px); } 10%{ transform: translateY(-20px) translateX(-60px); } 15%{ transform: translateY(-30px) translateX(-90px); } 20%{ transform: translateY(-40px) translateX(-120px); } 25%{ transform: translateY(-50px) translateX(-150px); } 30% { transform: translateY(-60px) translateX(-180px); } 35% { transform: translateY(-70px) translateX(-210px); } 40% { transform: translateY(-80px) translateX(-240px); } 45% {transform: translateY(-40px) translateX(-270px); } 50% {transform: translateY(0px) translateX(-298px); } 75% {transform: translateY(-2px) translateX(-299px); } 100%{transform: translateY(0px) translateX(-300px); } } @keyframes jumpDown {/*left:766px; top:42px; start is*/ /* 496 - 122 is edge of cliff*/ /* 436 - 402 is landing*/ 0% { transform: translateY(0px) translateX(0px); } 4% { transform: translateY(80px) translateX(0px); } 10% { transform: translateY(80px) translateX(-270px); } 12% { transform: translateY(80px) translateX(-270px); } 13% { transform: translateY(70px) translateX(-310px); } 14% { transform: translateY(80px) translateX(-320px); } 16% { transform: translateY(359px) translateX(-320px); } 17% { transform: translateY(359px) translateX(-320px); } 30% { transform: translateY(359px) translateX(-518px); } 45% { transform: translateY(359px) translateX(-518px); } 60% { transform: translateY(359px) translateX(-900px); } 100% { transform: translateY(359px) translateX(-900px); } /*5% { transform: translateY(-10px) translateX(-10px); } 10%{ transform: translateY(0px) translateX(-15px); } 15%{ transform: translateY(10px) translateX(-15px); } 20%{ transform: translateY(20px) translateX(-15px); } 25%{ transform: translateY(40px) translateX(-15px); } 30% { transform: translateY(60px) translateX(-15px); } 35% { transform: translateY(70px) translateX(-15px); } 40% { transform: translateY(70px) translateX(-15px); } 45% {transform: translateY(70px) translateX(-15px); } 50% {transform: translateY(70px) translateX(-15px); }*/ /*100% {transform: translateY(30px) translateX(500px); }*/ } /*built options*/ #buildOptions {position: relative; text-align: center; height: 210px; } #cancelBuild {position: absolute; top: 180px; left: 127px; width: 200px; height: 30px; } #buildOptions div {display: inline-block; } #buildOptions .cube {width: 49%; margin-left: -5px; } .combineCubes {width: 100%; height: 30px; position: absolute; top: 180px; } #buildOptions .cubeBox {width: 100%; height: 40px; } .cubeBox .waterCrystal {left: 190px; top: 106px; } .cubeBox .black {left: 630px; top: 105px; } .less.option, .more.option {width: auto !important; top: 40px; } #buildOptions>div:first-child {width: 0px; height: 0px; } .less.option {position: absolute; left: 150px; right: auto !important; bottom: auto !important; } .more.option {position: absolute; left: 250px; right: auto !important; bottom: auto !important; } #buildOptions {margin-top: 20px; } .less.option.dogoTicker, .less.option.blackTicker {left: 580px; } .more.option.dogoTicker, .more.option.blackTicker {left: 690px; } .option.blackTicker, .option.waterTicker {top: 135px; } /* * scene 3 */ #flute {position:absolute; z-index: 200; background: transparent url(../images/flute.png) 0px 0px no-repeat; width: 14px; height: 21px; left: 400px; top: 530px; } /* * OVERLAY THINGER */ #overLay {position: absolute; width: 100%; height: 90px; background: pink; top: 600px; z-index: 10000; opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; text-align:center; font-size: 20px; padding-top: 20px; } #overLay h3 {font-size: 30px; } #overLay h2 {font-size: 40px; } #overLay h1 {font-size: 60px; } #curtain {background: #000; width: 900px; height: 600px; top: 0px; position: absolute; left: 0px; opacity: 0; z-index: 10000000; -webkit-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s; background-size: cover; } #curtain.compuLayer {background: #000 url(../images/white-noise.jpg) !important; } #curtainWhite {background: #fff; width: 900px; height: 600px; opacity: 0; position: absolute; z-index: 3999; -webkit-transition: opacity 120s; -o-transition: opacity 120s; transition: opacity 120s; top: 0px; } #blackFlood {background: #000; width: 900px; height: 600px; top: 1100px; left:0px; opacity: 1; position: absolute; z-index: 100000; } #brokenBeach {display:none; position: absolute; left:700px; top:600px; background: transparent url(../images/deadAnimal.gif) 0px 0px no-repeat; } .cutScene {width: 900px; height: 600px; background: grey; z-index: 999999; position: relative; display: none; } .cutScene.rain {background: transparent url(../images/rain.gif) 0px 0px no-repeat; } .theSpiral {-webkit-animation:spinNrotata 200s ease-in-out infinite; } @-webkit-keyframes spinNrotata {0% { -webkit-transform: rotate(0deg) scale(1.5); } 20% { -webkit-transform: rotate(72deg) scale(1.6);} 40% { -webkit-transform: rotate(144deg) scale(1.7); } 60% { -webkit-transform: rotate(216deg) scale(1.8); } 80% { -webkit-transform: rotate(288deg) scale(1.9); } 100% { -webkit-transform: rotate(360deg) scale(2.0); } } @-webkit-keyframes rocking {0% { -webkit-transform: rotate(1deg); left:+=0px; } 20% { -webkit-transform: rotate(2deg); left:+=2px; } 40% { -webkit-transform: rotate(3deg); left:+=4px; } 60% { -webkit-transform: rotate(2deg); left:+=2px; } 80% { -webkit-transform: rotate(-3deg); left:-=2px; } 100% { -webkit-transform: rotate(-1deg); left:-=1px; } } .theChip {background: transparent url(../images/theChip3.png) 0px 0px no-repeat; } .communicatingBG {} .sliding-background {background: url("../images/communicateBackNew.png") repeat; height: 5076px; width: 900px; animation: slide 180s linear infinite, opacity0to0 120s linear infinite; z-index: 40000; position: relative; display: none; } @keyframes slide{0%{transform: translate3d(0, 0, 0); } 100%{transform: translate3d(0px, -1400px, 0); } } #dissectionScene {display:none; } #blueBack {width:900px; height:600px; background:#FFAFD6; position: absolute; top: 0px; left: 0px; } #greenFront {position: absolute; width:900px; height:250px; background:#00d65a; top: 350px; left: 0px; } /* number scene specific css */ .background {position: absolute; width: 900px; width: 900px; z-index: 100; } /*CUBES*/ .cubeThreeDee {width: 200px; height: 200px; position: relative; transform-style: preserve-3d; transform: translateZ(-100px); transition: transform 3s; transform: translateZ(-100px) rotateY( -190deg) rotateX( 30deg); } @-webkit-keyframes rotatingthreeD {from {-webkit-transform: rotateY(0deg) rotateX( 0deg); -o-transform: rotateY(0deg) rotateX( 0deg); transform: rotateY(0deg) rotateX( 0deg); } to {-webkit-transform: rotateY(360deg) rotateX( 360deg); -o-transform: rotateY(360deg) rotateX( 360deg); transform: rotateY(360deg) rotateX( 360deg); } } #outter3dCube, .outter3dCube {position: absolute; left: 330px; top: 200px; perspective: 400px; z-index: 900; perspective-origin: 50% 50%; } .cubeThreeDee {-webkit-animation: rotatingthreeD 10s linear infinite; } .cube__face {position: absolute; width: 200px; height: 200px; border: 2px solid black; line-height: 200px; font-size: 40px; font-weight: bold; color: white; text-align: center; /*background: hsla( 0, 100%, 50%, 0.7);*/ animation: crystalBlack 4s linear infinite alternate; opacity: .7; } .pinkThreeDee {animation: energonw 5s linear infinite alternate; } .PurpleThreeDee {animation: energonw 5s linear infinite alternate; } .GreyThreeDee {animation: none; background: url('../images/meatSide.gif'); opacity: 1; } .BlueThreeDee {animation: crystal 5s linear infinite alternate; } @keyframes flash {0% {transform: scale(1,1);} 100% {transform: scale(100,100);} } .flashCircle {background: #fff; border-radius: 50%; width:20px; height:20px; position: absolute; left: 15px; top: 40px; transform-origin: 50% 50%; animation: flash .2s linear 1; z-index: 100000; opacity: .8; } /*ripped directly from desandro*/ /*https://codepen.io/desandro/pen/bMqZmr*/ .cube__face--front { transform: rotateY( 0deg) translateZ(100px); } .cube__face--right { transform: rotateY( 90deg) translateZ(100px); } .cube__face--back { transform: rotateY(180deg) translateZ(100px); } .cube__face--left { transform: rotateY(-90deg) translateZ(100px); } .cube__face--top { transform: rotateX( 90deg) translateZ(100px); } .cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); } .flashCurtain {background: #fff; width: 900px; height: 600px; z-index: 2001; position: absolute; top: 0; left: 0; } @keyframes pulseText {0% {size: 100%;} 90% {size: 100%;} 100% {size: 120%;} } #impending {position: absolute; top:0px; right:0px; font-size: 100px; animation: pulseText 1s linear infinite; color: #fff; } /* scene 5051*/ /*BLINDS SECTION*/ .grassBack {background: url('../images/patterns/grassPattern.png'); } .overHang {position: absolute; left: 350px; bottom: 0px; border-radius: 3px; z-index: 500; width: 140px; height: 190px; } .consoleBox {width: 57px; position: absolute; bottom: 146px; left: 391px; height: 80px; background: grey; z-index: 500; border-radius: 8px 8px 0px 0px; } .consoleScreen {width: 37px; position: absolute; bottom: 186px; left: 402px; height: 30px; background: chartreuse; z-index: 500; border-radius: 8px; } #outsideStage {position: absolute; background: lightgreen; -webkit-transition: background 10s; -o-transition: background 10s; transition: background 10s; width: 100%; } .oneOfTheBoxes {top: 200px; left: 300px; position: absolute; height: 100px; width: 100px; -webkit-transition: all 10s; -o-transition: all 10s; transition: all 10s; top: 10%; border: 10px solid #000; border-color: rgba(250,80,60,.7); border-bottom: none; border-top: none; z-index: 75; } /*console on 5051*/ .blindControls {background: chartreuse; } .plus, .minus, .value {width: 14px; height: 10px; display: inline-block; float:left; padding: 20px; margin: 20px 10px 20px 10px; } .value {padding-right: 0px; padding-left: 0px; width: 20px; } .minus {margin-left: 20px; } .plus {margin-right: 20px; } /* other scenes for various scenes*/ .topMountain {background: transparent url(../images/mountainFive.png) 0 249px repeat-x; z-index: 1500; top: -2px; transform: scaleX(-1); transform: scaleY(-1) scaleX(-1); } .bottomMountain {background: transparent url(../images/mountainFive.png) 0 249px repeat-x; z-index: 1500; top: 0px; } .flipped {transform: scaleX(-1); } .genericHill {position: absolute; top:200px; left:0px; background: transparent url(../images/genericHill.png) 0 0; z-index: 150; width: 900px; height: 600px; } .largeMountain {background:transparent url(../images/mountainThree.png) 0 249px no-repeat; position: absolute; z-index: 1500; } .roundSide {clip-path: ellipse(50% 31% at 50% 50%); position: absolute; background: transparent url(../images/patterns/greeneyes.png); width: 1440px; height: 670px; top: 200px; left: 510px; z-index: 150; } .roundSideTwo {clip-path: ellipse(50% 31% at 48% 30%); position: absolute; background: transparent url(../images/patterns/greeneyes.png); width: 1000px; height: 500px; top: 250px; left: -500px; z-index: 150; } /*scene 4949*/ .bottomMountain.scene4949 {left: 800px; top: 60px; } /*scene 5049*/ .genericHill.scene5049 {top: 0px; background:transparent url(../images/5049.gif); } .largeMountain.scene5049 {top: 0px; left: 0px; background:transparent url(../images/mountainFive.png) 0 249px repeat-x; } .fullTree.scene4949 {bottom: 150px; left: 660px; } /*scene 5249*/ .people.scene5249 {left:766px; top:42px; } .plateaux {position: absolute; background: transparent url(../images/patterns/greeneyes.png); width: 900px; height: 30px; top: 479px; left: 0px; z-index: 150; } .plateaux.high {position: absolute; background: transparent url(../images/patterns/greeneyes.png); width: 900px; height: 30px; top: 200px; left: 500px; z-index: 1010; } .plateaux.waterBack.river {position: absolute; background:url(../images/patterns/waterRiver.gif); top: 170px; left: 460px; right: auto; width: 440px; border-top-left-radius: 20px; z-index: 1005; transition: all 3s linear; } .plateaux.waterBack.falls {position: absolute; background:url(../images/patterns/waterRiver.gif); /*transform: rotate(-90deg);*/ top: 380px; left: 199px; right: auto; width:400px; height:60px; transition: all 2s linear; } .fallsBox {position: absolute; width: 900px; height: 600px; z-index: 1005; } .fallsBox>div {width: 600px; height: 900px; left: 150px; top: -150px; transform: rotate(90deg); border: 1px solid green; position: relative; } .caveEntrance {position: absolute; left: 150px; top: 508px; background: transparent url(../images/mountainThree.png); transform: rotate(-90deg); width: 830px; height: 319px; z-index: 1100; padding-left: 420px; } .caveEntranceBackground {position: absolute; left: 360px; top: 220px; background: transparent url(../images/caveBackground.png); width: 510px; height: 390px; z-index: 140; } .monsterLeg, .monsterLeg2 {background: transparent url(../images/monsterleg.gif); top: 400px; left: 415px; width:88px; height: 60px; z-index: 1001; position: absolute; transform-origin: 100% 100%; transform: rotate(40deg); -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; } .monsterLeg2 {background: transparent url(../images/monster-leg2.gif); top: 460px; width: 62px; left: 455px; height: 80px; transform: rotate(0deg); } .monsterLegAttack {transform: rotate(0deg); } .monsterLegAttack2 {transform: rotate(-55deg); top: 390px; } .rotateLeg {animation: rotateLeg 5s linear 2s infinite alternate; transform: rotate(0deg); } .rotateLeg2 {animation: rotateLeg 4s linear 2.5s infinite alternate; transform: rotate(-55deg); top: 390px; } @keyframes rotateLeg {0%{transform: rotate(-30deg);} 100%{transform: rotate(20deg);} } .deadMonster {position: absolute; left:390px; top:400px; background: transparent url(../images/deadMonster.gif); width: 150px; height: 83px; } /*scene5349*/ .caveBackground {position: absolute; left: 0px; top: 0px; background: transparent url(../images/caveBackground.png); width: 900px; height: 600px; z-index: 140; transform: scaleX(-1); animation: glowing 10s linear 2s infinite alternate; } .blackBackground {position:absolute; width: 900px; height: 600px; background: transparent url(../images/patterns/dark-triangles.png); z-index: 130; } .scene5349.plateaux {width: 300px; } .scene5349.plateaux.second {left: 200px; top: 530px; } .scene5349.plateaux.third {left: 130px; top: 570px; } /*5348*/ .scene5348.plateaux {width: 300px; top: 200px; } .scene5348.plateaux.second {left: 100px; top: 120px; } .scene5348.plateaux.third {left: 200px; top: 80px; } .scene5348.caveBackground {transform: scaleX(-1) scaleY(-1); top: -180px; } .scene5348Alt.caveBackground {transform: scaleX(-1) scaleY(-1); top: -180px; animation: none; } #locationShow {position: absolute; left: 0px; top: 0px; border: 5px dotted pink; z-index: 10000000; } /*5548*/ .scene5548.plateaux {width: 600px; left: 0px; } .newGuy {background: transparent url(../images/peoplesprite.gif) 0px 0px no-repeat; position: absolute; top: 360px; left: 100px; width: 30px; height: 78px; z-index: 1001; top:400px; left:500px; } /*scene5248*/ .scene5248.caveEntrance {transform: rotate(147deg); left: 560px; top: -192px; } .scene5248.plateaux.waterBack.falls {left: 0px; right: auto; width: 600px; bottom: 200px; transition: all 4s; } .waterFlowOut {/*left: 0px !important;*/ width: 0px !important; } .waterFlowIn {right: auto; left: 0px; width: 600px !important; } .waterFlowIn5247 {right: auto; left: 0px; width: 441px !important; } .scene5247.horizontalBridge {top:0px; } .LautoR0 {left: auto !important; right: 0px !important; } .scene5248.plateaux {left: 100px; } .scene5248.plateaux.second {top: 200px; left: 50px; width: 900px; } .horizontalBridge {position: absolute; width: 80px; left: 150px; top:200px; height: 500px; } .horizontalBridge.second {top: 500px; } .inflictedBack {background: transparent url(../images/patterns/inflicted2.png); } .soapStoneBack {background: transparent url(../images/patterns/soapStone.gif); } .scene5546.plateaux {width: 800px; } /*5247*/ .scene5247.plateaux.high.falls {top: 384px; left: 0px; width: 441px; } .scene5247.genericHill {top: 200px; } /*Library*/ .library {position: absolute; left: 200px; top:140px; background: transparent url('../images/library.gif'); width: 200px; height: 200px; z-index: 150; } .scene1111.people, .scene1111.deadPerson {top: 440px; left: 400px; } .hole {background: #000; clip-path: ellipse(50% 31% at 50% 50%); width: 140px; height: 71px; position: absolute; left: 420px; top: 390px; z-index: 151; } /*scene 5047*/ .scene5047.plateaux {left: 100px; } #objectEntity {-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); background: skyblue; width: 100px; height: 100px; position: absolute; left: 240px; top: 360px; animation: distort 20s alternate infinite; background: url(../images/gridPretty.jpg); -webkit-transition: all 3s; -o-transition: all 3s; transition: all 3s; } .distort {-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); animation: distort 20s alternate infinite; } .distort.hideThisEffect {animation: none; clip-path: none; } @keyframes distort {0%{clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);} 10%{clip-path: polygon(10% 0%, 100% 3%, 82% 100%, 18% 100%, 0% 38%);} 20%{clip-path: polygon(30% 0%, 40% 38%, 42% 100%, 18% 100%, 0% 38%);} 30%{clip-path: polygon(80% 0%, 90% 38%, 82% 10%, 18% 100%, 0% 38%);} 40%{clip-path: polygon(50% 0%, 100% 38%, 82% 60%, 18% 100%, 0% 38%);} 50%{clip-path: polygon(50% 0%, 100% 38%, 82% 150%, 18% 100%, 0% 38%);} 60%{clip-path: polygon(71% 1%, 68% 51%, 82% 80%, 0 81%, 16% 43%);} 70%{clip-path: polygon(71% 1%, 68% 51%, 82% 100%, 0 81%, 16% 43%);} 80%{clip-path: polygon(71% 1%, 68% 51%, 1% 100%, 0 81%, 16% 43%);} 90%{clip-path: polygon(71% 1%, 68% 51%, 82% 10%, 0 81%, 16% 43%);} 100%{clip-path: polygon(50% 0%, 100% 38%, 82% 10%, 18% 100%, 0% 38%);} } #objectEntity.bigEntity {width: 400px; height: 400px; top: 180px; } #objectEntity.hugeEntity {width: 800px; height: 800px; top: 100px; left: 10px; } #objectEntity.madEntity {background: red; } #objectEntity.happyEntity {background: #fff; } /*scene 5347*/ .scene5347.roundSide {left: -840px; } .scene5347.caveEntranceBackground {left: 390px; } .scene5147.bottomMountain {top: 12px; left: 100px; transform: scaleX(1); } /* Buildings*/ .backgroundGrey, .backgroundBlue {background: #262424; width: 900px; height: 600px; z-index: 998; position: absolute; } .backgroundBlue {background: #001f20; z-index: 1001; } .insideLibrary {position: absolute; background: transparent url('../images/insideLibrary.gif'); width: 380px; height: 500px; left: 260px; top: 39px; z-index: 999; } /*************** ** Book Section **************/ #offwhitebg {position: relative; background: #efeccb; top: 80px; width: 100%; height: 90vh; } .book h1, .book h3 {color: #262424; text-align: center; opacity: .9; } .book p {color: #262424; opacity: .9; font-size: 11px; } .book h1{margin-top: 120px; margin-bottom: 20px; } .book img {margin-top: 80px; opacity: .9; } .page {z-index: 2; cursor: nw-resize; position: absolute; right: 20%; top: 4%; width: 320px; height: 524px; background: #EFECCB; /*border-radius: 5px;*/ border: 1px solid; perspective: 1000; -webkit-perspective: 1000; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .lastPage {display: none; } .page img {max-width: 90%; margin: 5%; } #bookShadow {position: absolute; right: 19%; top: 5%; background: #474959; opacity: .5; width: 320px; height: 524px; /*border-radius: 5px;*/ -webkit-transition: width 2s; -o-transition: width 2s; transition: width 2s; } .turnPage {z-index: 5; -webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */ transform: rotateY(180deg); /* Standard syntax */ } .backPage {-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */ transform: rotateY(180deg); /* Standard syntax */ } .bookOldPage {z-index: 0; transform: rotateY(180deg); } #whispers .firstPage .front {background: url(../images/patterns/soapStone.gif); background-size: cover; } .textBox {position: relative; height: 100%; width: 83%; margin: 6% 10% 0% 10%; } #whispers .page1 .back {background: url(../images/fullBookGameOne.gif) no-repeat; } #whispers .page2 .front {background: url(../images/fullBookGameTwo.gif) no-repeat; } #whispers .page2 .back {background: url(../images/patterns/soapStone.gif); background-size: cover; } .front {z-index: 1; background: #efeccb; width: 320px; height: 524px; } .back {z-index: 2; background: #efeccb; -webkit-transform: rotateY(-180deg) translateZ(1px); transform: rotateY(-180deg) translateZ(1px); cursor: ne-resize; } .front, .back {-webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; /*border-radius: 5px;*/ top: 0; left: 0; width: 320px; height: 524px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; background-size: 100%; } ul {margin-left: 100px; } @keyframes highLight {0%{background-color:#fcf003;} 100%{background-color:#000;} } .highLight {animation: highLight 1s linear alternate infinite; } /*recipie book*/ #recipies .page .front, #recipies .page .back {padding-top: 30px; padding-left: 10px; color: #000; } #recipies .page li, #recipies .page h4 {color: #000; } #recipies .page ul {margin-left: 30px; margin-top: 20px; font-size: 13px; } #recipies .page ul.pageIndex {margin-left: 100px; margin-top: 10px; margin-bottom: 20px; } .theoretical {font-size: 8px; bottom: 0px; } #recipies .page h4 {margin-left: 40px; } #recipies .pageTitle {margin-top: 200px; border-bottom: 5px dotted #000; } .pageIndex {padding-left: 30px; } #recipies .page .back {background: url('../images/brokenpageBack.gif') no-repeat; } #recipies .page .front {background: url('../images/brokenpage1.gif') no-repeat; } #recipies .page .front.alt {background: url('../images/brokenpage2.gif') no-repeat; } #recipies .page .front.broken {background: url('../images/brokenpage3.gif') no-repeat; } #recipies .page.firstPage .front, #recipies .page.page12 .back {background: url('../images/patterns/sand.png'); } #scripts .page.firstPage .front, #scripts .page.page12 .back {background: url('../images/patterns/inflicted2.png'); } #scripts .page.firstPage h3, #scripts .page.firstPage h1 {color:#fff; } #scripts .pageTitle {margin-top: 200px; border-bottom: 5px dotted #000; color: #000; } #scripts .page .front, #scripts .page .back {overflow: hidden; } /*the waste*/ #theWaste {background: url(../images/wasteGround.gif); width: 900px; height: 252px; position: absolute; z-index: 200; left:0px; bottom:0px; } /* in human place*/ #youAndMaster {background: url('../images/humanHome.gif'); position: absolute; z-index: 1000; width: 900px; height: 600px; top: 0px; left: 0px; } /* no mans land*/ #hill.borderLine5050 {background: url('../images/borderLine5050.gif'); position: absolute; } .genericHill.borderLine5049 {width: 900px; height: 600px; background: url('../images/borderLine5049.gif'); position: absolute; top: 0px; left: 0px; } .genericHillBorderLine {width: 900px; height: 600px; background: url('../images/genericHillBorderLine.gif'); position: absolute; top: 200px; left: 0px; } #warzoneGif, #gunPic {z-index: 2000; top: 0px; left: 0px; position: absolute; } .scrolling {animation: scrolling 20s linear alternate infinite; } @keyframes scrolling {0% { left: 0px;} 100%{ left: -450px; } } .fadeDown {height: 0px; } /* observatory*/ .observatory {width: 190px; height: 198px; background: transparent url(../images/observatory.gif) 0 0 repeat-x; position: absolute; left: 540px; bottom: 300px; z-index: 1000; max-height: 0px; -webkit-transition: max-height 10s; -o-transition: max-height 10s; transition: max-height 10s; } .observatory.built {max-height: 200px; } .observatoryInside {position: absolute; background: transparent url('../images/observatoryInside.gif'); width: 1017px; height: 1106px; left: 30px; top: -295px; z-index: 999; } .sciencePerson {background: transparent url('../images/scientist.gif'); position: absolute; top: 400px; left: 470px; width: 30px; height: 78px; z-index: 1001; } #computerScreenOverlay {background-blend-mode: hard-light; z-index: 10000; position: absolute; width:900px; height: 600px; background-color:#00ff0d; left: 0px; top: 0px; opacity: .5; } .computerCover {height: 112px; width: 80px; top: 197px; position: absolute; left: 249px; background: #b0c1e2; z-index: 1000; } @keyframes observatoryWalkScientist {100%{top:400px; left:390px;} } @keyframes observatoryWalkComputer {25%{top:400px; left:374px;} 60%{top:234px; left:74px;} 100%{top:234px; left:240px;} } @keyframes observatoryWalkTelescope {25%{top:400px; left:374px;} 45%{top:234px; left:74px;} 60%{top:234px; left:300px;} 80%{top:120px; left:516px;} 100%{top:120px; left:596px;} } .toScientist {animation: observatoryWalkScientist 2s linear 1 forwards; } .toComputer {animation: observatoryWalkComputer 3s linear 1 forwards; } .toTelescope {animation: observatoryWalkTelescope 5s linear 1 forwards; } .fromScientist {animation: observatoryWalkScientist 2s reverse 1 forwards; } .fromComputer {animation: observatoryWalkComputer 3s reverse 1 forwards; } .fromTelescope {animation: observatoryWalkTelescope 5s reverse 1 forwards; } /*scene 1212*/ .lense {background: url('../images/lense.gif') 0 0 no-repeat; left: 0px; top: 0px; } /*computer screen*/ #computerScreen{background: #2e2e2e; padding: 30px; width: 900px; height: 600px; margin: 0 auto; z-index: 999; position: absolute; } .computerScreen{background: #2e2e2e; padding: 3%; margin: 0 auto; height: 600px; } #info {text-align: left; background: #414146; } .messageFromGod {display: none; } .currentMessage {display: inline } p.aText {margin: 10px 0 0 10px; overflow: hidden; width: 0%; white-space: pre; } p.aniTextDone {width: 100%; } p.aniText{animation: type 3s steps(80, end); -webkit-animation: type 3s steps(80, end); } p.alt {white-space: normal; } /*p.aniText:nth-child(2){animation: type2 8s steps(60, end); } */ p.aniText a{text-decoration: none; } a.superLink {text-decoration: underline; } span.hLite{animation: blink 1s infinite; -webkit-animation: blink 1s infinite; } span.inifinitySymbol {font-size: 20px; position: absolute; top: 160px; right: 691px; } @keyframes type{from{ width: 0%; } to{ width: 100%; } } @keyframes type2{0%{width: 0%;} 50%{width: 0%;} 100%{ width: 100%; } } @keyframes blink{to{opacity: .0;} } @-webkit-keyframes type{from{ width: 0%; } to{ width: 100%; } } @-webkit-keyframes type2{0%{width: 0%;} 50%{width: 0%;} 100%{ width: 100%; } } @-webkit-keyframes blink{to{opacity: .0;} } ::selection{background: black; } .innerBox {width: 90%; height: 90%; margin: 3% 4%; z-index: 5000; position: relative; } .innerBoxStage {width: 100%; height: 70%; border: 5px solid #fff; display: inline-block; overflow: hidden; position: relative; } .innerBoxTextArea {width: 100%; height: 20%; border: 5px solid #fff; display: inline-block; margin-top: 2%; } textarea {margin-top: 40px; background: #000000; border: none; padding: 15px; font-family: 'Courier'; width: 90%; color: #00FF00; margin: 0px auto; display: block; resize: none; } textarea::selection { background:#00FF00; color:#000000; } textarea::-moz-selection { background:#00FF00; color:#000000; } textarea::-webkit-selection { background:#00FF00; color:#000000; } @keyframes rolling {0% { left:900px;} 100%{ left: -4400px;} } .rollingText {position: absolute; left: 0px; top: 200px; width: 4400px; animation: rolling 5s linear infinite; } /*Website*/ .geoCitiesImage {position: absolute; } .square {right: 0px; } .polygon {bottom:0px; width: 200px; animation: spinNrotata 5s linear infinite; } .YTV {height: 300px; left:180px; top: 50px; } .ball {bottom:0px; right: 0px; } .website h3 {margin-top: 10px; margin-left: 10px; } /*scene1199*/ .apartment {position: absolute; width: 244px; height:156px; left:328px; top:200px; background: url('../images/apartment.gif') no-repeat 0 0 ; } .apartmentLight {position: absolute; width: 244px; height:156px; left:0; top:0; animation: glowingLite 5s alternate infinite; background: url('../images/apartmentLight.gif') no-repeat 0 0 ; } .apartmentBed {position: absolute; width: 244px; height:156px; left: 328px; top: 200px; background: url('../images/apartmentBed.gif') no-repeat 0 0 ; z-index:1010; } @keyframes trainRide {0%{top:202px;left:108px;} 50%{top: 200px;left:109px;} 70%{top: 201px;left:107px;} 100%{top:198px;left:108px;} } @keyframes zoomPast {0%{right:0px;} 100%{right:-690px;} } .train {left: 108px; top: 200px; position: absolute; width:791px; height: 156px; background: url('../images/train2.gif') no-repeat 0 0 ; animation: trainRide 1s alternate infinite; z-index: 1010; } .train.back {} .trainTrack {background: #262424; position: absolute; top: 344px; left: 0px; width: 900px; height: 260px; z-index:1100; } .trainBackOne {background: #262424; position: absolute; top: 0px; left: 0px; width: 113px; height: 600px; z-index:1000; } .trainBackTwo {background: #262424; position: absolute; top: 0px; left: 0px; width: 900px; height: 230px; z-index:1000; } .trainBackThree {background: #262424; position: absolute; top: 310px; left: 0px; width: 900px; height: 310px; z-index:1000; } .buildingsBackground {right: 0px; top: 200px; position: absolute; width:1480px; height: 225px; background: url('../images/buildingsBackground.gif') no-repeat 0 0 ; animation: zoomPast .5s linear infinite; z-index: 990; } .buildingsBackgroundTwo {right: 0px; top: 200px; position: absolute; width:1480px; height: 225px; background: url('../images/buildingsBackground.gif') no-repeat 0 0 ; z-index: 990; } .trainChairs {left: 108px; top: 212px; position: absolute; width:795px; height: 141px; background: url('../images/peopleandchairs.gif') no-repeat 0 0 ; z-index: 999; } .trainPeople {left: 108px; top: 212px; position: absolute; width:795px; height: 141px; background: url('../images/people.gif') no-repeat 0 0 ; z-index: 998; } .flipX {transform: scaleX(-1); } /*scene 1197*/ .scene1197 {z-index: 1010; background: #181818; position: relative; width: 900px; height: 600px; } @keyframes scrollUp {0%{top: 0px;} 100%{top: -1800px;} } .filler {height: 2400px; position: absolute; top: 0px; left: 0px; animation: scrollUp 30s linear infinite; } .outter3dCube.shoeBox {position: absolute; perspective: 400px; z-index: 900; perspective-origin: 50% 50%; width: 900px; height: 600px; position: absolute; left: 0px; top: 0px; } .shoeBoxBox {position: absolute; top:0px;width: 900px; height: 600px; z-index: 2100; background: teal; } .shoeBox .cube__face {background-color: tan; animation: none; border:1px solid black; } .shoeBox .cube {width: 550px; height: 640px; position: absolute; transform-style: preserve-3d; transform: rotateX(0deg) translateZ(-180px); top: -30px; left: 150px; transition: transform 3s ease-in-out; } .shoeBox .cube .cube__face {opacity: 1; } .shoeBox .cube__face--front { transform: rotateY( 0deg) translateZ(100px);} .shoeBox .cube__face--right { transform: rotateY( 90deg) translateX(50px) translateY(0px) translateZ(-150px);} .shoeBox .cube__face--back { transform: rotateY(0deg) translateZ(-200px); } .shoeBox .cube__face--left { transform: rotateY( 90deg) translateX(50px) translateY(0px) translateZ(400px);} .shoeBox .cube__face--top { transform: rotateX( 90deg) translateZ(150px) translateX(0px) translateY(-50px);} .shoeBox .cube__face--bottom { transform: rotateX( 90deg) translateZ(-490px) translateX(0px) translateY(-50px);} .shoeBox .cube__face--front { height:640px; width: 550px;} .shoeBox .cube__face--right { width: 300px; height:640px;} .shoeBox .cube__face--back { height:640px; width: 550px;} .shoeBox .cube__face--left { width: 300px; height:640px;} .shoeBox .cube__face--top { height:300px; width: 550px;} .shoeBox .cube__face--bottom { height:300px; width: 550px;} .cube.is-backface-hidden .cube__face {backface-visibility: hidden; } .shoeBoxTop {transition: left 3s ease-in-out; } .shoeBoxTopOpen {left: -460px !important; } /*for shoebox on side*/ .shoeBox .cube.twistBox {transform: rotateX(90deg) translateY(-280px); transition: transform 3s ease-in-out; } /* 3D GUN thing */ .gunBack { position: absolute; width: 900px; height: 600px; z-index: 1100; background: url('../images/white-noise.jpg'); } .gunBox { position: absolute; perspective: 400px; z-index: 900; perspective-origin: 50% 50%; width: 900px; height: 600px; position: absolute; left: 0px; top: 0px; } .pushUp { margin-top: -90px; } .gunBox .cube__face { opacity: 1; animation: none; background: grey; border:1px solid black; background: url('../images/matrix.gif'); } .gunFace { background-color: grey !important; animation: none; border:1px solid black; } .gunBox .gunCube { width: 550px; height: 640px; position: absolute; transform-style: preserve-3d; top: -30px; left: 150px; transform: rotateX(45deg) translateY(-270px) translateZ(-368px) translateX(-170px) rotateY(0deg) rotateZ(-15deg); animation: gunShift 10s infinite alternate; } @-webkit-keyframes gunShift{ from { -webkit-transform: rotateX(45deg) translateY(-270px) translateZ(-368px) translateX(-170px) rotateY(0deg) rotateZ(-15deg); } to { -webkit-transform: rotateZ(-5deg) translateZ(-340px) rotateX(45deg) translateY(-270px) translateX(-170px) rotateY(0deg); } } .gunBox .cube__face--front { transform: rotateY( 0deg) translateZ(100px);} .gunBox .cube__face--right { transform: rotateY( 90deg) translateX(50px) translateY(0px) translateZ(-150px);} .gunBox .cube__face--back { transform: rotateY(0deg) translateZ(-200px); } .gunBox .cube__face--left { transform: rotateY( 90deg) translateX(50px) translateY(0px) translateZ(-150px);} .gunBox .cube__face--top { transform: rotateX( 90deg) translateZ(150px) translateX(0px) translateY(-50px);} .gunBox .cube__face--bottom { transform: rotateX(90deg) translateZ(-390px) translateX(580px) translateY(-50px);} .gunBox .cube__face--bottom.second { transform: rotateX( 90deg) translateZ(-150px) translateX(0px) translateY(-50px);} .gunBox .cube__face--front { height:640px; width: 550px;} .gunBox .cube__face--right { width: 300px; height:640px;} .gunBox .cube__face--back { height:640px; width: 550px;} .gunBox .cube__face--left { width: 300px; height:620px;} .gunBox .cube__face--top { height:300px; width: 550px;} .gunBox .cube__face--bottom { height:300px; width: 400px;} .gunBox .cube__face--bottom.second { height:300px; width: 1157px;} #stageTwo {position: absolute; top: 0px; left: 0px; z-index: 100; width: 900px; height: 600px; overflow: hidden; border: 5px solid #fff; background: transparent url(../images/night.gif) 0 0 repeat-x; /*background: transparent url(../images/alltheThings.gif) 0 0 repeat-x;*/ } /* the Boss Layer*/ .sqr {} ul, li {margin:0; padding:0; } .wrapper {margin-left:20%; margin-top:2em; display:block; } #theGrid {width: 900px; height: 600px; position: absolute; z-index: 4000; background: #000340; padding: 1px; } #theGrid ul {list-style:none; display:inline-block; margin:0; padding:0; } #theGrid li {width: 30px; height: 30px; border: 1px solid #000340; margin:0; padding:0; margin-right: -19px; margin-bottom: -2px; } /*for clear grid*/ #theClearGrid {width: 30px; height: 30px; border: 1px solid white; margin:0; padding:0; margin-right: -15px; margin-bottom: 0px; } .You {background: grey; border-radius: 20px; margin: 3px; /* border: none !important;*/ } /* for the Grid*/ .wall {background: #fff; border: 1px solid pink !important; animation: energonw 5s linear infinite alternate; } .death {border: 1px solid #fff; animation: crystalBlack 5s linear infinite alternate; } .exit {background: green; border: 1px solid #fff; margin-left: 0px !important; position: relative !important; top: 0px !important; left: 0px !important; } /*tool tip shit*/ .tooltop {position: absolute; background: #aeb4b8; /*border: 4px solid #3a3c3d;*/ top: 10px; text-align: center; width: 160px; padding: 7px; z-index: 9000; margin-top: -90px; margin-left: -73px; font-size: 9px; font-family: sans-serif; border-radius: 10px; } .tooltop:after, .tooltop:before {top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .tooltop:after {border-top-color: #aeb4b8; border-width: 30px; margin-left: -30px; } .tooltop:before {border-top-color: #aeb4b8; border-width: 36px; margin-left: -36px; } .tooltop.bottomToolTop {margin-top:50px; } .tooltop.bottomToolTop:after, .tooltop.bottomToolTop:before {top: -148%; transform: rotate(180deg); } /*Layer specific shit*/ #bookLayer {width: 900px; height: 600px; background: url(../images/inBook.png) no-repeat; z-index: 0; position: absolute; margin:5px; } #bookLayer.hideThisEffect {background: none; } #textArea.textInBook {color: #000; background: #efeccb; } #textArea.textInBook .option {color: #000; } #textArea.textInBook .selected {margin-right: -1px; margin-bottom: -1px; border-bottom: 1px solid #000; border-right: 1px solid #000; } .textInBook.textInBook.hideThisEffect {color: #fff; background: #000; } .textInBook.textInBook.hideThisEffect .option {color: #fff; } #computerLayer {width: 887px; height: 586px; z-index: 0; position: absolute; margin: 9px; outline: 5px solid #000; border: 3px solid #fff; overflow: hidden; } #computerLayer.hideThisEffect {opacity: 0; } .cubeForEffect {width: 10px; height: 10px; position: absolute; opacity: .5; } .scene1114 {position: relative; transition: none; z-index: 1010; transform-origin: 600px 258px; } .scene1112, .scene1113 {z-index: 1010; } .bookGrownOne {transform: scale(1.5); } .bookGrownTwo {transform: scale(2.8); } .bookGrownThree {transform: scale(4.39); } /*WARP DOOR SHIT*/ .warpDoor {position: absolute; width: 100px; height: 180px; overflow: hidden; left: 400px; top: 300px; -webkit-transition: background-color .2s; -o-transition: background-color .2s; transition: background-color .2s; background-color: red; border: 4px groove #fff; padding: 2px; z-index: 1000; } .scene1211 .warpDoor {left: 232px; top: 114px; } .spinningThingBox {width: 180px; height: 180px; position: absolute; left: -40px; top: 0px; } .spinningThing, .spinningThing div {border: 2px solid #fff; margin: 3%; width: 90%; height: 90%; -webkit-animation: rotation 20s infinite linear; } .spinningThing div.everyOther {-webkit-animation: rotationReverse 10s infinite linear; margin: 7%; } @-webkit-keyframes rotation {from {-webkit-transform: rotate(0deg); } to {-webkit-transform: rotate(359deg); } } @-webkit-keyframes rotationReverse {from {-webkit-transform: rotate(0deg); } to {-webkit-transform: rotate(-359deg); } } /* warp door shit*/ .scene1114 .spinningThingBox {width: 550px; height: 550px; position: absolute; left: -129px; top: 0px; } .scene1114 .warpDoor {position: absolute; width: 290px; height: 494px; overflow: hidden; left: 400px; top: 10px; -webkit-transition: background-color .2s; -o-transition: background-color .2s; transition: background-color .2s; background-color: red; border: 4px groove #fff; padding: 2px; position: absolute; z-index: 1000; left: 10px; opacity: 1; display: inline-block; } .scene5047 .warpDoor {left: 250px; top: 282px; } #computerScreen .warpDoor {height: 100%; width: 100%; left:0px; top: 0px; } #computerScreen .spinningThingBox {width: 900px; height: 900px; position: absolute; left: 0px; top: -110px; } /* FINAL LAYER */ .finalFire {position: absolute; width: 40px; height: 60px; overflow: hidden; left: 430px; top: 450px; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; background: red; border: 1px solid green; clip-path: polygon(0% 80%, 10% 100%, 90% 100%,100% 80%, 70% 0%, 60% 40%, 50% 10%, 40% 50%, 30% 0% ); animation: distortFire 5s alternate infinite; z-index: 910; } .finalGround {width: 900px; height: 150px; background: #291300; position: absolute; top: 500px; left: 0px; animation: glowingLite 20s alternate infinite; z-index: 900; } .finalGround.darkend {background: #000; animation: none; } .finalPerson {left: 500px; top: 450px; } .stars {background: transparent url(../images/stars.gif) 0px 0px no-repeat; animation:drawArc2 20s linear 0s infinite, opacity0to0 20s linear 0s infinite; position: absolute; z-index: 130; } .starsTwo {animation:drawArc2 20s linear 5s infinite, opacity0to0 20s linear 5s infinite; } @keyframes distortFire {0%{clip-path: polygon(0% 80%, 10% 100%, 90% 100%,100% 80%, 70% 14%, 60% 40%, 50% 10%, 40% 80%, 30% 5% );} 40%{clip-path: polygon(3% 82%, 9% 100%, 90% 100%,98% 85%, 68% 3%, 63% 30%, 48% 8%, 41% 80%, 29% 10% );} 80%{clip-path: polygon(2% 79%, 10% 100%, 91% 100%,99% 75%, 66% 9%, 64% 43%, 51% 11%, 40% 49%, 32% 15% );} } .sideways {transform:rotate(90deg); } .BEEP {width: 15px; height: 15px; background-color: #17ff10; background-color: #ff10ca; position:absolute; display:inline; animation:butterFly infinite alternate 20s; /* Safari and Chrome */ z-index: 100; } .BEEP.scene5147 {z-index:1100; } @-webkit-keyframes swarm {0% {left: 550px; top:380px;background-color: #f00;} 35% {left: 560px; top:360px;} 50% {left: 530px; top:400px;} 85% {left: 565px; top:390px;} 100% {left: 540px; top:420px;background-color: #17ff10;}} @-webkit-keyframes superSwarm {0% {left: 543px; top:394px;background-color: #f00;} 15% {left: 540px; top:460px;} 35% {left: 563px; top:380px;} 50% {left: 555px; top:445px;} 85% {left: 550px; top:460px;} 92% {left: 580px; top:400px;} 100% {left: 544px; top:410px;background-color: #17ff10;}} .swarming {-webkit-animation:swarm infinite alternate 1.8s; /* Safari and Chrome */ } .superSwarming {-webkit-animation:superSwarm infinite alternate 1.8s; /* Safari and Chrome */ } .pausedCSS {animation-play-state: paused; } .noneCSS {animation:none; } /*pre firball shit*/ /*preFire*/ .theBurst {animation: energonw .1s linear infinite alternate; position: absolute; width: 0px; height: 0px; border-radius: 0px 20px 20px 0px; transition: all 1.3s; z-index: 1004; border-radius: 10px 10px 10px 10px; background: pink; } @-webkit-keyframes preBurst {from {-webkit-transform: rotateY(0deg) rotateX( 0deg) scale(5); -o-transform: rotateY(0deg) rotateX( 0deg) scale(5); transform: rotateY(0deg) rotateX( 0deg) scale(5); } to {-webkit-transform: rotateY(360deg) rotateX( 360deg) scale(5); -o-transform: rotateY(360deg) rotateX( 360deg) scale(5); transform: rotateY(360deg) rotateX( 360deg) scale(5); } } @-webkit-keyframes preBurstShrink {from {-webkit-transform: rotateY(0deg) rotateX( 0deg) scale(5); -o-transform: rotateY(0deg) rotateX( 0deg) scale(5); transform: rotateY(0deg) rotateX( 0deg) scale(5); } to {-webkit-transform: rotateY(360deg) rotateX( 360deg) scale(1); -o-transform: rotateY(360deg) rotateX( 360deg) scale(1); transform: rotateY(360deg) rotateX( 360deg) scale(1); } } .preBurstEffect {opacity: .5; width: 10px; height: 10px; background: #fff; left: -80px; top: -120px; position:absolute; -webkit-transition: all 5s; transition: all 5s; } .preBurstEffect.second {left: -80px; top: 120px; } .preBurstEffect.third {left: 80px; top: 120px; } .preBurstEffect.fourth {left: 80px; top: -120px; } .preBurstEffect.happening {left: 30px; top: 30px; -webkit-animation: preBurstShrink 5s infinite; } .preBurst {width: 0px; height: 0px; } .bursted {width: 1000px !important; margin-top: -35px; height: 70px; } .pushRight {position: relative; left: -10px; } .warLibrary {position: absolute; left: 160px; top: 200px; background: transparent url('../images/library.gif'); width: 200px; height: 200px; z-index: 160; transform: rotate(-285deg); } /* glitch text shit*/ .glitcher {color: #fff; margin: 0; line-height: 0; /*Animation*/ animation: glitch1 2.5s infinite; } .glitcher:nth-child(2) {color: #67f3da; animation: glitch2 2.5s infinite; } .glitcher:nth-child(3) {color: #f16f6f; animation: glitch3 2.5s infinite; } /*Keyframes*/ @keyframes glitch1 {0% {transform: none; opacity: 1; } 7% {transform: skew(-0.5deg, -0.9deg); opacity: 0.75; } 10% {transform: none; opacity: 1; } 27% {transform: none; opacity: 1; } 30% {transform: skew(0.8deg, -0.1deg); opacity: 0.75; } 35% {transform: none; opacity: 1; } 52% {transform: none; opacity: 1; } 55% {transform: skew(-1deg, 0.2deg); opacity: 0.75; } 50% {transform: none; opacity: 1; } 72% {transform: none; opacity: 1; } 75% {transform: skew(0.4deg, 1deg); opacity: 0.75; } 80% {transform: none; opacity: 1; } 100% {transform: none; opacity: 1; } } @keyframes glitch2 {0% {transform: none; opacity: 0.25; } 7% {transform: translate(-2px, -3px); opacity: 0.5; } 10% {transform: none; opacity: 0.25; } 27% {transform: none; opacity: 0.25; } 30% {transform: translate(-5px, -2px); opacity: 0.5; } 35% {transform: none; opacity: 0.25; } 52% {transform: none; opacity: 0.25; } 55% {transform: translate(-5px, -1px); opacity: 0.5; } 50% {transform: none; opacity: 0.25; } 72% {transform: none; opacity: 0.25; } 75% {transform: translate(-2px, -6px); opacity: 0.5; } 80% {transform: none; opacity: 0.25; } 100% {transform: none; opacity: 0.25; } } @keyframes glitch3 {0% {transform: none; opacity: 0.25; } 7% {transform: translate(2px, 3px); opacity: 0.5; } 10% {transform: none; opacity: 0.25; } 27% {transform: none; opacity: 0.25; } 30% {transform: translate(5px, 2px); opacity: 0.5; } 35% {transform: none; opacity: 0.25; } 52% {transform: none; opacity: 0.25; } 55% {transform: translate(5px, 1px); opacity: 0.5; } 50% {transform: none; opacity: 0.25; } 72% {transform: none; opacity: 0.25; } 75% {transform: translate(2px, 6px); opacity: 0.5; } 80% {transform: none; opacity: 0.25; } 100% {transform: none; opacity: 0.25; } } /* end of glitch shit*/ .tombstone {background: transparent url(../images/tombstone.png) 0px 0px no-repeat; width: 35px; height: 29px; position: absolute; top: 327px; left: 20px; z-index: 1005; } /*new code here don't fuck with the above*/ .megaText { font-size: 130px !important; margin-top: -100px; } #textArea.textInBook .selected { margin-right: -2px; margin-bottom: -2px; border-bottom: none; border-right: none; } #paradiseLand { background-image: url(../images/paradise.png); width:900px; height:600px; position:absolute; z-index: 1000; } #previewReel { opacity: 0; transition: opacity 2s; } #hiScores { position: absolute; top: 0px; left: 0px; text-align: center; width: 900px; margin-top: 50px; opacity: 0; transition: opacity 2s; } /*body background effects*/ .colourOverlay { /*z-index: 9999;*/ width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity:0; transition: opacity 4s; z-index: -10; } .colourOverlay.fadeInn{ opacity:1; } .colourOverlay.party { z-index: 99999; } .colourOverlay.fadeInn.party { opacity:.4; } .blob { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); mix-blend-mode: screen; animation: moveBlob 5s infinite ease-in-out; } @keyframes moveBlob { 0% { transform: translate(-100vw, -200vw); } 25% { transform: translate(-10vw, -500vh); } 50% { transform: translate(-150vw, 150vh); } 75% { transform: translate(-10vw, -100vh); } 100% { transform: translate(200vw, 500vw); } } /* liquid back */ #gradient-canvas .beautiful{ width: 100%; height: 100%; --gradient-color-1: #725adb; --gradient-color-2: #470654; --gradient-color-3: #1b141c; --gradient-color-4: #000000; z-index: 0; } #gradient-canvas .sadbackground{ width: 100%; height: 100%; --gradient-color-1: #9c9c9c; --gradient-color-2: #7d5959; --gradient-color-3: #314f49; --gradient-color-4: #424242; z-index: 0; } .firefly { position: fixed; left: 50%; top: 50%; width: 0.4vw; height: 0.4vw; margin: -0.2vw 0 0 9.8vw; animation: ease 200s alternate infinite; pointer-events: none; } .firefly::before, .firefly::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; transform-origin: -10vw; } .firefly::before { background: black; opacity: 0.4; animation: drift ease alternate infinite; } .firefly::after { background: white; opacity: 0; box-shadow: 0 0 0vw 0vw yellow; animation: drift ease alternate infinite, flash ease infinite; } .firefly:nth-child(1) { animation-name: move1; } .firefly:nth-child(1)::before { animation-duration: 14s; } .firefly:nth-child(1)::after { animation-duration: 14s, 5047ms; animation-delay: 0ms, 1941ms; } /* fire flies */ @keyframes move1 {0% {transform: translateX(37%) translateY(-35%) scale(0.47); } 3.5714285714% {transform: translateX(25%) translateY(16%) scale(0.26); } 7.1428571429% {transform: translateX(22%) translateY(44%) scale(0.38); } 10.7142857143% {transform: translateX(18%) translateY(-8%) scale(0.6); } 14.2857142857% {transform: translateX(-6%) translateY(40%) scale(0.27); } 17.8571428571% {transform: translateX(14%) translateY(48%) scale(0.94); } 21.4285714286% {transform: translateX(15%) translateY(24%) scale(0.96); } 25% {transform: translateX(42%) translateY(-35%) scale(0.42); } 28.5714285714% {transform: translateX(-20%) translateY(10%) scale(0.47); } 32.1428571429% {transform: translateX(-43%) translateY(-31%) scale(0.29); } 35.7142857143% {transform: translateX(11%) translateY(36%) scale(0.95); } 39.2857142857% {transform: translateX(20%) translateY(39%) scale(0.32); } 42.8571428571% {transform: translateX(-35%) translateY(-33%) scale(0.36); } 46.4285714286% {transform: translateX(46%) translateY(11%) scale(0.26); } 50% {transform: translateX(30%) translateY(37%) scale(0.56); } 53.5714285714% {transform: translateX(-19%) translateY(-13%) scale(0.81); } 57.1428571429% {transform: translateX(38%) translateY(44%) scale(0.97); } 60.7142857143% {transform: translateX(-20%) translateY(-48%) scale(0.27); } 64.2857142857% {transform: translateX(29%) translateY(-21%) scale(0.79); } 67.8571428571% {transform: translateX(-37%) translateY(10%) scale(0.69); } 71.4285714286% {transform: translateX(-25%) translateY(-34%) scale(0.7); } 75% {transform: translateX(-3%) translateY(13%) scale(0.37); } 78.5714285714% {transform: translateX(6%) translateY(-42%) scale(0.77); } 82.1428571429% {transform: translateX(-47%) translateY(15%) scale(0.78); } 85.7142857143% {transform: translateX(-35%) translateY(-34%) scale(0.83); } 89.2857142857% {transform: translateX(-16%) translateY(33%) scale(0.53); } 92.8571428571% {transform: translateX(23%) translateY(43%) scale(0.78); } 96.4285714286% {transform: translateX(6%) translateY(14%) scale(0.97); } 100% {transform: translateX(31%) translateY(14%) scale(0.99); } } .firefly:nth-child(2) {animation-name: move2; } .firefly:nth-child(2)::before {animation-duration: 15s; } .firefly:nth-child(2)::after {animation-duration: 15s, 6140ms; animation-delay: 0ms, 4608ms; } @keyframes move2 {0% {transform: translateX(36%) translateY(5%) scale(0.67); } 5.8823529412% {transform: translateX(-12%) translateY(50%) scale(0.88); } 11.7647058824% {transform: translateX(-2%) translateY(18%) scale(0.78); } 17.6470588235% {transform: translateX(-20%) translateY(-2%) scale(0.4); } 23.5294117647% {transform: translateX(5%) translateY(23%) scale(0.69); } 29.4117647059% {transform: translateX(37%) translateY(38%) scale(0.92); } 35.2941176471% {transform: translateX(-20%) translateY(-2%) scale(0.73); } 41.1764705882% {transform: translateX(-42%) translateY(-13%) scale(0.89); } 47.0588235294% {transform: translateX(-31%) translateY(21%) scale(0.77); } 52.9411764706% {transform: translateX(-7%) translateY(33%) scale(0.72); } 58.8235294118% {transform: translateX(-42%) translateY(-24%) scale(0.97); } 64.7058823529% {transform: translateX(-4%) translateY(-40%) scale(0.33); } 70.5882352941% {transform: translateX(-35%) translateY(33%) scale(0.87); } 76.4705882353% {transform: translateX(4%) translateY(47%) scale(0.96); } 82.3529411765% {transform: translateX(10%) translateY(48%) scale(0.31); } 88.2352941176% {transform: translateX(-21%) translateY(-7%) scale(0.42); } 94.1176470588% {transform: translateX(18%) translateY(45%) scale(0.63); } 100% {transform: translateX(-9%) translateY(-22%) scale(0.48); } } .firefly:nth-child(3) {animation-name: move3; } .firefly:nth-child(3)::before {animation-duration: 10s; } .firefly:nth-child(3)::after {animation-duration: 10s, 6543ms; animation-delay: 0ms, 5897ms; } @keyframes move3 {0% {transform: translateX(48%) translateY(42%) scale(0.96); } 3.5714285714% {transform: translateX(12%) translateY(50%) scale(1); } 7.1428571429% {transform: translateX(27%) translateY(-27%) scale(0.28); } 10.7142857143% {transform: translateX(5%) translateY(-21%) scale(0.65); } 14.2857142857% {transform: translateX(-21%) translateY(-16%) scale(0.65); } 17.8571428571% {transform: translateX(-48%) translateY(16%) scale(0.26); } 21.4285714286% {transform: translateX(11%) translateY(-2%) scale(0.89); } 25% {transform: translateX(10%) translateY(41%) scale(0.95); } 28.5714285714% {transform: translateX(-19%) translateY(-25%) scale(0.34); } 32.1428571429% {transform: translateX(-49%) translateY(6%) scale(0.56); } 35.7142857143% {transform: translateX(-31%) translateY(28%) scale(0.93); } 39.2857142857% {transform: translateX(21%) translateY(30%) scale(0.55); } 42.8571428571% {transform: translateX(18%) translateY(-2%) scale(0.49); } 46.4285714286% {transform: translateX(26%) translateY(-29%) scale(0.81); } 50% {transform: translateX(38%) translateY(9%) scale(0.38); } 53.5714285714% {transform: translateX(-31%) translateY(-39%) scale(0.29); } 57.1428571429% {transform: translateX(21%) translateY(42%) scale(1); } 60.7142857143% {transform: translateX(-24%) translateY(-18%) scale(0.32); } 64.2857142857% {transform: translateX(-33%) translateY(-20%) scale(0.5); } 67.8571428571% {transform: translateX(30%) translateY(-40%) scale(0.26); } 71.4285714286% {transform: translateX(-9%) translateY(43%) scale(0.8); } 75% {transform: translateX(3%) translateY(27%) scale(0.77); } 78.5714285714% {transform: translateX(12%) translateY(-22%) scale(0.34); } 82.1428571429% {transform: translateX(13%) translateY(-2%) scale(0.73); } 85.7142857143% {transform: translateX(-45%) translateY(-34%) scale(0.39); } 89.2857142857% {transform: translateX(-17%) translateY(-26%) scale(0.42); } 92.8571428571% {transform: translateX(-38%) translateY(-16%) scale(0.51); } 96.4285714286% {transform: translateX(-15%) translateY(-37%) scale(0.67); } 100% {transform: translateX(-44%) translateY(47%) scale(0.94); } } .firefly:nth-child(4) {animation-name: move4; } .firefly:nth-child(4)::before {animation-duration: 16s; } .firefly:nth-child(4)::after {animation-duration: 16s, 10011ms; animation-delay: 0ms, 1784ms; } @keyframes move4 {0% {transform: translateX(-17%) translateY(10%) scale(0.61); } 5.8823529412% {transform: translateX(-21%) translateY(30%) scale(0.6); } 11.7647058824% {transform: translateX(-15%) translateY(-36%) scale(0.5); } 17.6470588235% {transform: translateX(10%) translateY(-46%) scale(1); } 23.5294117647% {transform: translateX(-48%) translateY(-22%) scale(0.74); } 29.4117647059% {transform: translateX(-6%) translateY(35%) scale(0.67); } 35.2941176471% {transform: translateX(-46%) translateY(34%) scale(0.74); } 41.1764705882% {transform: translateX(6%) translateY(42%) scale(0.47); } 47.0588235294% {transform: translateX(0%) translateY(-6%) scale(0.74); } 52.9411764706% {transform: translateX(12%) translateY(6%) scale(0.6); } 58.8235294118% {transform: translateX(-14%) translateY(27%) scale(0.72); } 64.7058823529% {transform: translateX(-36%) translateY(-28%) scale(0.58); } 70.5882352941% {transform: translateX(30%) translateY(35%) scale(0.92); } 76.4705882353% {transform: translateX(25%) translateY(12%) scale(0.76); } 82.3529411765% {transform: translateX(-11%) translateY(45%) scale(0.39); } 88.2352941176% {transform: translateX(23%) translateY(16%) scale(0.75); } 94.1176470588% {transform: translateX(7%) translateY(-39%) scale(0.61); } 100% {transform: translateX(45%) translateY(13%) scale(0.81); } } .firefly:nth-child(5) {animation-name: move5; } .firefly:nth-child(5)::before {animation-duration: 16s; } .firefly:nth-child(5)::after {animation-duration: 16s, 5933ms; animation-delay: 0ms, 1032ms; } @keyframes move5 {0% {transform: translateX(48%) translateY(-33%) scale(0.39); } 4.1666666667% {transform: translateX(-35%) translateY(-15%) scale(0.75); } 8.3333333333% {transform: translateX(0%) translateY(34%) scale(1); } 12.5% {transform: translateX(-37%) translateY(-4%) scale(0.27); } 16.6666666667% {transform: translateX(-44%) translateY(16%) scale(0.45); } 20.8333333333% {transform: translateX(7%) translateY(-49%) scale(0.74); } 25% {transform: translateX(35%) translateY(11%) scale(0.38); } 29.1666666667% {transform: translateX(-12%) translateY(46%) scale(0.94); } 33.3333333333% {transform: translateX(-8%) translateY(26%) scale(0.36); } 37.5% {transform: translateX(-13%) translateY(31%) scale(0.84); } 41.6666666667% {transform: translateX(-17%) translateY(5%) scale(0.74); } 45.8333333333% {transform: translateX(20%) translateY(24%) scale(0.4); } 50% {transform: translateX(20%) translateY(45%) scale(0.57); } 54.1666666667% {transform: translateX(31%) translateY(-36%) scale(0.52); } 58.3333333333% {transform: translateX(5%) translateY(24%) scale(0.57); } 62.5% {transform: translateX(-46%) translateY(43%) scale(0.6); } 66.6666666667% {transform: translateX(4%) translateY(-49%) scale(0.56); } 70.8333333333% {transform: translateX(18%) translateY(11%) scale(0.62); } 75% {transform: translateX(16%) translateY(25%) scale(0.82); } 79.1666666667% {transform: translateX(-18%) translateY(-25%) scale(0.91); } 83.3333333333% {transform: translateX(-29%) translateY(11%) scale(0.27); } 87.5% {transform: translateX(20%) translateY(38%) scale(0.29); } 91.6666666667% {transform: translateX(-29%) translateY(-46%) scale(0.48); } 95.8333333333% {transform: translateX(25%) translateY(-6%) scale(0.92); } 100% {transform: translateX(-27%) translateY(-19%) scale(0.81); } } .firefly:nth-child(6) {animation-name: move6; } .firefly:nth-child(6)::before {animation-duration: 12s; } .firefly:nth-child(6)::after {animation-duration: 12s, 7003ms; animation-delay: 0ms, 5094ms; } @keyframes move6 {0% {transform: translateX(41%) translateY(37%) scale(0.38); } 4.7619047619% {transform: translateX(30%) translateY(45%) scale(0.94); } 9.5238095238% {transform: translateX(-38%) translateY(-1%) scale(0.3); } 14.2857142857% {transform: translateX(34%) translateY(16%) scale(0.68); } 19.0476190476% {transform: translateX(40%) translateY(33%) scale(0.65); } 23.8095238095% {transform: translateX(1%) translateY(-4%) scale(0.32); } 28.5714285714% {transform: translateX(-42%) translateY(-35%) scale(0.44); } 33.3333333333% {transform: translateX(-20%) translateY(12%) scale(0.55); } 38.0952380952% {transform: translateX(-36%) translateY(-11%) scale(0.63); } 42.8571428571% {transform: translateX(-16%) translateY(3%) scale(0.53); } 47.619047619% {transform: translateX(1%) translateY(38%) scale(0.63); } 52.380952381% {transform: translateX(-11%) translateY(-43%) scale(0.59); } 57.1428571429% {transform: translateX(-16%) translateY(28%) scale(0.28); } 61.9047619048% {transform: translateX(-44%) translateY(43%) scale(0.55); } 66.6666666667% {transform: translateX(-21%) translateY(-28%) scale(0.93); } 71.4285714286% {transform: translateX(15%) translateY(-11%) scale(0.35); } 76.1904761905% {transform: translateX(-43%) translateY(35%) scale(0.85); } 80.9523809524% {transform: translateX(7%) translateY(50%) scale(0.29); } 85.7142857143% {transform: translateX(-48%) translateY(-31%) scale(0.83); } 90.4761904762% {transform: translateX(27%) translateY(-1%) scale(0.45); } 95.2380952381% {transform: translateX(-12%) translateY(2%) scale(0.84); } 100% {transform: translateX(-46%) translateY(8%) scale(0.71); } } .firefly:nth-child(7) {animation-name: move7; } .firefly:nth-child(7)::before {animation-duration: 10s; } .firefly:nth-child(7)::after {animation-duration: 10s, 10300ms; animation-delay: 0ms, 3637ms; } @keyframes move7 {0% {transform: translateX(-12%) translateY(49%) scale(0.38); } 5.2631578947% {transform: translateX(-1%) translateY(-45%) scale(0.85); } 10.5263157895% {transform: translateX(21%) translateY(17%) scale(0.32); } 15.7894736842% {transform: translateX(23%) translateY(-25%) scale(1); } 21.0526315789% {transform: translateX(-38%) translateY(-2%) scale(0.4); } 26.3157894737% {transform: translateX(-14%) translateY(-7%) scale(0.83); } 31.5789473684% {transform: translateX(-6%) translateY(23%) scale(0.89); } 36.8421052632% {transform: translateX(-16%) translateY(37%) scale(0.34); } 42.1052631579% {transform: translateX(50%) translateY(-49%) scale(0.69); } 47.3684210526% {transform: translateX(17%) translateY(1%) scale(0.44); } 52.6315789474% {transform: translateX(18%) translateY(-27%) scale(0.55); } 57.8947368421% {transform: translateX(28%) translateY(-22%) scale(0.4); } 63.1578947368% {transform: translateX(25%) translateY(-21%) scale(0.55); } 68.4210526316% {transform: translateX(23%) translateY(-47%) scale(0.28); } 73.6842105263% {transform: translateX(47%) translateY(-47%) scale(0.57); } 78.9473684211% {transform: translateX(33%) translateY(38%) scale(0.69); } 84.2105263158% {transform: translateX(26%) translateY(31%) scale(0.84); } 89.4736842105% {transform: translateX(-11%) translateY(-7%) scale(0.55); } 94.7368421053% {transform: translateX(15%) translateY(8%) scale(0.99); } 100% {transform: translateX(-12%) translateY(49%) scale(0.56); } } .firefly:nth-child(8) {animation-name: move8; } .firefly:nth-child(8)::before {animation-duration: 15s; } .firefly:nth-child(8)::after {animation-duration: 15s, 5164ms; animation-delay: 0ms, 2681ms; } @keyframes move8 {0% {transform: translateX(7%) translateY(27%) scale(0.62); } 4.347826087% {transform: translateX(42%) translateY(-4%) scale(0.79); } 8.6956521739% {transform: translateX(46%) translateY(32%) scale(0.29); } 13.0434782609% {transform: translateX(-6%) translateY(-41%) scale(0.81); } 17.3913043478% {transform: translateX(5%) translateY(-40%) scale(0.87); } 21.7391304348% {transform: translateX(-34%) translateY(-41%) scale(0.5); } 26.0869565217% {transform: translateX(-6%) translateY(-41%) scale(0.73); } 30.4347826087% {transform: translateX(-26%) translateY(-39%) scale(0.35); } 34.7826086957% {transform: translateX(14%) translateY(43%) scale(0.46); } 39.1304347826% {transform: translateX(44%) translateY(-37%) scale(0.52); } 43.4782608696% {transform: translateX(6%) translateY(3%) scale(0.43); } 47.8260869565% {transform: translateX(1%) translateY(32%) scale(0.3); } 52.1739130435% {transform: translateX(-46%) translateY(-26%) scale(0.44); } 56.5217391304% {transform: translateX(-9%) translateY(48%) scale(1); } 60.8695652174% {transform: translateX(26%) translateY(-44%) scale(0.61); } 65.2173913043% {transform: translateX(-37%) translateY(-24%) scale(0.6); } 69.5652173913% {transform: translateX(25%) translateY(16%) scale(0.72); } 73.9130434783% {transform: translateX(41%) translateY(-29%) scale(0.34); } 78.2608695652% {transform: translateX(-15%) translateY(-21%) scale(0.76); } 82.6086956522% {transform: translateX(-6%) translateY(40%) scale(0.34); } 86.9565217391% {transform: translateX(25%) translateY(50%) scale(0.67); } 91.3043478261% {transform: translateX(27%) translateY(-35%) scale(0.77); } 95.652173913% {transform: translateX(31%) translateY(29%) scale(0.92); } 100% {transform: translateX(15%) translateY(-20%) scale(0.88); } } .firefly:nth-child(9) {animation-name: move9; } .firefly:nth-child(9)::before {animation-duration: 14s; } .firefly:nth-child(9)::after {animation-duration: 14s, 9877ms; animation-delay: 0ms, 1444ms; } @keyframes move9 {0% {transform: translateX(-21%) translateY(2%) scale(0.62); } 4.7619047619% {transform: translateX(28%) translateY(29%) scale(0.47); } 9.5238095238% {transform: translateX(4%) translateY(-17%) scale(0.77); } 14.2857142857% {transform: translateX(-49%) translateY(-40%) scale(0.57); } 19.0476190476% {transform: translateX(-46%) translateY(43%) scale(0.67); } 23.8095238095% {transform: translateX(-5%) translateY(-23%) scale(0.3); } 28.5714285714% {transform: translateX(-17%) translateY(32%) scale(0.55); } 33.3333333333% {transform: translateX(-16%) translateY(-26%) scale(0.81); } 38.0952380952% {transform: translateX(-21%) translateY(9%) scale(0.43); } 42.8571428571% {transform: translateX(46%) translateY(26%) scale(0.61); } 47.619047619% {transform: translateX(3%) translateY(-18%) scale(0.85); } 52.380952381% {transform: translateX(-21%) translateY(-8%) scale(0.6); } 57.1428571429% {transform: translateX(46%) translateY(-2%) scale(1); } 61.9047619048% {transform: translateX(49%) translateY(29%) scale(1); } 66.6666666667% {transform: translateX(50%) translateY(15%) scale(0.49); } 71.4285714286% {transform: translateX(-11%) translateY(46%) scale(0.69); } 76.1904761905% {transform: translateX(21%) translateY(38%) scale(0.26); } 80.9523809524% {transform: translateX(42%) translateY(-40%) scale(0.64); } 85.7142857143% {transform: translateX(50%) translateY(25%) scale(0.41); } 90.4761904762% {transform: translateX(28%) translateY(-26%) scale(0.9); } 95.2380952381% {transform: translateX(-3%) translateY(44%) scale(0.73); } 100% {transform: translateX(-45%) translateY(33%) scale(0.35); } } .firefly:nth-child(10) {animation-name: move10; } .firefly:nth-child(10)::before {animation-duration: 10s; } .firefly:nth-child(10)::after {animation-duration: 10s, 5920ms; animation-delay: 0ms, 6154ms; } @keyframes move10 {0% {transform: translateX(-7%) translateY(-16%) scale(0.53); } 4% {transform: translateX(-21%) translateY(-6%) scale(0.92); } 8% {transform: translateX(47%) translateY(-28%) scale(0.41); } 12% {transform: translateX(32%) translateY(10%) scale(0.83); } 16% {transform: translateX(-37%) translateY(-22%) scale(0.66); } 20% {transform: translateX(16%) translateY(21%) scale(0.55); } 24% {transform: translateX(34%) translateY(24%) scale(0.72); } 28% {transform: translateX(21%) translateY(-11%) scale(0.65); } 32% {transform: translateX(-31%) translateY(-31%) scale(0.33); } 36% {transform: translateX(9%) translateY(-28%) scale(0.88); } 40% {transform: translateX(19%) translateY(-16%) scale(0.68); } 44% {transform: translateX(-17%) translateY(7%) scale(0.87); } 48% {transform: translateX(-39%) translateY(-31%) scale(0.87); } 52% {transform: translateX(-1%) translateY(-23%) scale(0.6); } 56% {transform: translateX(-34%) translateY(0%) scale(0.44); } 60% {transform: translateX(-46%) translateY(37%) scale(0.72); } 64% {transform: translateX(0%) translateY(-21%) scale(0.43); } 68% {transform: translateX(0%) translateY(25%) scale(0.51); } 72% {transform: translateX(-8%) translateY(-11%) scale(0.99); } 76% {transform: translateX(-32%) translateY(40%) scale(0.96); } 80% {transform: translateX(41%) translateY(44%) scale(0.54); } 84% {transform: translateX(39%) translateY(43%) scale(0.77); } 88% {transform: translateX(20%) translateY(-14%) scale(0.63); } 92% {transform: translateX(-14%) translateY(-48%) scale(0.4); } 96% {transform: translateX(38%) translateY(-29%) scale(0.86); } 100% {transform: translateX(19%) translateY(15%) scale(0.75); } } .firefly:nth-child(11) {animation-name: move11; } .firefly:nth-child(11)::before {animation-duration: 17s; } .firefly:nth-child(11)::after {animation-duration: 17s, 9674ms; animation-delay: 0ms, 573ms; } @keyframes move11 {0% {transform: translateX(30%) translateY(39%) scale(0.84); } 5% {transform: translateX(9%) translateY(24%) scale(0.97); } 10% {transform: translateX(-2%) translateY(-35%) scale(0.87); } 15% {transform: translateX(-48%) translateY(35%) scale(0.48); } 20% {transform: translateX(37%) translateY(-31%) scale(0.86); } 25% {transform: translateX(35%) translateY(10%) scale(0.42); } 30% {transform: translateX(-32%) translateY(-31%) scale(0.4); } 35% {transform: translateX(-3%) translateY(-6%) scale(0.34); } 40% {transform: translateX(20%) translateY(-46%) scale(0.8); } 45% {transform: translateX(-10%) translateY(40%) scale(0.76); } 50% {transform: translateX(44%) translateY(41%) scale(0.85); } 55% {transform: translateX(18%) translateY(14%) scale(0.62); } 60% {transform: translateX(-32%) translateY(10%) scale(0.92); } 65% {transform: translateX(0%) translateY(47%) scale(0.96); } 70% {transform: translateX(16%) translateY(2%) scale(0.36); } 75% {transform: translateX(-16%) translateY(-41%) scale(0.98); } 80% {transform: translateX(41%) translateY(-41%) scale(1); } 85% {transform: translateX(-46%) translateY(30%) scale(0.6); } 90% {transform: translateX(-38%) translateY(33%) scale(0.95); } 95% {transform: translateX(1%) translateY(-3%) scale(0.61); } 100% {transform: translateX(-29%) translateY(23%) scale(0.87); } } .firefly:nth-child(12) {animation-name: move12; } .firefly:nth-child(12)::before {animation-duration: 16s; } .firefly:nth-child(12)::after {animation-duration: 16s, 5892ms; animation-delay: 0ms, 4790ms; } @keyframes move12 {0% {transform: translateX(29%) translateY(-46%) scale(0.74); } 3.8461538462% {transform: translateX(10%) translateY(11%) scale(0.82); } 7.6923076923% {transform: translateX(-47%) translateY(18%) scale(0.3); } 11.5384615385% {transform: translateX(-4%) translateY(49%) scale(0.91); } 15.3846153846% {transform: translateX(16%) translateY(-48%) scale(0.31); } 19.2307692308% {transform: translateX(35%) translateY(43%) scale(0.88); } 23.0769230769% {transform: translateX(39%) translateY(45%) scale(0.67); } 26.9230769231% {transform: translateX(26%) translateY(27%) scale(0.84); } 30.7692307692% {transform: translateX(-28%) translateY(48%) scale(0.43); } 34.6153846154% {transform: translateX(-39%) translateY(46%) scale(0.56); } 38.4615384615% {transform: translateX(43%) translateY(3%) scale(0.52); } 42.3076923077% {transform: translateX(28%) translateY(33%) scale(0.26); } 46.1538461538% {transform: translateX(46%) translateY(29%) scale(0.71); } 50% {transform: translateX(-48%) translateY(14%) scale(0.37); } 53.8461538462% {transform: translateX(-16%) translateY(-49%) scale(0.89); } 57.6923076923% {transform: translateX(-34%) translateY(-9%) scale(0.26); } 61.5384615385% {transform: translateX(43%) translateY(50%) scale(0.53); } 65.3846153846% {transform: translateX(-12%) translateY(-14%) scale(0.67); } 69.2307692308% {transform: translateX(16%) translateY(-1%) scale(0.79); } 73.0769230769% {transform: translateX(42%) translateY(-34%) scale(0.58); } 76.9230769231% {transform: translateX(-35%) translateY(-38%) scale(0.45); } 80.7692307692% {transform: translateX(5%) translateY(-47%) scale(0.45); } 84.6153846154% {transform: translateX(12%) translateY(-31%) scale(0.28); } 88.4615384615% {transform: translateX(-2%) translateY(-4%) scale(0.97); } 92.3076923077% {transform: translateX(-5%) translateY(-33%) scale(0.38); } 96.1538461538% {transform: translateX(-6%) translateY(12%) scale(0.7); } 100% {transform: translateX(16%) translateY(-38%) scale(0.67); } } .firefly:nth-child(13) {animation-name: move13; } .firefly:nth-child(13)::before {animation-duration: 12s; } .firefly:nth-child(13)::after {animation-duration: 12s, 7902ms; animation-delay: 0ms, 802ms; } @keyframes move13 {0% {transform: translateX(-19%) translateY(-13%) scale(0.74); } 4.7619047619% {transform: translateX(-27%) translateY(-9%) scale(0.9); } 9.5238095238% {transform: translateX(13%) translateY(-2%) scale(0.7); } 14.2857142857% {transform: translateX(-35%) translateY(20%) scale(0.8); } 19.0476190476% {transform: translateX(-33%) translateY(18%) scale(0.93); } 23.8095238095% {transform: translateX(-24%) translateY(10%) scale(0.54); } 28.5714285714% {transform: translateX(47%) translateY(29%) scale(0.85); } 33.3333333333% {transform: translateX(-11%) translateY(7%) scale(0.46); } 38.0952380952% {transform: translateX(-20%) translateY(8%) scale(0.28); } 42.8571428571% {transform: translateX(24%) translateY(9%) scale(0.57); } 47.619047619% {transform: translateX(-1%) translateY(20%) scale(0.61); } 52.380952381% {transform: translateX(31%) translateY(4%) scale(0.34); } 57.1428571429% {transform: translateX(-31%) translateY(-25%) scale(0.78); } 61.9047619048% {transform: translateX(25%) translateY(-34%) scale(0.55); } 66.6666666667% {transform: translateX(-22%) translateY(-36%) scale(0.47); } 71.4285714286% {transform: translateX(1%) translateY(-14%) scale(0.79); } 76.1904761905% {transform: translateX(28%) translateY(39%) scale(0.66); } 80.9523809524% {transform: translateX(27%) translateY(49%) scale(0.92); } 85.7142857143% {transform: translateX(-48%) translateY(-10%) scale(0.81); } 90.4761904762% {transform: translateX(-32%) translateY(25%) scale(0.5); } 95.2380952381% {transform: translateX(33%) translateY(38%) scale(0.63); } 100% {transform: translateX(31%) translateY(2%) scale(0.93); } } .firefly:nth-child(14) {animation-name: move14; } .firefly:nth-child(14)::before {animation-duration: 15s; } .firefly:nth-child(14)::after {animation-duration: 15s, 9625ms; animation-delay: 0ms, 5725ms; } @keyframes move14 {0% {transform: translateX(15%) translateY(-43%) scale(0.32); } 3.7037037037% {transform: translateX(32%) translateY(12%) scale(0.66); } 7.4074074074% {transform: translateX(-37%) translateY(-1%) scale(0.46); } 11.1111111111% {transform: translateX(27%) translateY(-44%) scale(0.35); } 14.8148148148% {transform: translateX(-40%) translateY(-27%) scale(0.31); } 18.5185185185% {transform: translateX(-24%) translateY(-48%) scale(0.84); } 22.2222222222% {transform: translateX(-1%) translateY(22%) scale(0.88); } 25.9259259259% {transform: translateX(-29%) translateY(41%) scale(0.32); } 29.6296296296% {transform: translateX(-43%) translateY(23%) scale(0.98); } 33.3333333333% {transform: translateX(-32%) translateY(-34%) scale(0.87); } 37.037037037% {transform: translateX(-32%) translateY(23%) scale(0.3); } 40.7407407407% {transform: translateX(43%) translateY(47%) scale(0.75); } 44.4444444444% {transform: translateX(27%) translateY(-48%) scale(0.67); } 48.1481481481% {transform: translateX(-8%) translateY(13%) scale(0.89); } 51.8518518519% {transform: translateX(-39%) translateY(27%) scale(0.56); } 55.5555555556% {transform: translateX(-31%) translateY(-30%) scale(0.74); } 59.2592592593% {transform: translateX(4%) translateY(38%) scale(0.35); } 62.962962963% {transform: translateX(47%) translateY(29%) scale(0.28); } 66.6666666667% {transform: translateX(11%) translateY(40%) scale(0.88); } 70.3703703704% {transform: translateX(36%) translateY(-5%) scale(0.38); } 74.0740740741% {transform: translateX(18%) translateY(34%) scale(0.86); } 77.7777777778% {transform: translateX(10%) translateY(6%) scale(0.66); } 81.4814814815% {transform: translateX(33%) translateY(19%) scale(0.78); } 85.1851851852% {transform: translateX(-45%) translateY(-30%) scale(0.95); } 88.8888888889% {transform: translateX(-39%) translateY(-46%) scale(0.81); } 92.5925925926% {transform: translateX(-10%) translateY(27%) scale(0.7); } 96.2962962963% {transform: translateX(-7%) translateY(10%) scale(0.65); } 100% {transform: translateX(-17%) translateY(34%) scale(0.32); } } .firefly:nth-child(15) {animation-name: move15; } .firefly:nth-child(15)::before {animation-duration: 9s; } .firefly:nth-child(15)::after {animation-duration: 9s, 9235ms; animation-delay: 0ms, 6426ms; } @keyframes move15 {0% {transform: translateX(-9%) translateY(-40%) scale(0.68); } 3.7037037037% {transform: translateX(28%) translateY(34%) scale(0.61); } 7.4074074074% {transform: translateX(3%) translateY(31%) scale(0.6); } 11.1111111111% {transform: translateX(40%) translateY(26%) scale(0.3); } 14.8148148148% {transform: translateX(42%) translateY(39%) scale(0.35); } 18.5185185185% {transform: translateX(-21%) translateY(-7%) scale(0.53); } 22.2222222222% {transform: translateX(-7%) translateY(42%) scale(0.93); } 25.9259259259% {transform: translateX(-48%) translateY(-7%) scale(0.66); } 29.6296296296% {transform: translateX(17%) translateY(43%) scale(0.31); } 33.3333333333% {transform: translateX(-49%) translateY(-35%) scale(0.41); } 37.037037037% {transform: translateX(-2%) translateY(28%) scale(0.98); } 40.7407407407% {transform: translateX(21%) translateY(14%) scale(0.59); } 44.4444444444% {transform: translateX(-39%) translateY(42%) scale(0.47); } 48.1481481481% {transform: translateX(27%) translateY(-13%) scale(0.79); } 51.8518518519% {transform: translateX(-21%) translateY(-14%) scale(0.72); } 55.5555555556% {transform: translateX(-32%) translateY(42%) scale(0.38); } 59.2592592593% {transform: translateX(23%) translateY(-25%) scale(0.89); } 62.962962963% {transform: translateX(7%) translateY(-22%) scale(0.42); } 66.6666666667% {transform: translateX(-17%) translateY(32%) scale(0.86); } 70.3703703704% {transform: translateX(-49%) translateY(-49%) scale(0.78); } 74.0740740741% {transform: translateX(-28%) translateY(22%) scale(0.3); } 77.7777777778% {transform: translateX(30%) translateY(-14%) scale(0.89); } 81.4814814815% {transform: translateX(36%) translateY(26%) scale(0.72); } 85.1851851852% {transform: translateX(13%) translateY(-47%) scale(0.64); } 88.8888888889% {transform: translateX(-4%) translateY(25%) scale(0.32); } 92.5925925926% {transform: translateX(30%) translateY(1%) scale(0.76); } 96.2962962963% {transform: translateX(-35%) translateY(48%) scale(0.38); } 100% {transform: translateX(-18%) translateY(-16%) scale(0.8); } } @keyframes drift {0% {transform: rotate(0deg); } 100% {transform: rotate(360deg); } } @keyframes flash {0%, 30%, 100% {opacity: 0; box-shadow: 0 0 0% 0% yellow; } 5% {opacity: 1; box-shadow: 0 0 2% 0.4% yellow; } } /*radials*/ .colourOverlay.radialLights { opacity: 1; z-index: -10; } .radialLights { margin: 0; height: 100vh; font-weight: 100; background: radial-gradient(#000,#000); -webkit-overflow-Y: hidden; -moz-overflow-Y: hidden; -o-overflow-Y: hidden; overflow-y: hidden; -webkit-animation: fadeIn 1 1s ease-out; -moz-animation: fadeIn 1 1s ease-out; -o-animation: fadeIn 1 1s ease-out; animation: fadeIn 1 1s ease-out; } .light { position: absolute; width: 0px; opacity: .75; background-color: white; box-shadow: #e9f1f1 10px 10px 20px 2px; opacity: 0; top: 100vh; bottom: 0px; left: 0px; right: 0px; margin: auto; } .x1{ -webkit-animation: floatUp 4s infinite linear; -moz-animation: floatUp 4s infinite linear; -o-animation: floatUp 4s infinite linear; animation: floatUp 4s infinite linear; -webkit-transform: scale(1.0); -moz-transform: scale(1.0); -o-transform: scale(1.0); transform: scale(1.0); } .x2{ -webkit-animation: floatUp 7s infinite linear; -moz-animation: floatUp 7s infinite linear; -o-animation: floatUp 7s infinite linear; animation: floatUp 7s infinite linear; -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.6); left: 15%; } .x3{ -webkit-animation: floatUp 2.5s infinite linear; -moz-animation: floatUp 2.5s infinite linear; -o-animation: floatUp 2.5s infinite linear; animation: floatUp 2.5s infinite linear; -webkit-transform: scale(.5); -moz-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5); left: -15%; } .x4{ -webkit-animation: floatUp 4.5s infinite linear; -moz-animation: floatUp 4.5s infinite linear; -o-animation: floatUp 4.5s infinite linear; animation: floatUp 4.5s infinite linear; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); left: -34%; } .x5{ -webkit-animation: floatUp 8s infinite linear; -moz-animation: floatUp 8s infinite linear; -o-animation: floatUp 8s infinite linear; animation: floatUp 8s infinite linear; -webkit-transform: scale(2.2); -moz-transform: scale(2.2); -o-transform: scale(2.2); transform: scale(2.2); left: -57%; } .x6{ -webkit-animation: floatUp 3s infinite linear; -moz-animation: floatUp 3s infinite linear; -o-animation: floatUp 3s infinite linear; animation: floatUp 3s infinite linear; -webkit-transform: scale(.8); -moz-transform: scale(.8); -o-transform: scale(.8); transform: scale(.8); left: -81%; } .x7{ -webkit-animation: floatUp 5.3s infinite linear; -moz-animation: floatUp 5.3s infinite linear; -o-animation: floatUp 5.3s infinite linear; animation: floatUp 5.3s infinite linear; -webkit-transform: scale(3.2); -moz-transform: scale(3.2); -o-transform: scale(3.2); transform: scale(3.2); left: 37%; } .x8{ -webkit-animation: floatUp 4.7s infinite linear; -moz-animation: floatUp 4.7s infinite linear; -o-animation: floatUp 4.7s infinite linear; animation: floatUp 4.7s infinite linear; -webkit-transform: scale(1.7); -moz-transform: scale(1.7); -o-transform: scale(1.7); transform: scale(1.7); left: 62%; } .x9{ -webkit-animation: floatUp 4.1s infinite linear; -moz-animation: floatUp 4.1s infinite linear; -o-animation: floatUp 4.1s infinite linear; animation: floatUp 4.1s infinite linear; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); left: 85%; } button:focus{ outline: none; } @-webkit-keyframes floatUp{ 0%{top: 100vh; opacity: 0;} 25%{opacity: 1;} 50%{top: 0vh; opacity: .8;} 75%{opacity: 1;} 100%{top: -100vh; opacity: 0;} } @-moz-keyframes floatUp{ 0%{top: 100vh; opacity: 0;} 25%{opacity: 1;} 50%{top: 0vh; opacity: .8;} 75%{opacity: 1;} 100%{top: -100vh; opacity: 0;} } @-o-keyframes floatUp{ 0%{top: 100vh; opacity: 0;} 25%{opacity: 1;} 50%{top: 0vh; opacity: .8;} 75%{opacity: 1;} 100%{top: -100vh; opacity: 0;} } @keyframes floatUp{ 0%{top: 100vh; opacity: 0;} 25%{opacity: 1;} 50%{top: 0vh; opacity: .8;} 75%{opacity: 1;} 100%{top: -100vh; opacity: 0;} } #head1, #head2,#head3, #head4, #head5{ opacity: 0; } #head1{ -webkit-animation: fadeOut 1 5s ease-in; -moz-animation: fadeOut 1 5s ease-in; -o-animation: fadeOut 1 5s ease-in; animation: fadeOut 1 5s ease-in; } #head2{ -webkit-animation: fadeOut 1 5s ease-in; -moz-animation: fadeOut 1 5s ease-in; -o-animation: fadeOut 1 5s ease-in; animation: fadeOut 1 5s ease-in; -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; animation-delay: 6s; } #head3{ -webkit-animation: fadeOut 1 5s ease-in; -moz-animation: fadeOut 1 5s ease-in; -o-animation: fadeOut 1 5s ease-in; animation: fadeOut 1 5s ease-in; -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; animation-delay: 12s; } #head4{ -webkit-animation: fadeOut 1 5s ease-in; -moz-animation: fadeOut 1 5s ease-in; -o-animation: fadeOut 1 5s ease-in; animation: fadeOut 1 5s ease-in; -webkit-animation-delay: 17s; -moz-animation-delay: 17s; -o-animation-delay: 17s; animation-delay: 17s; } #head5{ -webkit-animation: finalFade 1 5s ease-in; -moz-animation: finalFade 1 5s ease-in; -o-animation: finalFade 1 5s ease-in; animation: finalFade 1 5s ease-in; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: 22s; -moz-animation-delay: 22s; -o-animation-delay: 22s; animation-delay: 22s; } @-webkit-keyframes fadeIn{ from{opacity: 0;} to{opacity: 1;} } @-moz-keyframes fadeIn{ from{opacity: 0;} to{opacity: 1;} } @-o-keyframes fadeIn{ from{opacity: 0;} to{opacity: 1;} } @keyframes fadeIn{ from{opacity: 0;} to{opacity: 1;} } @-webkit-keyframes fadeOut{ 0%{opacity: 0;} 30%{opacity: 1;} 80%{opacity: .9;} 100%{opacity: 0;} } @-moz-keyframes fadeOut{ 0%{opacity: 0;} 30%{opacity: 1;} 80%{opacity: .9;} 100%{opacity: 0;} } @-o-keyframes fadeOut{ 0%{opacity: 0;} 30%{opacity: 1;} 80%{opacity: .9;} 100%{opacity: 0;} } @keyframes fadeOut{ 0%{opacity: 0;} 30%{opacity: 1;} 80%{opacity: .9;} 100%{opacity: 0;} } @-webkit-keyframes finalFade{ 0%{opacity: 0;} 30%{opacity: 1;} 80%{opacity: .9;} 100%{opacity: 1;} } @-moz-keyframes finalFade{ 0%{opacity: 0;} 30%{opacity: 1;} 80%{opacity: .9;} 100%{opacity: 1;} } @-o-keyframes finalFade{ 0%{opacity: 0;} 30%{opacity: 1;} 80%{opacity: .9;} 100%{opacity: 1;} } @keyframes finalFade{ 0%{opacity: 0;} 30%{opacity: 1;} 80%{opacity: .9;} 100%{opacity: 1;} } .colourOverlay.eightiesGame { z-index: -10; } .eightiesGame { width: 100%; height: 100%; position: absolute; margin: 0 auto; perspective: 360px; perspective-origin: 50% 50%; } .top-plane, .bottom-plane { width: 200%; height: 130%; position: absolute; bottom: -30%; left: -50%; background-image: -webkit-linear-gradient(#a2cef4 2px, transparent 2px), -webkit-linear-gradient(left, #a2cef4 2px, transparent 2px); background-size: 100px 100px,100px 100px; background-position: -1px -1px,-1px -1px; transform: rotateX(85deg); animation: planeMoveTop 2s infinite linear; } .bottom-plane { transform: rotateX(-85deg); top: -30%; animation: planeMoveBot 2s infinite linear; } @keyframes planeMoveTop { from { background-position: 0px -100px,0px 0px; } to { background-position: 0px 0px, 100px 0px; } } @keyframes planeMoveBot { from { background-position: 0px 0px,0px 0px; } to { background-position: 0px -100px, 100px 0px; } } @media (max-height: 350px) { .eightiesGame { perspective: 210px; } } /*canvas background shit*/ #gradient-canvasBeautiful { width: 100%; height: 100%; --gradient-color-1: #725adb; --gradient-color-2: #470654; --gradient-color-3: #1b141c; --gradient-color-4: #000000; z-index: -10; } #gradient-canvasSad { width: 100%; height: 100%; --gradient-color-1: #9c9c9c; --gradient-color-2: #7d5959; --gradient-color-3: #314f49; --gradient-color-4: #424242; z-index: -10; } /* the grid rotating */ @-webkit-keyframes rotating4ever /* Safari and Chrome */ { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotating4ever { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotating4ever { animation: rotating4ever 20s linear infinite reverse; } #highScore { position: absolute; top:280px; left: 300px; } .hsBox { margin-top: 0px; } .hsBox div { display: inline-block; width:45%; padding: 5px 10px; } .hsName { text-align:left; } .hsScore { text-align:right; }