Difference between revisions of "User:Zeklyn/april/Page.css"

Latest revision as of 17:48, 29 March 2019

#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;
}
    }