Skip to content

Instantly share code, notes, and snippets.

@williamromero

williamromero/Disco-lights-on-flying-cube.markdown

Forked from anonymous/Disco-lights-on-flying-cube.markdown
Created April 7, 2014 05:15
Show Gist options
  • Save williamromero/10015165 to your computer and use it in GitHub Desktop.
Save williamromero/10015165 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Disco-lights-on-flying-cube.markdown

Disco lights on flying cube

Made with shadows, animations and transforms. Wow...

A Pen by yoksel on CodePen.

License.

Raw
index.html
<div class="container">
<div class="back side"><span class='dot'></span></div>
<div class="left side"><span class='dot'></span></div>
<div class="right side"><span class='dot'></span></div>
<div class="top side"><span class='dot'></span></div>
<div class="bottom side"><span class='dot'></span></div>
<div class="front side"><span class='dot'></span></div>
</div>
Raw
style.scss
@import "compass";
$side: 26em;
$side-small: 25em;
HTML, BODY {
height: 100%;
overflow: hidden;
}
BODY {
background: #000;
perspective: 500px;
perspective-origin: center center;
font-size: 10px;
}
.container {
position: absolute;
top: -1em;
bottom: -1em;
left: -1em;
right: -1em;
margin: auto;
width: $side;
height: $side;
transform-style: preserve-3d;
//opacity: .7;
animation: rotate 15s infinite linear;
}
.side {
position: absolute;
width: $side-small;
height: $side-small;
overflow: hidden;
}
.back {
transform: translateZ(-$side/2);
}
.front {
transform: translateZ($side/2);
}
.top {
transform: translateY(-$side/2) rotateX(90deg);
}
.bottom {
transform: translateY($side/2) rotateX(90deg);
}
.left {
transform: translateX(-$side/2) rotateY(90deg);
}
.right {
transform: translateX($side/2) rotateY(90deg);
}
@keyframes rotate {
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.dot {
display: block;
position: absolute;
width: 10px;
height: 10px;
top: -20px;
left: -20px;
border-radius: 50%;
-webkit-animation: 3s shadows linear infinite;
animation: 3s shadows linear infinite;
box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 25px 0 0 rgba(255,255,255,0), 0px 50px 0 0 rgba(255,255,255,0), 0px 75px 0 0 rgba(255,255,255,0), 0px 100px 0 0 rgba(255,255,255,0), 0px 125px 0 0 rgba(255,255,255,0), 0px 150px 0 0 rgba(255,255,255,0), 0px 175px 0 0 rgba(255,255,255,0), 0px 200px 0 0 rgba(255,255,255,0), 0px 225px 0 0 rgba(255,255,255,0), 0px 250px 0 0 rgba(255,255,255,0), 25px 0px 0 0 rgba(255,255,255,0), 25px 25px 0 0 #3FB8AF, 25px 50px 0 0 #FFF0A5, 25px 75px 0 0 #FF2D00, 25px 100px 0 0 #FF974F, 25px 125px 0 0 #D1DBBD, 25px 150px 0 0 #004358, 25px 175px 0 0 #FFE11A, 25px 200px 0 0 #FF2D00, 25px 225px 0 0 #FF974F, 25px 250px 0 0 #B5E655, 50px 0px 0 0 rgba(255,255,255,0), 50px 25px 0 0 #FF2D00, 50px 50px 0 0 #96CA2D, 50px 75px 0 0 #EDF7F2, 50px 100px 0 0 #FFF0A5, 50px 125px 0 0 #FFE11A, 50px 150px 0 0 #FF9E9D, 50px 175px 0 0 #96CA2D, 50px 200px 0 0 #04756F, 50px 225px 0 0 #D1DBBD, 50px 250px 0 0 #3FB8AF, 75px 0px 0 0 rgba(255,255,255,0), 75px 25px 0 0 #FFE11A, 75px 50px 0 0 #D1DBBD, 75px 75px 0 0 #3FB8AF, 75px 100px 0 0 #FF9E9D, 75px 125px 0 0 #4BB5C1, 75px 150px 0 0 #FF974F, 75px 175px 0 0 #FF2D00, 75px 200px 0 0 #FFE11A, 75px 225px 0 0 #004358, 75px 250px 0 0 #EDF7F2, 100px 0px 0 0 rgba(255,255,255,0), 100px 25px 0 0 #004358, 100px 50px 0 0 #FF9E9D, 100px 75px 0 0 #04756F, 100px 100px 0 0 #FFE11A, 100px 125px 0 0 #004358, 100px 150px 0 0 #FFF0A5, 100px 175px 0 0 #004358, 100px 200px 0 0 #FF2D00, 100px 225px 0 0 #FFE11A, 100px 250px 0 0 #96CA2D, 125px 0px 0 0 rgba(255,255,255,0), 125px 25px 0 0 #FF974F, 125px 50px 0 0 #D1DBBD, 125px 75px 0 0 #96CA2D, 125px 100px 0 0 #FFF0A5, 125px 125px 0 0 #04756F, 125px 150px 0 0 #FF974F, 125px 175px 0 0 #4BB5C1, 125px 200px 0 0 #3FB8AF, 125px 225px 0 0 #FFF0A5, 125px 250px 0 0 #04756F, 150px 0px 0 0 rgba(255,255,255,0), 150px 25px 0 0 #004358, 150px 50px 0 0 #EDF7F2, 150px 75px 0 0 #FF9E9D, 150px 100px 0 0 #B5E655, 150px 125px 0 0 #FFE11A, 150px 150px 0 0 #FF9E9D, 150px 175px 0 0 #96CA2D, 150px 200px 0 0 #FFF0A5, 150px 225px 0 0 #D1DBBD, 150px 250px 0 0 #96CA2D, 175px 0px 0 0 rgba(255,255,255,0), 175px 25px 0 0 #04756F, 175px 50px 0 0 #FF974F, 175px 75px 0 0 #4BB5C1, 175px 100px 0 0 #004358, 175px 125px 0 0 #3FB8AF, 175px 150px 0 0 #004358, 175px 175px 0 0 #D1DBBD, 175px 200px 0 0 #4BB5C1, 175px 225px 0 0 #FF2D00, 175px 250px 0 0 #004358, 200px 0px 0 0 rgba(255,255,255,0), 200px 25px 0 0 #FFE11A, 200px 50px 0 0 #FF2D00, 200px 75px 0 0 #96CA2D, 200px 100px 0 0 #FF2D00, 200px 125px 0 0 #FFF0A5, 200px 150px 0 0 #4BB5C1, 200px 175px 0 0 #FF9E9D, 200px 200px 0 0 #96CA2D, 200px 225px 0 0 #FFF0A5, 200px 250px 0 0 #FF9E9D, 225px 0px 0 0 rgba(255,255,255,0), 225px 25px 0 0 #D90000, 225px 50px 0 0 #FFF0A5, 225px 75px 0 0 #3FB8AF, 225px 100px 0 0 #FF9E9D, 225px 125px 0 0 #004358, 225px 150px 0 0 #FF974F, 225px 175px 0 0 #D90000, 225px 200px 0 0 #D1DBBD, 225px 225px 0 0 #EDF7F2, 225px 250px 0 0 #FF974F, 250px 0px 0 0 rgba(255,255,255,0), 250px 25px 0 0 #96CA2D, 250px 50px 0 0 #D1DBBD, 250px 75px 0 0 #FFF0A5, 250px 100px 0 0 #D1DBBD, 250px 125px 0 0 #FF2D00, 250px 150px 0 0 #FFF0A5, 250px 175px 0 0 #4BB5C1, 250px 200px 0 0 #FFE11A, 250px 225px 0 0 #FF2D00, 250px 250px 0 0 #4BB5C1;
}
/* Keyframes */
@-webkit-keyframes shadows {
0% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 25px 0 0 rgba(255,255,255,0), 0px 50px 0 0 rgba(255,255,255,0), 0px 75px 0 0 rgba(255,255,255,0), 0px 100px 0 0 rgba(255,255,255,0), 0px 125px 0 0 rgba(255,255,255,0), 0px 150px 0 0 rgba(255,255,255,0), 0px 175px 0 0 rgba(255,255,255,0), 0px 200px 0 0 rgba(255,255,255,0), 0px 225px 0 0 rgba(255,255,255,0), 0px 250px 0 0 rgba(255,255,255,0), 25px 0px 0 0 rgba(255,255,255,0), 25px 25px 0 0 #3FB8AF, 25px 50px 0 0 #FFF0A5, 25px 75px 0 0 #FF2D00, 25px 100px 0 0 #FF974F, 25px 125px 0 0 #D1DBBD, 25px 150px 0 0 #004358, 25px 175px 0 0 #FFE11A, 25px 200px 0 0 #FF2D00, 25px 225px 0 0 #FF974F, 25px 250px 0 0 #B5E655, 50px 0px 0 0 rgba(255,255,255,0), 50px 25px 0 0 #FF2D00, 50px 50px 0 0 #96CA2D, 50px 75px 0 0 #EDF7F2, 50px 100px 0 0 #FFF0A5, 50px 125px 0 0 #FFE11A, 50px 150px 0 0 #FF9E9D, 50px 175px 0 0 #96CA2D, 50px 200px 0 0 #04756F, 50px 225px 0 0 #D1DBBD, 50px 250px 0 0 #3FB8AF, 75px 0px 0 0 rgba(255,255,255,0), 75px 25px 0 0 #FFE11A, 75px 50px 0 0 #D1DBBD, 75px 75px 0 0 #3FB8AF, 75px 100px 0 0 #FF9E9D, 75px 125px 0 0 #4BB5C1, 75px 150px 0 0 #FF974F, 75px 175px 0 0 #FF2D00, 75px 200px 0 0 #FFE11A, 75px 225px 0 0 #004358, 75px 250px 0 0 #EDF7F2, 100px 0px 0 0 rgba(255,255,255,0), 100px 25px 0 0 #004358, 100px 50px 0 0 #FF9E9D, 100px 75px 0 0 #04756F, 100px 100px 0 0 #FFE11A, 100px 125px 0 0 #004358, 100px 150px 0 0 #FFF0A5, 100px 175px 0 0 #004358, 100px 200px 0 0 #FF2D00, 100px 225px 0 0 #FFE11A, 100px 250px 0 0 #96CA2D, 125px 0px 0 0 rgba(255,255,255,0), 125px 25px 0 0 #FF974F, 125px 50px 0 0 #D1DBBD, 125px 75px 0 0 #96CA2D, 125px 100px 0 0 #FFF0A5, 125px 125px 0 0 #04756F, 125px 150px 0 0 #FF974F, 125px 175px 0 0 #4BB5C1, 125px 200px 0 0 #3FB8AF, 125px 225px 0 0 #FFF0A5, 125px 250px 0 0 #04756F, 150px 0px 0 0 rgba(255,255,255,0), 150px 25px 0 0 #004358, 150px 50px 0 0 #EDF7F2, 150px 75px 0 0 #FF9E9D, 150px 100px 0 0 #B5E655, 150px 125px 0 0 #FFE11A, 150px 150px 0 0 #FF9E9D, 150px 175px 0 0 #96CA2D, 150px 200px 0 0 #FFF0A5, 150px 225px 0 0 #D1DBBD, 150px 250px 0 0 #96CA2D, 175px 0px 0 0 rgba(255,255,255,0), 175px 25px 0 0 #04756F, 175px 50px 0 0 #FF974F, 175px 75px 0 0 #4BB5C1, 175px 100px 0 0 #004358, 175px 125px 0 0 #3FB8AF, 175px 150px 0 0 #004358, 175px 175px 0 0 #D1DBBD, 175px 200px 0 0 #4BB5C1, 175px 225px 0 0 #FF2D00, 175px 250px 0 0 #004358, 200px 0px 0 0 rgba(255,255,255,0), 200px 25px 0 0 #FFE11A, 200px 50px 0 0 #FF2D00, 200px 75px 0 0 #96CA2D, 200px 100px 0 0 #FF2D00, 200px 125px 0 0 #FFF0A5, 200px 150px 0 0 #4BB5C1, 200px 175px 0 0 #FF9E9D, 200px 200px 0 0 #96CA2D, 200px 225px 0 0 #FFF0A5, 200px 250px 0 0 #FF9E9D, 225px 0px 0 0 rgba(255,255,255,0), 225px 25px 0 0 #D90000, 225px 50px 0 0 #FFF0A5, 225px 75px 0 0 #3FB8AF, 225px 100px 0 0 #FF9E9D, 225px 125px 0 0 #004358, 225px 150px 0 0 #FF974F, 225px 175px 0 0 #D90000, 225px 200px 0 0 #D1DBBD, 225px 225px 0 0 #EDF7F2, 225px 250px 0 0 #FF974F, 250px 0px 0 0 rgba(255,255,255,0), 250px 25px 0 0 #96CA2D, 250px 50px 0 0 #D1DBBD, 250px 75px 0 0 #FFF0A5, 250px 100px 0 0 #D1DBBD, 250px 125px 0 0 #FF2D00, 250px 150px 0 0 #FFF0A5, 250px 175px 0 0 #4BB5C1, 250px 200px 0 0 #FFE11A, 250px 225px 0 0 #FF2D00, 250px 250px 0 0 #4BB5C1;}
20% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 25px 0 0 rgba(255,255,255,0), 0px 50px 0 0 rgba(255,255,255,0), 0px 75px 0 0 rgba(255,255,255,0), 0px 100px 0 0 rgba(255,255,255,0), 0px 125px 0 0 rgba(255,255,255,0), 0px 150px 0 0 rgba(255,255,255,0), 0px 175px 0 0 rgba(255,255,255,0), 0px 200px 0 0 rgba(255,255,255,0), 0px 225px 0 0 rgba(255,255,255,0), 0px 250px 0 0 rgba(255,255,255,0), 25px 0px 0 0 rgba(255,255,255,0), 25px 25px 0 0 #B5E655, 25px 50px 0 0 #FD7400, 25px 75px 0 0 #96CA2D, 25px 100px 0 0 #1F8A70, 25px 125px 0 0 #FF9E9D, 25px 150px 0 0 #3FB8AF, 25px 175px 0 0 #FF974F, 25px 200px 0 0 #004358, 25px 225px 0 0 #FFE11A, 25px 250px 0 0 #FF9E9D, 50px 0px 0 0 rgba(255,255,255,0), 50px 25px 0 0 #FF9E9D, 50px 50px 0 0 #3FB8AF, 50px 75px 0 0 #004358, 50px 100px 0 0 #3FB8AF, 50px 125px 0 0 #FFE11A, 50px 150px 0 0 #FD7400, 50px 175px 0 0 #FF3D7F, 50px 200px 0 0 #FFF0A5, 50px 225px 0 0 #96CA2D, 50px 250px 0 0 #1F8A70, 75px 0px 0 0 rgba(255,255,255,0), 75px 25px 0 0 #FF974F, 75px 50px 0 0 #FFF0A5, 75px 75px 0 0 #FD7400, 75px 100px 0 0 #96CA2D, 75px 125px 0 0 #FFF0A5, 75px 150px 0 0 #FFB03B, 75px 175px 0 0 #D1DBBD, 75px 200px 0 0 #FF974F, 75px 225px 0 0 #FFE11A, 75px 250px 0 0 #FD7400, 100px 0px 0 0 rgba(255,255,255,0), 100px 25px 0 0 #1F8A70, 100px 50px 0 0 #BEDB39, 100px 75px 0 0 #FF9E9D, 100px 100px 0 0 #FF3D7F, 100px 125px 0 0 #B5E655, 100px 150px 0 0 #3FB8AF, 100px 175px 0 0 #FFE11A, 100px 200px 0 0 #D1DBBD, 100px 225px 0 0 #1F8A70, 100px 250px 0 0 #B5E655, 125px 0px 0 0 rgba(255,255,255,0), 125px 25px 0 0 #FD7400, 125px 50px 0 0 #FFE11A, 125px 75px 0 0 #FFB03B, 125px 100px 0 0 #FF974F, 125px 125px 0 0 #FF2D00, 125px 150px 0 0 #FFE11A, 125px 175px 0 0 #FF2D00, 125px 200px 0 0 #B5E655, 125px 225px 0 0 #FFE11A, 125px 250px 0 0 #FF9E9D, 150px 0px 0 0 rgba(255,255,255,0), 150px 25px 0 0 #FFF0A5, 150px 50px 0 0 #3FB8AF, 150px 75px 0 0 #004358, 150px 100px 0 0 #FFF0A5, 150px 125px 0 0 #96CA2D, 150px 150px 0 0 #468966, 150px 175px 0 0 #DAD8A7, 150px 200px 0 0 #004358, 150px 225px 0 0 #FF2D00, 150px 250px 0 0 #FF974F, 175px 0px 0 0 rgba(255,255,255,0), 175px 25px 0 0 #FFE11A, 175px 50px 0 0 #FFB03B, 175px 75px 0 0 #FF9E9D, 175px 100px 0 0 #B5E655, 175px 125px 0 0 #FFB03B, 175px 150px 0 0 #FFF0A5, 175px 175px 0 0 #3FB8AF, 175px 200px 0 0 #FF974F, 175px 225px 0 0 #FFF0A5, 175px 250px 0 0 #468966, 200px 0px 0 0 rgba(255,255,255,0), 200px 25px 0 0 #96CA2D, 200px 50px 0 0 #FFF0A5, 200px 75px 0 0 #FF2D00, 200px 100px 0 0 #FFE11A, 200px 125px 0 0 #004358, 200px 150px 0 0 #FF9E9D, 200px 175px 0 0 #1F8A70, 200px 200px 0 0 #DAD8A7, 200px 225px 0 0 #004358, 200px 250px 0 0 #3FB8AF, 225px 0px 0 0 rgba(255,255,255,0), 225px 25px 0 0 #D1DBBD, 225px 50px 0 0 #004358, 225px 75px 0 0 #FD7400, 225px 100px 0 0 #FFB03B, 225px 125px 0 0 #FFE11A, 225px 150px 0 0 #FFB03B, 225px 175px 0 0 #D1DBBD, 225px 200px 0 0 #FF974F, 225px 225px 0 0 #FF2D00, 225px 250px 0 0 #FFF0A5, 250px 0px 0 0 rgba(255,255,255,0), 250px 25px 0 0 #FF974F, 250px 50px 0 0 #1F8A70, 250px 75px 0 0 #3FB8AF, 250px 100px 0 0 #004358, 250px 125px 0 0 #FFB03B, 250px 150px 0 0 #B5E655, 250px 175px 0 0 #96CA2D, 250px 200px 0 0 #468966, 250px 225px 0 0 #B5E655, 250px 250px 0 0 #FFE11A;}
40% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 25px 0 0 rgba(255,255,255,0), 0px 50px 0 0 rgba(255,255,255,0), 0px 75px 0 0 rgba(255,255,255,0), 0px 100px 0 0 rgba(255,255,255,0), 0px 125px 0 0 rgba(255,255,255,0), 0px 150px 0 0 rgba(255,255,255,0), 0px 175px 0 0 rgba(255,255,255,0), 0px 200px 0 0 rgba(255,255,255,0), 0px 225px 0 0 rgba(255,255,255,0), 0px 250px 0 0 rgba(255,255,255,0), 25px 0px 0 0 rgba(255,255,255,0), 25px 25px 0 0 #96CA2D, 25px 50px 0 0 #FF2D00, 25px 75px 0 0 #FF8C00, 25px 100px 0 0 #004358, 25px 125px 0 0 #96CA2D, 25px 150px 0 0 #FFE11A, 25px 175px 0 0 #FD7400, 25px 200px 0 0 #FFE11A, 25px 225px 0 0 #FF9E9D, 25px 250px 0 0 #FFF0A5, 50px 0px 0 0 rgba(255,255,255,0), 50px 25px 0 0 #FFE11A, 50px 50px 0 0 #1F8A70, 50px 75px 0 0 #BEDB39, 50px 100px 0 0 #3FB8AF, 50px 125px 0 0 #FF3D7F, 50px 150px 0 0 #FF2D00, 50px 175px 0 0 #004358, 50px 200px 0 0 #D1DBBD, 50px 225px 0 0 #BEDB39, 50px 250px 0 0 #FF8C00, 75px 0px 0 0 rgba(255,255,255,0), 75px 25px 0 0 #FD7400, 75px 50px 0 0 #FF9E9D, 75px 75px 0 0 #FF2D00, 75px 100px 0 0 #FFE11A, 75px 125px 0 0 #1F8A70, 75px 150px 0 0 #3FB8AF, 75px 175px 0 0 #FF3D7F, 75px 200px 0 0 #1F8A70, 75px 225px 0 0 #FFF0A5, 75px 250px 0 0 #FFE11A, 100px 0px 0 0 rgba(255,255,255,0), 100px 25px 0 0 #FFF0A5, 100px 50px 0 0 #3FB8AF, 100px 75px 0 0 #96CA2D, 100px 100px 0 0 #FFF0A5, 100px 125px 0 0 #FFE11A, 100px 150px 0 0 #BEDB39, 100px 175px 0 0 #FD7400, 100px 200px 0 0 #3FB8AF, 100px 225px 0 0 #D1DBBD, 100px 250px 0 0 #96CA2D, 125px 0px 0 0 rgba(255,255,255,0), 125px 25px 0 0 #004358, 125px 50px 0 0 #FF8C00, 125px 75px 0 0 #FF9E9D, 125px 100px 0 0 #FD7400, 125px 125px 0 0 #004358, 125px 150px 0 0 #FF8C00, 125px 175px 0 0 #FF9E9D, 125px 200px 0 0 #96CA2D, 125px 225px 0 0 #FF3D7F, 125px 250px 0 0 #1F8A70, 150px 0px 0 0 rgba(255,255,255,0), 150px 25px 0 0 #96CA2D, 150px 50px 0 0 #1F8A70, 150px 75px 0 0 #BEDB39, 150px 100px 0 0 #FFE11A, 150px 125px 0 0 #BEDB39, 150px 150px 0 0 #1F8A70, 150px 175px 0 0 #FFE11A, 150px 200px 0 0 #BEDB39, 150px 225px 0 0 #004358, 150px 250px 0 0 #FFE11A, 175px 0px 0 0 rgba(255,255,255,0), 175px 25px 0 0 #FFE11A, 175px 50px 0 0 #D1DBBD, 175px 75px 0 0 #FFF0A5, 175px 100px 0 0 #FF8C00, 175px 125px 0 0 #3FB8AF, 175px 150px 0 0 #D1DBBD, 175px 175px 0 0 #3FB8AF, 175px 200px 0 0 #FFE11A, 175px 225px 0 0 #3FB8AF, 175px 250px 0 0 #96CA2D, 200px 0px 0 0 rgba(255,255,255,0), 200px 25px 0 0 #FD7400, 200px 50px 0 0 #3FB8AF, 200px 75px 0 0 #FF9E9D, 200px 100px 0 0 #B64926, 200px 125px 0 0 #1F8A70, 200px 150px 0 0 #96CA2D, 200px 175px 0 0 #004358, 200px 200px 0 0 #FFF0A5, 200px 225px 0 0 #FFE11A, 200px 250px 0 0 #3FB8AF, 225px 0px 0 0 rgba(255,255,255,0), 225px 25px 0 0 #FF9E9D, 225px 50px 0 0 #FFE11A, 225px 75px 0 0 #FF2D00, 225px 100px 0 0 #96CA2D, 225px 125px 0 0 #FF2D00, 225px 150px 0 0 #FF8C00, 225px 175px 0 0 #FF2D00, 225px 200px 0 0 #1F8A70, 225px 225px 0 0 #D1DBBD, 225px 250px 0 0 #004358, 250px 0px 0 0 rgba(255,255,255,0), 250px 25px 0 0 #BEDB39, 250px 50px 0 0 #FF9E9D, 250px 75px 0 0 #FF8C00, 250px 100px 0 0 #1F8A70, 250px 125px 0 0 #004358, 250px 150px 0 0 #FF2D00, 250px 175px 0 0 #BEDB39, 250px 200px 0 0 #2E0927, 250px 225px 0 0 #FF2D00, 250px 250px 0 0 #FD7400;}
60% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 25px 0 0 rgba(255,255,255,0), 0px 50px 0 0 rgba(255,255,255,0), 0px 75px 0 0 rgba(255,255,255,0), 0px 100px 0 0 rgba(255,255,255,0), 0px 125px 0 0 rgba(255,255,255,0), 0px 150px 0 0 rgba(255,255,255,0), 0px 175px 0 0 rgba(255,255,255,0), 0px 200px 0 0 rgba(255,255,255,0), 0px 225px 0 0 rgba(255,255,255,0), 0px 250px 0 0 rgba(255,255,255,0), 25px 0px 0 0 rgba(255,255,255,0), 25px 25px 0 0 #3FB8AF, 25px 50px 0 0 #FF9E9D, 25px 75px 0 0 #FF3D7F, 25px 100px 0 0 #04756F, 25px 125px 0 0 #FF8C00, 25px 150px 0 0 #FF2D00, 25px 175px 0 0 #3FB8AF, 25px 200px 0 0 #EDF7F2, 25px 225px 0 0 #FFF0A5, 25px 250px 0 0 #96CA2D, 50px 0px 0 0 rgba(255,255,255,0), 50px 25px 0 0 #D90000, 50px 50px 0 0 #1F8A70, 50px 75px 0 0 #96CA2D, 50px 100px 0 0 #7FC7AF, 50px 125px 0 0 #FFE11A, 50px 150px 0 0 #D1DBBD, 50px 175px 0 0 #96CA2D, 50px 200px 0 0 #FF8C00, 50px 225px 0 0 #004358, 50px 250px 0 0 #3FB8AF, 75px 0px 0 0 rgba(255,255,255,0), 75px 25px 0 0 #FF8C00, 75px 50px 0 0 #004358, 75px 75px 0 0 #FFF0A5, 75px 100px 0 0 #004358, 75px 125px 0 0 #FF2D00, 75px 150px 0 0 #B5E655, 75px 175px 0 0 #FFF0A5, 75px 200px 0 0 #FF9E9D, 75px 225px 0 0 #FFE11A, 75px 250px 0 0 #D90000, 100px 0px 0 0 rgba(255,255,255,0), 100px 25px 0 0 #D1DBBD, 100px 50px 0 0 #FD7400, 100px 75px 0 0 #04756F, 100px 100px 0 0 #FF8C00, 100px 125px 0 0 #644D52, 100px 150px 0 0 #FF9E9D, 100px 175px 0 0 #FFE11A, 100px 200px 0 0 #FFF0A5, 100px 225px 0 0 #3FB8AF, 100px 250px 0 0 #644D52, 125px 0px 0 0 rgba(255,255,255,0), 125px 25px 0 0 #FFE11A, 125px 50px 0 0 #04756F, 125px 75px 0 0 #FFE11A, 125px 100px 0 0 #FF2D00, 125px 125px 0 0 #B5E655, 125px 150px 0 0 #DAD8A7, 125px 175px 0 0 #004358, 125px 200px 0 0 #DAD8A7, 125px 225px 0 0 #FF2D00, 125px 250px 0 0 #FF8C00, 150px 0px 0 0 rgba(255,255,255,0), 150px 25px 0 0 #3FB8AF, 150px 50px 0 0 #FFF0A5, 150px 75px 0 0 #FF9E9D, 150px 100px 0 0 #3FB8AF, 150px 125px 0 0 #FFE11A, 150px 150px 0 0 #FF8C00, 150px 175px 0 0 #D90000, 150px 200px 0 0 #96CA2D, 150px 225px 0 0 #1F8A70, 150px 250px 0 0 #004358, 175px 0px 0 0 rgba(255,255,255,0), 175px 25px 0 0 #FF9E9D, 175px 50px 0 0 #D1DBBD, 175px 75px 0 0 #96CA2D, 175px 100px 0 0 #FF3D7F, 175px 125px 0 0 #004358, 175px 150px 0 0 #DAD8A7, 175px 175px 0 0 #04756F, 175px 200px 0 0 #D1DBBD, 175px 225px 0 0 #FF8C00, 175px 250px 0 0 #B5E655, 200px 0px 0 0 rgba(255,255,255,0), 200px 25px 0 0 #FF8C00, 200px 50px 0 0 #4BB5C1, 200px 75px 0 0 #1F8A70, 200px 100px 0 0 #FFE11A, 200px 125px 0 0 #FF9E9D, 200px 150px 0 0 #D90000, 200px 175px 0 0 #644D52, 200px 200px 0 0 #96CA2D, 200px 225px 0 0 #FF3D7F, 200px 250px 0 0 #D90000, 225px 0px 0 0 rgba(255,255,255,0), 225px 25px 0 0 #B5E655, 225px 50px 0 0 #04756F, 225px 75px 0 0 #FF3D7F, 225px 100px 0 0 #04756F, 225px 125px 0 0 #3FB8AF, 225px 150px 0 0 #F77A52, 225px 175px 0 0 #FFF0A5, 225px 200px 0 0 #FFE11A, 225px 225px 0 0 #FF9E9D, 225px 250px 0 0 #B5E655, 250px 0px 0 0 rgba(255,255,255,0), 250px 25px 0 0 #3FB8AF, 250px 50px 0 0 #D90000, 250px 75px 0 0 #B5E655, 250px 100px 0 0 #004358, 250px 125px 0 0 #FF3D7F, 250px 150px 0 0 #96CA2D, 250px 175px 0 0 #DAD8A7, 250px 200px 0 0 #FF2D00, 250px 225px 0 0 #3FB8AF, 250px 250px 0 0 #FFE11A;}
80% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 25px 0 0 rgba(255,255,255,0), 0px 50px 0 0 rgba(255,255,255,0), 0px 75px 0 0 rgba(255,255,255,0), 0px 100px 0 0 rgba(255,255,255,0), 0px 125px 0 0 rgba(255,255,255,0), 0px 150px 0 0 rgba(255,255,255,0), 0px 175px 0 0 rgba(255,255,255,0), 0px 200px 0 0 rgba(255,255,255,0), 0px 225px 0 0 rgba(255,255,255,0), 0px 250px 0 0 rgba(255,255,255,0), 25px 0px 0 0 rgba(255,255,255,0), 25px 25px 0 0 #FF8C00, 25px 50px 0 0 #96CA2D, 25px 75px 0 0 #04756F, 25px 100px 0 0 #3FB8AF, 25px 125px 0 0 #FFE11A, 25px 150px 0 0 #004358, 25px 175px 0 0 #FFE11A, 25px 200px 0 0 #BEDB39, 25px 225px 0 0 #004358, 25px 250px 0 0 #FF8C00, 50px 0px 0 0 rgba(255,255,255,0), 50px 25px 0 0 #FF2D00, 50px 50px 0 0 #FF9E9D, 50px 75px 0 0 #FF8C00, 50px 100px 0 0 #FFF0A5, 50px 125px 0 0 #96CA2D, 50px 150px 0 0 #FFF0A5, 50px 175px 0 0 #D90000, 50px 200px 0 0 #FFF0A5, 50px 225px 0 0 #96CA2D, 50px 250px 0 0 #FFF0A5, 75px 0px 0 0 rgba(255,255,255,0), 75px 25px 0 0 #3FB8AF, 75px 50px 0 0 #FFB03B, 75px 75px 0 0 #FFE11A, 75px 100px 0 0 #1F8A70, 75px 125px 0 0 #FF9E9D, 75px 150px 0 0 #3FB8AF, 75px 175px 0 0 #FF9E9D, 75px 200px 0 0 #FFE11A, 75px 225px 0 0 #1F8A70, 75px 250px 0 0 #004358, 100px 0px 0 0 rgba(255,255,255,0), 100px 25px 0 0 #04756F, 100px 50px 0 0 #FF8C00, 100px 75px 0 0 #FF9E9D, 100px 100px 0 0 #FF3D7F, 100px 125px 0 0 #96CA2D, 100px 150px 0 0 #FFF0A5, 100px 175px 0 0 #FF8C00, 100px 200px 0 0 #FF2D00, 100px 225px 0 0 #FFF0A5, 100px 250px 0 0 #FF9E9D, 125px 0px 0 0 rgba(255,255,255,0), 125px 25px 0 0 #FF8C00, 125px 50px 0 0 #004358, 125px 75px 0 0 #3FB8AF, 125px 100px 0 0 #D1DBBD, 125px 125px 0 0 #FFE11A, 125px 150px 0 0 #D1DBBD, 125px 175px 0 0 #D90000, 125px 200px 0 0 #FFF0A5, 125px 225px 0 0 #FFE11A, 125px 250px 0 0 #BEDB39, 150px 0px 0 0 rgba(255,255,255,0), 150px 25px 0 0 #04756F, 150px 50px 0 0 #96CA2D, 150px 75px 0 0 #D90000, 150px 100px 0 0 #BEDB39, 150px 125px 0 0 #1F8A70, 150px 150px 0 0 #FFE11A, 150px 175px 0 0 #FF2D00, 150px 200px 0 0 #BEDB39, 150px 225px 0 0 #3FB8AF, 150px 250px 0 0 #1F8A70, 175px 0px 0 0 rgba(255,255,255,0), 175px 25px 0 0 #FFE11A, 175px 50px 0 0 #FF8C00, 175px 75px 0 0 #3FB8AF, 175px 100px 0 0 #FF8C00, 175px 125px 0 0 #3FB8AF, 175px 150px 0 0 #96CA2D, 175px 175px 0 0 #004358, 175px 200px 0 0 #D90000, 175px 225px 0 0 #FFF0A5, 175px 250px 0 0 #FF2D00, 200px 0px 0 0 rgba(255,255,255,0), 200px 25px 0 0 #D90000, 200px 50px 0 0 #3FB8AF, 200px 75px 0 0 #004358, 200px 100px 0 0 #FFF0A5, 200px 125px 0 0 #D90000, 200px 150px 0 0 #FFE11A, 200px 175px 0 0 #FFF0A5, 200px 200px 0 0 #BEDB39, 200px 225px 0 0 #FF2D00, 200px 250px 0 0 #FFE11A, 225px 0px 0 0 rgba(255,255,255,0), 225px 25px 0 0 #004358, 225px 50px 0 0 #D1DBBD, 225px 75px 0 0 #FFE11A, 225px 100px 0 0 #96CA2D, 225px 125px 0 0 #FFF0A5, 225px 150px 0 0 #D1DBBD, 225px 175px 0 0 #FF8C00, 225px 200px 0 0 #1F8A70, 225px 225px 0 0 #004358, 225px 250px 0 0 #96CA2D, 250px 0px 0 0 rgba(255,255,255,0), 250px 25px 0 0 #04756F, 250px 50px 0 0 #FF9E9D, 250px 75px 0 0 #FF8C00, 250px 100px 0 0 #3FB8AF, 250px 125px 0 0 #BEDB39, 250px 150px 0 0 #D90000, 250px 175px 0 0 #FF9E9D, 250px 200px 0 0 #FFE11A, 250px 225px 0 0 #1F8A70, 250px 250px 0 0 #FD7400;}
}
@keyframes shadows {
0% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 25px 0 0 rgba(255,255,255,0), 0px 50px 0 0 rgba(255,255,255,0), 0px 75px 0 0 rgba(255,255,255,0), 0px 100px 0 0 rgba(255,255,255,0), 0px 125px 0 0 rgba(255,255,255,0), 0px 150px 0 0 rgba(255,255,255,0), 0px 175px 0 0 rgba(255,255,255,0), 0px 200px 0 0 rgba(255,255,255,0), 0px 225px 0 0 rgba(255,255,255,0), 0px 250px 0 0 rgba(255,255,255,0), 25px 0px 0 0 rgba(255,255,255,0), 25px 25px 0 0 #3FB8AF, 25px 50px 0 0 #FFF0A5, 25px 75px 0 0 #FF2D00, 25px 100px 0 0 #FF974F, 25px 125px 0 0 #D1DBBD, 25px 150px 0 0 #004358, 25px 175px 0 0 #FFE11A, 25px 200px 0 0 #FF2D00, 25px 225px 0 0 #FF974F, 25px 250px 0 0 #B5E655, 50px 0px 0 0 rgba(255,255,255,0), 50px 25px 0 0 #FF2D00, 50px 50px 0 0 #96CA2D, 50px 75px 0 0 #EDF7F2, 50px 100px 0 0 #FFF0A5, 50px 125px 0 0 #FFE11A, 50px 150px 0 0 #FF9E9D, 50px 175px 0 0 #96CA2D, 50px 200px 0 0 #04756F, 50px 225px 0 0 #D1DBBD, 50px 250px 0 0 #3FB8AF, 75px 0px 0 0 rgba(255,255,255,0), 75px 25px 0 0 #FFE11A, 75px 50px 0 0 #D1DBBD, 75px 75px 0 0 #3FB8AF, 75px 100px 0 0 #FF9E9D, 75px 125px 0 0 #4BB5C1, 75px 150px 0 0 #FF974F, 75px 175px 0 0 #FF2D00, 75px 200px 0 0 #FFE11A, 75px 225px 0 0 #004358, 75px 250px 0 0 #EDF7F2, 100px 0px 0 0 rgba(255,255,255,0), 100px 25px 0 0 #004358, 100px 50px 0 0 #FF9E9D, 100px 75px 0 0 #04756F, 100px 100px 0 0 #FFE11A, 100px 125px 0 0 #004358, 100px 150px 0 0 #FFF0A5, 100px 175px 0 0 #004358, 100px 200px 0 0 #FF2D00, 100px 225px 0 0 #FFE11A, 100px 250px 0 0 #96CA2D, 125px 0px 0 0 rgba(255,255,255,0), 125px 25px 0 0 #FF974F, 125px 50px 0 0 #D1DBBD, 125px 75px 0 0 #96CA2D, 125px 100px 0 0 #FFF0A5, 125px 125px 0 0 #04756F, 125px 150px 0 0 #FF974F, 125px 175px 0 0 #4BB5C1, 125px 200px 0 0 #3FB8AF, 125px 225px 0 0 #FFF0A5, 125px 250px 0 0 #04756F, 150px 0px 0 0 rgba(255,255,255,0), 150px 25px 0 0 #004358, 150px 50px 0 0 #EDF7F2, 150px 75px 0 0 #FF9E9D, 150px 100px 0 0 #B5E655, 150px 125px 0 0 #FFE11A, 150px 150px 0 0 #FF9E9D, 150px 175px 0 0 #96CA2D, 150px 200px 0 0 #FFF0A5, 150px 225px 0 0 #D1DBBD, 150px 250px 0 0 #96CA2D, 175px 0px 0 0 rgba(255,255,255,0), 175px 25px 0 0 #04756F, 175px 50px 0 0 #FF974F, 175px 75px 0 0 #4BB5C1, 175px 100px 0 0 #004358, 175px 125px 0 0 #3FB8AF, 175px 150px 0 0 #004358, 175px 175px 0 0 #D1DBBD, 175px 200px 0 0 #4BB5C1, 175px 225px 0 0 #FF2D00, 175px 250px 0 0 #004358, 200px 0px 0 0 rgba(255,255,255,0), 200px 25px 0 0 #FFE11A, 200px 50px 0 0 #FF2D00, 200px 75px 0 0 #96CA2D, 200px 100px 0 0 #FF2D00, 200px 125px 0 0 #FFF0A5, 200px 150px 0 0 #4BB5C1, 200px 175px 0 0 #FF9E9D, 200px 200px 0 0 #96CA2D, 200px 225px 0 0 #FFF0A5, 200px 250px 0 0 #FF9E9D, 225px 0px 0 0 rgba(255,255,255,0), 225px 25px 0 0 #D90000, 225px 50px 0 0 #FFF0A5, 225px 75px 0 0 #3FB8AF, 225px 100px 0 0 #FF9E9D, 225px 125px 0 0 #004358, 225px 150px 0 0 #FF974F, 225px 175px 0 0 #D90000, 225px 200px 0 0 #D1DBBD, 225px 225px 0 0 #EDF7F2, 225px 250px 0 0 #FF974F, 250px 0px 0 0 rgba(255,255,255,0), 250px 25px 0 0 #96CA2D, 250px 50px 0 0 #D1DBBD, 250px 75px 0 0 #FFF0A5, 250px 100px 0 0 #D1DBBD, 250px 125px 0 0 #FF2D00, 250px 150px 0 0 #FFF0A5, 250px 175px 0 0 #4BB5C1, 250px 200px 0 0 #FFE11A, 250px 225px 0 0 #FF2D00, 250px 250px 0 0 #4BB5C1;}
20% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 25px 0 0 rgba(255,255,255,0), 0px 50px 0 0 rgba(255,255,255,0), 0px 75px 0 0 rgba(255,255,255,0), 0px 100px 0 0 rgba(255,255,255,0), 0px 125px 0 0 rgba(255,255,255,0), 0px 150px 0 0 rgba(255,255,255,0), 0px 175px 0 0 rgba(255,255,255,0), 0px 200px 0 0 rgba(255,255,255,0), 0px 225px 0 0 rgba(255,255,255,0), 0px 250px 0 0 rgba(255,255,255,0), 25px 0px 0 0 rgba(255,255,255,0), 25px 25px 0 0 #B5E655, 25px 50px 0 0 #FD7400, 25px 75px 0 0 #96CA2D, 25px 100px 0 0 #1F8A70, 25px 125px 0 0 #FF9E9D, 25px 150px 0 0 #3FB8AF, 25px 175px 0 0 #FF974F, 25px 200px 0 0 #004358, 25px 225px 0 0 #FFE11A, 25px 250px 0 0 #FF9E9D, 50px 0px 0 0 rgba(255,255,255,0), 50px 25px 0 0 #FF9E9D, 50px 50px 0 0 #3FB8AF, 50px 75px 0 0 #004358, 50px 100px 0 0 #3FB8AF, 50px 125px 0 0 #FFE11A, 50px 150px 0 0 #FD7400, 50px 175px 0 0 #FF3D7F, 50px 200px 0 0 #FFF0A5, 50px 225px 0 0 #96CA2D, 50px 250px 0 0 #1F8A70, 75px 0px 0 0 rgba(255,255,255,0), 75px 25px 0 0 #FF974F, 75px 50px 0 0 #FFF0A5, 75px 75px 0 0 #FD7400, 75px 100px 0 0 #96CA2D, 75px 125px 0 0 #FFF0A5, 75px 150px 0 0 #FFB03B, 75px 175px 0 0 #D1DBBD, 75px 200px 0 0 #FF974F, 75px 225px 0 0 #FFE11A, 75px 250px 0 0 #FD7400, 100px 0px 0 0 rgba(255,255,255,0), 100px 25px 0 0 #1F8A70, 100px 50px 0 0 #BEDB39, 100px 75px 0 0 #FF9E9D, 100px 100px 0 0 #FF3D7F, 100px 125px 0 0 #B5E655, 100px 150px 0 0 #3FB8AF, 100px 175px 0 0 #FFE11A, 100px 200px 0 0 #D1DBBD, 100px 225px 0 0 #1F8A70, 100px 250px 0 0 #B5E655, 125px 0px 0 0 rgba(255,255,255,0), 125px 25px 0 0 #FD7400, 125px 50px 0 0 #FFE11A, 125px 75px 0 0 #FFB03B, 125px 100px 0 0 #FF974F, 125px 125px 0 0 #FF2D00, 125px 150px 0 0 #FFE11A, 125px 175px 0 0 #FF2D00, 125px 200px 0 0 #B5E655, 125px 225px 0 0 #FFE11A, 125px 250px 0 0 #FF9E9D, 150px 0px 0 0 rgba(255,255,255,0), 150px 25px 0 0 #FFF0A5, 150px 50px 0 0 #3FB8AF, 150px 75px 0 0 #004358, 150px 100px 0 0 #FFF0A5, 150px 125px 0 0 #96CA2D, 150px 150px 0 0 #468966, 150px 175px 0 0 #DAD8A7, 150px 200px 0 0 #004358, 150px 225px 0 0 #FF2D00, 150px 250px 0 0 #FF974F, 175px 0px 0 0 rgba(255,255,255,0), 175px 25px 0 0 #FFE11A, 175px 50px 0 0 #FFB03B, 175px 75px 0 0 #FF9E9D, 175px 100px 0 0 #B5E655, 175px 125px 0 0 #FFB03B, 175px 150px 0 0 #FFF0A5, 175px 175px 0 0 #3FB8AF, 175px 200px 0 0 #FF974F, 175px 225px 0 0 #FFF0A5, 175px 250px 0 0 #468966, 200px 0px 0 0 rgba(255,255,255,0), 200px 25px 0 0 #96CA2D, 200px 50px 0 0 #FFF0A5, 200px 75px 0 0 #FF2D00, 200px 100px 0 0 #FFE11A, 200px 125px 0 0 #004358, 200px 150px 0 0 #FF9E9D, 200px 175px 0 0 #1F8A70, 200px 200px 0 0 #DAD8A7, 200px 225px 0 0 #004358, 200px 250px 0 0 #3FB8AF, 225px 0px 0 0 rgba(255,255,255,0), 225px 25px 0 0 #D1DBBD, 225px 50px 0 0 #004358, 225px 75px 0 0 #FD7400, 225px 100px 0 0 #FFB03B, 225px 125px 0 0 #FFE11A, 225px 150px 0 0 #FFB03B, 225px 175px 0 0 #D1DBBD, 225px 200px 0 0 #FF974F, 225px 225px 0 0 #FF2D00, 225px 250px 0 0 #FFF0A5, 250px 0px 0 0 rgba(255,255,255,0), 250px 25px 0 0 #FF974F, 250px 50px 0 0 #1F8A70, 250px 75px 0 0 #3FB8AF, 250px 100px 0 0 #004358, 250px 125px 0 0 #FFB03B, 250px 150px 0 0 #B5E655, 250px 175px 0 0 #96CA2D, 250px 200px 0 0 #468966, 250px 225px 0 0 #B5E655, 250px 250px 0 0 #FFE11A;}
40% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 25px 0 0 rgba(255,255,255,0), 0px 50px 0 0 rgba(255,255,255,0), 0px 75px 0 0 rgba(255,255,255,0), 0px 100px 0 0 rgba(255,255,255,0), 0px 125px 0 0 rgba(255,255,255,0), 0px 150px 0 0 rgba(255,255,255,0), 0px 175px 0 0 rgba(255,255,255,0), 0px 200px 0 0 rgba(255,255,255,0), 0px 225px 0 0 rgba(255,255,255,0), 0px 250px 0 0 rgba(255,255,255,0), 25px 0px 0 0 rgba(255,255,255,0), 25px 25px 0 0 #96CA2D, 25px 50px 0 0 #FF2D00, 25px 75px 0 0 #FF8C00, 25px 100px 0 0 #004358, 25px 125px 0 0 #96CA2D, 25px 150px 0 0 #FFE11A, 25px 175px 0 0 #FD7400, 25px 200px 0 0 #FFE11A, 25px 225px 0 0 #FF9E9D, 25px 250px 0 0 #FFF0A5, 50px 0px 0 0 rgba(255,255,255,0), 50px 25px 0 0 #FFE11A, 50px 50px 0 0 #1F8A70, 50px 75px 0 0 #BEDB39, 50px 100px 0 0 #3FB8AF, 50px 125px 0 0 #FF3D7F, 50px 150px 0 0 #FF2D00, 50px 175px 0 0 #004358, 50px 200px 0 0 #D1DBBD, 50px 225px 0 0 #BEDB39, 50px 250px 0 0 #FF8C00, 75px 0px 0 0 rgba(255,255,255,0), 75px 25px 0 0 #FD7400, 75px 50px 0 0 #FF9E9D, 75px 75px 0 0 #FF2D00, 75px 100px 0 0 #FFE11A, 75px 125px 0 0 #1F8A70, 75px 150px 0 0 #3FB8AF, 75px 175px 0 0 #FF3D7F, 75px 200px 0 0 #1F8A70, 75px 225px 0 0 #FFF0A5, 75px 250px 0 0 #FFE11A, 100px 0px 0 0 rgba(255,255,255,0), 100px 25px 0 0 #FFF0A5, 100px 50px 0 0 #3FB8AF, 100px 75px 0 0 #96CA2D, 100px 100px 0 0 #FFF0A5, 100px 125px 0 0 #FFE11A, 100px 150px 0 0 #BEDB39, 100px 175px 0 0 #FD7400, 100px 200px 0 0 #3FB8AF, 100px 225px 0 0 #D1DBBD, 100px 250px 0 0 #96CA2D, 125px 0px 0 0 rgba(255,255,255,0), 125px 25px 0 0 #004358, 125px 50px 0 0 #FF8C00, 125px 75px 0 0 #FF9E9D, 125px 100px 0 0 #FD7400, 125px 125px 0 0 #004358, 125px 150px 0 0 #FF8C00, 125px 175px 0 0 #FF9E9D, 125px 200px 0 0 #96CA2D, 125px 225px 0 0 #FF3D7F, 125px 250px 0 0 #1F8A70, 150px 0px 0 0 rgba(255,255,255,0), 150px 25px 0 0 #96CA2D, 150px 50px 0 0 #1F8A70, 150px 75px 0 0 #BEDB39, 150px 100px 0 0 #FFE11A, 150px 125px 0 0 #BEDB39, 150px 150px 0 0 #1F8A70, 150px 175px 0 0 #FFE11A, 150px 200px 0 0 #BEDB39, 150px 225px 0 0 #004358, 150px 250px 0 0 #FFE11A, 175px 0px 0 0 rgba(255,255,255,0), 175px 25px 0 0 #FFE11A, 175px 50px 0 0 #D1DBBD, 175px 75px 0 0 #FFF0A5, 175px 100px 0 0 #FF8C00, 175px 125px 0 0 #3FB8AF, 175px 150px 0 0 #D1DBBD, 175px 175px 0 0 #3FB8AF, 175px 200px 0 0 #FFE11A, 175px 225px 0 0 #3FB8AF, 175px 250px 0 0 #96CA2D, 200px 0px 0 0 rgba(255,255,255,0), 200px 25px 0 0 #FD7400, 200px 50px 0 0 #3FB8AF, 200px 75px 0 0 #FF9E9D, 200px 100px 0 0 #B64926, 200px 125px 0 0 #1F8A70, 200px 150px 0 0 #96CA2D, 200px 175px 0 0 #004358, 200px 200px 0 0 #FFF0A5, 200px 225px 0 0 #FFE11A, 200px 250px 0 0 #3FB8AF, 225px 0px 0 0 rgba(255,255,255,0), 225px 25px 0 0 #FF9E9D, 225px 50px 0 0 #FFE11A, 225px 75px 0 0 #FF2D00, 225px 100px 0 0 #96CA2D, 225px 125px 0 0 #FF2D00, 225px 150px 0 0 #FF8C00, 225px 175px 0 0 #FF2D00, 225px 200px 0 0 #1F8A70, 225px 225px 0 0 #D1DBBD, 225px 250px 0 0 #004358, 250px 0px 0 0 rgba(255,255,255,0), 250px 25px 0 0 #BEDB39, 250px 50px 0 0 #FF9E9D, 250px 75px 0 0 #FF8C00, 250px 100px 0 0 #1F8A70, 250px 125px 0 0 #004358, 250px 150px 0 0 #FF2D00, 250px 175px 0 0 #BEDB39, 250px 200px 0 0 #2E0927, 250px 225px 0 0 #FF2D00, 250px 250px 0 0 #FD7400;}
60% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 25px 0 0 rgba(255,255,255,0), 0px 50px 0 0 rgba(255,255,255,0), 0px 75px 0 0 rgba(255,255,255,0), 0px 100px 0 0 rgba(255,255,255,0), 0px 125px 0 0 rgba(255,255,255,0), 0px 150px 0 0 rgba(255,255,255,0), 0px 175px 0 0 rgba(255,255,255,0), 0px 200px 0 0 rgba(255,255,255,0), 0px 225px 0 0 rgba(255,255,255,0), 0px 250px 0 0 rgba(255,255,255,0), 25px 0px 0 0 rgba(255,255,255,0), 25px 25px 0 0 #3FB8AF, 25px 50px 0 0 #FF9E9D, 25px 75px 0 0 #FF3D7F, 25px 100px 0 0 #04756F, 25px 125px 0 0 #FF8C00, 25px 150px 0 0 #FF2D00, 25px 175px 0 0 #3FB8AF, 25px 200px 0 0 #EDF7F2, 25px 225px 0 0 #FFF0A5, 25px 250px 0 0 #96CA2D, 50px 0px 0 0 rgba(255,255,255,0), 50px 25px 0 0 #D90000, 50px 50px 0 0 #1F8A70, 50px 75px 0 0 #96CA2D, 50px 100px 0 0 #7FC7AF, 50px 125px 0 0 #FFE11A, 50px 150px 0 0 #D1DBBD, 50px 175px 0 0 #96CA2D, 50px 200px 0 0 #FF8C00, 50px 225px 0 0 #004358, 50px 250px 0 0 #3FB8AF, 75px 0px 0 0 rgba(255,255,255,0), 75px 25px 0 0 #FF8C00, 75px 50px 0 0 #004358, 75px 75px 0 0 #FFF0A5, 75px 100px 0 0 #004358, 75px 125px 0 0 #FF2D00, 75px 150px 0 0 #B5E655, 75px 175px 0 0 #FFF0A5, 75px 200px 0 0 #FF9E9D, 75px 225px 0 0 #FFE11A, 75px 250px 0 0 #D90000, 100px 0px 0 0 rgba(255,255,255,0), 100px 25px 0 0 #D1DBBD, 100px 50px 0 0 #FD7400, 100px 75px 0 0 #04756F, 100px 100px 0 0 #FF8C00, 100px 125px 0 0 #644D52, 100px 150px 0 0 #FF9E9D, 100px 175px 0 0 #FFE11A, 100px 200px 0 0 #FFF0A5, 100px 225px 0 0 #3FB8AF, 100px 250px 0 0 #644D52, 125px 0px 0 0 rgba(255,255,255,0), 125px 25px 0 0 #FFE11A, 125px 50px 0 0 #04756F, 125px 75px 0 0 #FFE11A, 125px 100px 0 0 #FF2D00, 125px 125px 0 0 #B5E655, 125px 150px 0 0 #DAD8A7, 125px 175px 0 0 #004358, 125px 200px 0 0 #DAD8A7, 125px 225px 0 0 #FF2D00, 125px 250px 0 0 #FF8C00, 150px 0px 0 0 rgba(255,255,255,0), 150px 25px 0 0 #3FB8AF, 150px 50px 0 0 #FFF0A5, 150px 75px 0 0 #FF9E9D, 150px 100px 0 0 #3FB8AF, 150px 125px 0 0 #FFE11A, 150px 150px 0 0 #FF8C00, 150px 175px 0 0 #D90000, 150px 200px 0 0 #96CA2D, 150px 225px 0 0 #1F8A70, 150px 250px 0 0 #004358, 175px 0px 0 0 rgba(255,255,255,0), 175px 25px 0 0 #FF9E9D, 175px 50px 0 0 #D1DBBD, 175px 75px 0 0 #96CA2D, 175px 100px 0 0 #FF3D7F, 175px 125px 0 0 #004358, 175px 150px 0 0 #DAD8A7, 175px 175px 0 0 #04756F, 175px 200px 0 0 #D1DBBD, 175px 225px 0 0 #FF8C00, 175px 250px 0 0 #B5E655, 200px 0px 0 0 rgba(255,255,255,0), 200px 25px 0 0 #FF8C00, 200px 50px 0 0 #4BB5C1, 200px 75px 0 0 #1F8A70, 200px 100px 0 0 #FFE11A, 200px 125px 0 0 #FF9E9D, 200px 150px 0 0 #D90000, 200px 175px 0 0 #644D52, 200px 200px 0 0 #96CA2D, 200px 225px 0 0 #FF3D7F, 200px 250px 0 0 #D90000, 225px 0px 0 0 rgba(255,255,255,0), 225px 25px 0 0 #B5E655, 225px 50px 0 0 #04756F, 225px 75px 0 0 #FF3D7F, 225px 100px 0 0 #04756F, 225px 125px 0 0 #3FB8AF, 225px 150px 0 0 #F77A52, 225px 175px 0 0 #FFF0A5, 225px 200px 0 0 #FFE11A, 225px 225px 0 0 #FF9E9D, 225px 250px 0 0 #B5E655, 250px 0px 0 0 rgba(255,255,255,0), 250px 25px 0 0 #3FB8AF, 250px 50px 0 0 #D90000, 250px 75px 0 0 #B5E655, 250px 100px 0 0 #004358, 250px 125px 0 0 #FF3D7F, 250px 150px 0 0 #96CA2D, 250px 175px 0 0 #DAD8A7, 250px 200px 0 0 #FF2D00, 250px 225px 0 0 #3FB8AF, 250px 250px 0 0 #FFE11A;}
80% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 25px 0 0 rgba(255,255,255,0), 0px 50px 0 0 rgba(255,255,255,0), 0px 75px 0 0 rgba(255,255,255,0), 0px 100px 0 0 rgba(255,255,255,0), 0px 125px 0 0 rgba(255,255,255,0), 0px 150px 0 0 rgba(255,255,255,0), 0px 175px 0 0 rgba(255,255,255,0), 0px 200px 0 0 rgba(255,255,255,0), 0px 225px 0 0 rgba(255,255,255,0), 0px 250px 0 0 rgba(255,255,255,0), 25px 0px 0 0 rgba(255,255,255,0), 25px 25px 0 0 #FF8C00, 25px 50px 0 0 #96CA2D, 25px 75px 0 0 #04756F, 25px 100px 0 0 #3FB8AF, 25px 125px 0 0 #FFE11A, 25px 150px 0 0 #004358, 25px 175px 0 0 #FFE11A, 25px 200px 0 0 #BEDB39, 25px 225px 0 0 #004358, 25px 250px 0 0 #FF8C00, 50px 0px 0 0 rgba(255,255,255,0), 50px 25px 0 0 #FF2D00, 50px 50px 0 0 #FF9E9D, 50px 75px 0 0 #FF8C00, 50px 100px 0 0 #FFF0A5, 50px 125px 0 0 #96CA2D, 50px 150px 0 0 #FFF0A5, 50px 175px 0 0 #D90000, 50px 200px 0 0 #FFF0A5, 50px 225px 0 0 #96CA2D, 50px 250px 0 0 #FFF0A5, 75px 0px 0 0 rgba(255,255,255,0), 75px 25px 0 0 #3FB8AF, 75px 50px 0 0 #FFB03B, 75px 75px 0 0 #FFE11A, 75px 100px 0 0 #1F8A70, 75px 125px 0 0 #FF9E9D, 75px 150px 0 0 #3FB8AF, 75px 175px 0 0 #FF9E9D, 75px 200px 0 0 #FFE11A, 75px 225px 0 0 #1F8A70, 75px 250px 0 0 #004358, 100px 0px 0 0 rgba(255,255,255,0), 100px 25px 0 0 #04756F, 100px 50px 0 0 #FF8C00, 100px 75px 0 0 #FF9E9D, 100px 100px 0 0 #FF3D7F, 100px 125px 0 0 #96CA2D, 100px 150px 0 0 #FFF0A5, 100px 175px 0 0 #FF8C00, 100px 200px 0 0 #FF2D00, 100px 225px 0 0 #FFF0A5, 100px 250px 0 0 #FF9E9D, 125px 0px 0 0 rgba(255,255,255,0), 125px 25px 0 0 #FF8C00, 125px 50px 0 0 #004358, 125px 75px 0 0 #3FB8AF, 125px 100px 0 0 #D1DBBD, 125px 125px 0 0 #FFE11A, 125px 150px 0 0 #D1DBBD, 125px 175px 0 0 #D90000, 125px 200px 0 0 #FFF0A5, 125px 225px 0 0 #FFE11A, 125px 250px 0 0 #BEDB39, 150px 0px 0 0 rgba(255,255,255,0), 150px 25px 0 0 #04756F, 150px 50px 0 0 #96CA2D, 150px 75px 0 0 #D90000, 150px 100px 0 0 #BEDB39, 150px 125px 0 0 #1F8A70, 150px 150px 0 0 #FFE11A, 150px 175px 0 0 #FF2D00, 150px 200px 0 0 #BEDB39, 150px 225px 0 0 #3FB8AF, 150px 250px 0 0 #1F8A70, 175px 0px 0 0 rgba(255,255,255,0), 175px 25px 0 0 #FFE11A, 175px 50px 0 0 #FF8C00, 175px 75px 0 0 #3FB8AF, 175px 100px 0 0 #FF8C00, 175px 125px 0 0 #3FB8AF, 175px 150px 0 0 #96CA2D, 175px 175px 0 0 #004358, 175px 200px 0 0 #D90000, 175px 225px 0 0 #FFF0A5, 175px 250px 0 0 #FF2D00, 200px 0px 0 0 rgba(255,255,255,0), 200px 25px 0 0 #D90000, 200px 50px 0 0 #3FB8AF, 200px 75px 0 0 #004358, 200px 100px 0 0 #FFF0A5, 200px 125px 0 0 #D90000, 200px 150px 0 0 #FFE11A, 200px 175px 0 0 #FFF0A5, 200px 200px 0 0 #BEDB39, 200px 225px 0 0 #FF2D00, 200px 250px 0 0 #FFE11A, 225px 0px 0 0 rgba(255,255,255,0), 225px 25px 0 0 #004358, 225px 50px 0 0 #D1DBBD, 225px 75px 0 0 #FFE11A, 225px 100px 0 0 #96CA2D, 225px 125px 0 0 #FFF0A5, 225px 150px 0 0 #D1DBBD, 225px 175px 0 0 #FF8C00, 225px 200px 0 0 #1F8A70, 225px 225px 0 0 #004358, 225px 250px 0 0 #96CA2D, 250px 0px 0 0 rgba(255,255,255,0), 250px 25px 0 0 #04756F, 250px 50px 0 0 #FF9E9D, 250px 75px 0 0 #FF8C00, 250px 100px 0 0 #3FB8AF, 250px 125px 0 0 #BEDB39, 250px 150px 0 0 #D90000, 250px 175px 0 0 #FF9E9D, 250px 200px 0 0 #FFE11A, 250px 225px 0 0 #1F8A70, 250px 250px 0 0 #FD7400;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment