787 lines
17 KiB
CSS
787 lines
17 KiB
CSS
@import url(https://fonts.googleapis.com/css?family=Montserrat:700,900|Dancing+Script);
|
|
|
|
/* #### Generated By: http://www.cufonfonts.com #### */
|
|
@font-face {
|
|
font-family: "RoadRage";
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
src: local("RoadRage"),
|
|
url("http://coding-dude.com/wp/wp-content/uploads/Road_Rage.woff")
|
|
format("woff");
|
|
}
|
|
|
|
:root {
|
|
font-size: 3vw;
|
|
}
|
|
|
|
.grid {
|
|
background-attachment: fixed;
|
|
position: fixed;
|
|
bottom: -30%;
|
|
left: 0;
|
|
margin-left: -50%;
|
|
width: 200%;
|
|
height: 100%;
|
|
background-position-y: 0px;
|
|
background-image: repeating-linear-gradient(
|
|
90deg,
|
|
var(--grid-color, black) 0%,
|
|
transparent calc(1px + var(--grid-blur, 0px)),
|
|
transparent var(--grid-size),
|
|
var(--grid-color, black)
|
|
calc(var(--grid-size) + 1px + var(--grid-blur, 0px))
|
|
),
|
|
repeating-linear-gradient(
|
|
180deg,
|
|
var(--grid-color, black) 0%,
|
|
transparent calc(1px + var(--grid-blur, 0px)),
|
|
transparent var(--grid-size),
|
|
var(--grid-color, black)
|
|
calc(var(--grid-size) + 1px + var(--grid-blur, 0px))
|
|
);
|
|
transform: perspective(50vh) rotateX(60deg) translateZ(10px);
|
|
animation: moving-grid 0.5s infinite linear;
|
|
z-index: -1;
|
|
}
|
|
|
|
@keyframes moving-grid {
|
|
0% {
|
|
transform: perspective(50vh) rotateX(60deg) translateZ(10px)
|
|
translateY(-var(--grid-size));
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(50vh) rotateX(60deg) translateZ(10px)
|
|
translateY(var(--grid-size));
|
|
}
|
|
}
|
|
|
|
.sun {
|
|
background-attachment: fixed;
|
|
position: fixed;
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 100%;
|
|
background-color: yellow;
|
|
left: calc(50%);
|
|
bottom: 40%;
|
|
transform: translateX(-50%);
|
|
background-image: linear-gradient(red, yellow), linear-gradient(black, white);
|
|
clip-path: polygon(
|
|
-50% 0px,
|
|
150% -50%,
|
|
150% 55%,
|
|
-50% 55%,
|
|
-50% 62%,
|
|
150% 62%,
|
|
150% 70%,
|
|
0 70%,
|
|
-50% 75%,
|
|
150% 75%,
|
|
150% 80%,
|
|
0 80%,
|
|
-50% 82%,
|
|
150% 82%,
|
|
150% 85%,
|
|
0 85%,
|
|
-50% 87%,
|
|
150% 87%,
|
|
150% 90%,
|
|
0 90%,
|
|
-50% 92%,
|
|
150% 92%,
|
|
150% 95%,
|
|
0 95%,
|
|
-50% 96%,
|
|
150% 96%,
|
|
150% 150%,
|
|
0 150%
|
|
);
|
|
box-shadow: rgba(255, 128, 0, 0.7) 0px 0 20px;
|
|
}
|
|
|
|
.mountain {
|
|
background-attachment: fixed;
|
|
position: fixed;
|
|
content: "";
|
|
bottom: 35%;
|
|
left: calc(50% + var(--mountain-offset, 0px));
|
|
border-left: calc(var(--mountain-base) / 2) solid transparent;
|
|
border-bottom: var(--mountain-height, 100px) solid
|
|
var(--mountain-color1, white);
|
|
border-top: 0px solid transparent;
|
|
border-right: calc(var(--mountain-base, 100px) / 2) solid transparent;
|
|
transform-origin: bottom;
|
|
transform: skewX(var(--mountain-tilt, 0deg));
|
|
}
|
|
|
|
.mountain:after {
|
|
content: "";
|
|
border-left: calc(var(--mountain-base) / 2) solid transparent;
|
|
border-bottom: var(--mountain-height, 100px) solid
|
|
var(--mountain-color2, black);
|
|
border-top: 0px solid transparent;
|
|
border-right: calc(var(--mountain-base, 100px) / 2) solid transparent;
|
|
transform: translate(-50%) scale(0.98);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.overlay {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
background-attachment: fixed;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
background-image: repeating-linear-gradient(
|
|
rgba(0, 0, 0, 0.3) 0,
|
|
transparent 1px,
|
|
transparent 2px,
|
|
rgba(0, 0, 0, 0.3) 3px
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.background-80s {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
#010310 0,
|
|
#0c1142 24%,
|
|
#45125e 45%,
|
|
#d53567 60%,
|
|
#f0c3d9 65%,
|
|
#0c1142 65%
|
|
)
|
|
fixed;
|
|
background-size: 100% var(--background-height, 100vh);
|
|
overflow: hidden;
|
|
background-attachment: fixed;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: var(--background-height, 100vh);
|
|
z-index: -2;
|
|
}
|
|
|
|
.animated-clouds:before {
|
|
filter: url(#synth-filter);
|
|
}
|
|
|
|
.background-80s:before {
|
|
content: "";
|
|
background: linear-gradient(
|
|
to bottom,
|
|
#010310 0,
|
|
#0c1142 24%,
|
|
#45125e 45%,
|
|
#d53567 60%,
|
|
#f0c3d9 65%,
|
|
#0c1142 65%
|
|
)
|
|
fixed;
|
|
width: 100%;
|
|
height: 55%;
|
|
background-attachment: fixed;
|
|
position: fixed;
|
|
z-index: -1;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
/*stars*/
|
|
.stars:after {
|
|
transform: translateY(-40%);
|
|
content: " ";
|
|
border-radius: 100%;
|
|
width: 3px;
|
|
height: 4px;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
box-shadow: 5vw 15vh 2px white, 1vw 33vh 0px white, 2vw 25vh 2px white,
|
|
10vw 10vh 2px white, 12vw 20vh 0px white, 30vw 15vh 2px white,
|
|
16vw 5vh 2px white, 24vw 10vh 0px white, 32vw 40vh 0px white,
|
|
33vw 35vh 2px white, 12vw 38vh 2px white, 24vw 10vh 0px white,
|
|
33vw 5vh 2px white, 20vw 10vh 0px white, 80vw 10vh 2px white,
|
|
62vw 20vh 0px white, 60vw 15vh 2px white, 70vw 7vh 0px white,
|
|
62vw 50vh 0px white, 65vw 35vh 2px white, 64vw 10vh 0px white,
|
|
85vw 2vh 0px white, 92vw 40vh 0px white, 75vw 35vh 2px white,
|
|
90vw 10vh 0px white;
|
|
opacity: 0.3;
|
|
animation: glitter 2s infinite;
|
|
}
|
|
|
|
@keyframes glitter {
|
|
0% {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.ui-control{
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
white-space: nowrap;
|
|
}
|
|
.ui-control button{
|
|
border: 3px solid #a684cb;
|
|
background-color: #b533b3;
|
|
color: black;
|
|
border-radius: 10px;
|
|
padding: 5px;
|
|
animation: background-flicker 6s ease-in-out infinite;
|
|
}
|
|
.ui-control span{
|
|
font-size: 20px;
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
.ui-control button{
|
|
border: 0px solid #fff;
|
|
background-color: #dd3dda;
|
|
color: black;
|
|
border-radius: 10px;
|
|
padding: 5px;
|
|
}
|
|
}
|
|
|
|
|
|
.titleview {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
text-align: center;
|
|
transform: translate(-50%, -50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.titleview a {
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 15%;
|
|
text-align: center;
|
|
transform: translate(-50%, -50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.buttonrow {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 20%;
|
|
text-align: center;
|
|
transform: translate(-50%, 0%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.buttonrow a{
|
|
display: inline-block;
|
|
}
|
|
|
|
.footer{
|
|
position: fixed;
|
|
z-index: 5;
|
|
left: 0;
|
|
bottom: 5px;
|
|
width: 100%;
|
|
color: white;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
transform: translate(0%, 0%);
|
|
}
|
|
.footer a{
|
|
margin: 0 20px 0 20px;
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
.footer a {
|
|
margin: auto 5px;
|
|
}
|
|
}
|
|
.navbutton{
|
|
margin: 5px 10px 5px 10px;
|
|
padding: 10px;
|
|
background-color: black;
|
|
border-radius: 15%;
|
|
}
|
|
|
|
a {
|
|
color: #09ff00;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button, .button {
|
|
border: 5px solid #b533b3;
|
|
background-color: #a684cb;
|
|
color: white;
|
|
border-radius: 20px;
|
|
padding: 5px 20px 5px 20px;
|
|
animation: border-flicker 2s linear infinite;
|
|
}
|
|
.button:nth-child(1) { animation-duration: 2s; }
|
|
.button:nth-child(2) { animation-delay: 1s; animation-duration: 4s; }
|
|
.button:nth-child(3) { animation-duration: 3s; }
|
|
|
|
button span {
|
|
font-family: "Montserrat";
|
|
font-weight: 900;
|
|
font-size: calc(10px + 1vh);
|
|
letter-spacing: 5px;
|
|
animation: text-flicker 3s linear infinite;
|
|
}
|
|
|
|
button #offset {
|
|
animation: letter-flicker 4s linear infinite;
|
|
}
|
|
|
|
@keyframes text-flicker {
|
|
0% {
|
|
opacity: 0.1;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
2% {
|
|
opacity: 1;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
8% {
|
|
opacity: 0.1;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
9% {
|
|
opacity: 1;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
12% {
|
|
opacity: 0.1;
|
|
text-shadow: 0px 0px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
20% {
|
|
opacity: 1;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
25% {
|
|
opacity: 0.3;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
30% {
|
|
opacity: 1;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
70% {
|
|
opacity: 0.7;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
72% {
|
|
opacity: 0.2;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
77% {
|
|
opacity: 0.9;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.9;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes border-flicker {
|
|
0% {
|
|
opacity: 0.1;
|
|
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
}
|
|
|
|
2% {
|
|
opacity: 1;
|
|
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
}
|
|
|
|
4% {
|
|
opacity: 0.1;
|
|
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
}
|
|
|
|
8% {
|
|
opacity: 1;
|
|
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
}
|
|
|
|
70% {
|
|
opacity: 0.7;
|
|
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
}
|
|
}
|
|
|
|
@keyframes background-flicker {
|
|
0% {
|
|
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.73);
|
|
}
|
|
|
|
2% {
|
|
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 135, 232, 0.178);
|
|
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.178);
|
|
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.178);
|
|
}
|
|
|
|
4% {
|
|
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 135, 232, 0.685);
|
|
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.685);
|
|
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.685);
|
|
}
|
|
|
|
8% {
|
|
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 135, 232, 0.486);
|
|
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.486);
|
|
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.486);
|
|
}
|
|
|
|
70% {
|
|
-webkit-box-shadow: 0px 0px 78px 4px rgb(16, 135, 232);
|
|
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232);
|
|
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232);
|
|
}
|
|
|
|
100% {
|
|
-webkit-box-shadow: 0px 0px 78px 4px rgba(16, 135, 232, 0.658);
|
|
-moz-box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.658);
|
|
box-shadow: 0px 0px 78px 4px rgba(16, 134, 232, 0.658);
|
|
}
|
|
}
|
|
|
|
@keyframes letter-flicker {
|
|
0% {
|
|
opacity: 0.1;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
2% {
|
|
opacity: 0.1;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
4% {
|
|
opacity: 1;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
19% {
|
|
opacity: 1;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
21% {
|
|
opacity: 0.1;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
23% {
|
|
opacity: 1;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
80% {
|
|
opacity: 1;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
83% {
|
|
opacity: 0.4;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
|
|
87% {
|
|
opacity: 1;
|
|
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
|
|
}
|
|
}
|
|
|
|
.outrun {
|
|
font-family: "Road Rage";
|
|
font-weight: normal;
|
|
font-size: calc(30px + 3vh);
|
|
}
|
|
.outrun.small {
|
|
font-family: "Road Rage";
|
|
font-weight: normal;
|
|
font-size: calc(30px + 1vh);
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
.outrun {
|
|
font-family: "Road Rage";
|
|
font-weight: normal;
|
|
font-size: calc(20px + 3vh);
|
|
}
|
|
.outrun.small {
|
|
font-family: "Road Rage";
|
|
font-weight: normal;
|
|
font-size: calc(10px + 1vh);
|
|
}
|
|
}
|
|
|
|
.glow {
|
|
color: #fff;
|
|
text-align: center;
|
|
-webkit-animation: glow 1s ease-in-out infinite alternate;
|
|
-moz-animation: glow 1s ease-in-out infinite alternate;
|
|
animation: glow 1s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes glow {
|
|
from {
|
|
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073,
|
|
0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
|
|
}
|
|
|
|
to {
|
|
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
|
|
0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes glow {
|
|
from {
|
|
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073,
|
|
0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
|
|
}
|
|
|
|
to {
|
|
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
|
|
0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes glow {
|
|
from {
|
|
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073,
|
|
0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
|
|
}
|
|
|
|
to {
|
|
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
|
|
0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
|
|
}
|
|
}
|
|
|
|
.chrome {
|
|
font-family: "Montserrat";
|
|
font-weight: 900;
|
|
background-image: linear-gradient(
|
|
#2989cc 0%,
|
|
#d3e5ec 50%,
|
|
#592451 51%,
|
|
#b3628d 55%,
|
|
#592451 59%,
|
|
#b3628d 65%,
|
|
#ac86a6 75%,
|
|
#b3628d 100%
|
|
);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-text-stroke-width: 1px;
|
|
-webkit-text-stroke-color: rgba(255, 255, 255, 0.4);
|
|
position: relative;
|
|
}
|
|
.chrome.large {
|
|
font-size: calc(30px + 15vh);
|
|
font-size: 100%;
|
|
font-size: 15vw;
|
|
}
|
|
.chrome.medium {
|
|
font-size: calc(30px + 10vh);
|
|
font-size: 100%;
|
|
font-size: 10vw;
|
|
}
|
|
.chrome.small {
|
|
font-size: calc(30px+7vh);
|
|
font-size: 100%;
|
|
font-size: 5vw;
|
|
}
|
|
@media screen and (max-width: 850px) {
|
|
.chrome.large {
|
|
font-size: calc(20px + 5vh);
|
|
}
|
|
.chrome.medium {
|
|
font-size: calc(20px + 3vh);
|
|
}
|
|
.chrome.small {
|
|
font-size: calc(20px + 1vh);
|
|
}
|
|
}
|
|
|
|
.chrome:before {
|
|
content: attr(data-text);
|
|
text-shadow: -1px -1px 1px #2989cc, -2px -2px 1px #2989cc,
|
|
-3px -3px 1px #2989cc, 1px 1px 1px #000, 0px -1px 2px #000,
|
|
-1px -2px 2px #000, 0 0 5px rgba(255, 255, 255, 1);
|
|
opacity: 1;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
.shine:after {
|
|
content: attr(data-text);
|
|
background-image: linear-gradient(
|
|
225deg,
|
|
transparent 53%,
|
|
white 55%,
|
|
transparent 58%
|
|
);
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
z-index: 999;
|
|
background-size: 400% 400%;
|
|
animation: shine 10s ease infinite;
|
|
animation-delay: var(--shine-delay, 0s);
|
|
}
|
|
|
|
@keyframes shine {
|
|
0% {
|
|
background-position: 0% 51%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 51%;
|
|
}
|
|
}
|
|
|
|
.spark {
|
|
margin-top: calc(4vh);
|
|
margin-left: -0.3em;
|
|
line-height: 0;
|
|
position: absolute;
|
|
width: 37px;
|
|
height: 45px;
|
|
z-index: 999;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='120 250 1700 1200' width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --%3E%3Cg%3E%3Ctitle%3Ebackground%3C/title%3E%3Crect fill='none' id='canvas_background' height='402' width='182' y='-1' x='-1'/%3E%3Cg display='none' overflow='visible' y='0' x='0' height='100%25' width='100%25' id='canvasGrid'%3E%3Crect fill='url(%23gridpattern)' stroke-width='0' y='0' x='0' height='100%25' width='100%25'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cellipse ry='183' rx='5' id='svg_2' cy='197.0375' cx='274.5' stroke-width='0' stroke='%23000' fill='%23fff'/%3E%3Cellipse transform='rotate(90 274.50000000000006,197.03750610351565) ' ry='183' rx='5' id='svg_3' cy='197.0375' cx='274.5' stroke-width='0' stroke='%23000' fill='%23fff'/%3E%3Cellipse stroke='%23000' transform='rotate(126.69925689697266 276.19342041015625,195.4363708496094) ' ry='90.194158' rx='3.223029' id='svg_4' cy='195.43637' cx='276.193439' stroke-width='0' fill='%23fff'/%3E%3Cellipse stroke='%23000' transform='rotate(-134.6077117919922 276.19342041015625,195.43637084960938) ' ry='90.194158' rx='3.223029' id='svg_5' cy='195.43637' cx='276.193439' stroke-width='0' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
|
|
filter: blur(0.5px);
|
|
transform: scale(0);
|
|
animation: blip 5s infinite;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
.chrome:last-of-type .spark {
|
|
animation-delay: -2.5s;
|
|
}
|
|
|
|
@keyframes blip {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
|
|
5% {
|
|
transform: scale(1.2) rotate(0deg);
|
|
}
|
|
|
|
6% {
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
|
|
8% {
|
|
transform: scale(1) rotate(180deg);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1) rotate(180deg);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes blip {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
|
|
5% {
|
|
transform: scale(1.2) rotate(0deg);
|
|
}
|
|
|
|
6% {
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
|
|
8% {
|
|
transform: scale(1) rotate(180deg);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1) rotate(180deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes blip {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
|
|
5% {
|
|
transform: scale(1.2) rotate(0deg);
|
|
}
|
|
|
|
6% {
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
|
|
8% {
|
|
transform: scale(1) rotate(180deg);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1) rotate(180deg);
|
|
}
|
|
}
|