Team Fortress Wiki:April Fools' Day/2019/Main Page/Page.css
- welcome-text-wrapper {
margin-top: 150px !important;
overflow: hidden;
}
.top-text {
-webkit-user-select: none;
-moz-user-select: none;
color: #3668D3;
background: #FFFF00;
position: absolute;
font-size: 1.3rem;
width: 11rem;
margin-left: auto;
margin-right: auto;
top: 85px;
left: -200px;
right: 100px;
animation: top-text 1.2s infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes top-text {
from {transform: rotate(-5deg);}
to {transform: rotate(5deg);}
}
.bottom-text {
-webkit-user-select: none;
-moz-user-select: none;
color: #3668D3;
background: #FF00FF;
position: absolute;
transform: rotate(-5deg);
width: 18rem;
margin-top: -3.5rem;
margin-left: auto;
margin-right: auto;
left: 50px;
right: -50px;
animation: bottom-text 1s infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes bottom-text {
from {transform: scale(0.9);}
to {transform: scale(1);}
}
.vertically-centered-text {
-webkit-user-select: none;
-moz-user-select: none;
color: #fff;
background: #00FF00;
-webkit-text-stroke: 1.5px #E4812E;
position: absolute;
font-weight: bold;
font-size: 2.2rem;
width: 28rem;
margin-left: auto;
margin-right: auto;
top: 110px;
left: -50px;
right: 50px;
padding: 2px;
animation: vertically-centered-text 4s infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes vertically-centered-text {
from {transform: rotate(1deg);}
to {transform: rotate(-8deg);}
}
/* Add mobile support */
@media only screen and (max-device-width: 660px) {
.top-text {
left: 0;
right: 10%;
}
.bottom-text {
left: 40%;
right: 0;
}
.vertically-centered-text {
left: 15%;
right: 0;
}
}
