140 lines
2.4 KiB
CSS
140 lines
2.4 KiB
CSS
body {
|
|
font-family: canada-type-gibson, sans-serif;
|
|
font-size: .5rem;
|
|
font-weight: 300;
|
|
font-size: 1.25rem;
|
|
display: grid;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
img {
|
|
border-radius: 8px;
|
|
margin: auto;
|
|
}
|
|
|
|
.alerts {
|
|
display: grid;
|
|
justify-content: center;
|
|
width: 1040px;
|
|
text-align: center;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.text-shadows {
|
|
text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d,
|
|
9px 9px #f07a6a, 12px 12px 0 #f07a6a;
|
|
font-family: bungee, sans-serif;
|
|
font-size: calc(.25rem + 5vw);
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
margin: 0;
|
|
color: #f6aca2;
|
|
animation: shadows 1.5s ease-in infinite, move 1.5s ease-in infinite;
|
|
letter-spacing: 0.4rem;
|
|
}
|
|
|
|
|
|
.fade-in {
|
|
animation: fadeIn ease 6s;
|
|
-webkit-animation: fadeIn ease 6s;
|
|
-moz-animation: fadeIn ease 6s;
|
|
-o-animation: fadeIn ease 6s;
|
|
-ms-animation: fadeIn ease 6s;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {opacity:0;}
|
|
100% {opacity:1;}
|
|
}
|
|
|
|
@-moz-keyframes fadeIn {
|
|
0% {opacity:0;}
|
|
100% {opacity:1;}
|
|
}
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
0% {opacity:0;}
|
|
100% {opacity:1;}
|
|
}
|
|
|
|
@-o-keyframes fadeIn {
|
|
0% {opacity:0;}
|
|
100% {opacity:1;}
|
|
}
|
|
|
|
@-ms-keyframes fadeIn {
|
|
0% {opacity:0;}
|
|
100% {opacity:1;}
|
|
}
|
|
@keyframes shadows {
|
|
0% {
|
|
text-shadow: none;
|
|
}
|
|
10% {
|
|
text-shadow: 3px 3px 0 #f49b90;
|
|
}
|
|
20% {
|
|
text-shadow: 3px 3px 0 #f49b90,
|
|
6px 6px 0 #f28b7d;
|
|
}
|
|
30% {
|
|
text-shadow: 3px 3px 0 #f28b7d,
|
|
6px 6px 0 #f28b7d, 9px 9px #f07a6a;
|
|
}
|
|
40% {
|
|
text-shadow: 3px 3px 0 #f49b90,
|
|
6px 6px 0 #f28b7d, 9px 9px #f07a6a,
|
|
12px 12px 0 #ee6352;
|
|
}
|
|
50% {
|
|
text-shadow: 3px 3px 0 #f49b90,
|
|
6px 6px 0 #f28b7d, 9px 9px #f07a6a,
|
|
12px 12px 0 #ee6352;
|
|
}
|
|
60% {
|
|
text-shadow: 3px 3px 0 #f49b90,
|
|
6px 6px 0 #f28b7d, 9px 9px #f07a6a,
|
|
12px 12px 0 #ee6352;
|
|
}
|
|
70% {
|
|
text-shadow: 3px 3px 0 #f49b90,
|
|
6px 6px 0 #f28b7d, 9px 9px #f07a6a;
|
|
}
|
|
80% {
|
|
text-shadow: 3px 3px 0 #f49b90,
|
|
6px 6px 0 #f28b7d;
|
|
}
|
|
90% {
|
|
text-shadow: 3px 3px 0 #f49b90;
|
|
}
|
|
100% {
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
|
|
@keyframes move {
|
|
0% {
|
|
transform: translate(0px, 0px);
|
|
}
|
|
40% {
|
|
transform: translate(-12px, -12px);
|
|
}
|
|
50% {
|
|
transform: translate(-12px, -12px);
|
|
}
|
|
60% {
|
|
transform: translate(-12px, -12px);
|
|
}
|
|
100% {
|
|
transform: translate(0px, 0px);
|
|
}
|
|
}
|