section{
    width: 100%;
    height: 100vh;
    color: rgb(254, 255, 221);
    background: linear-gradient( -45deg, #fffb04, #1d0c02, #c71a07, #534d0a);
    background-size: 400% 400%;
    position: relative;
    animation: change 7s ease-in-out infinite;
}

.floating { 
    position:absolute;
    top: 10px;
    left: 10px;
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 60px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;

}



h1{
    font-size: 5rem;
    text-transform: uppercase;
    letter-spacing: 0px;
    position: absolute;
    /*width: 100%;
    height: 100%;*/
    bottom: 10px;
    left: 0;
    transform: rotateY(180deg);
    padding: 2rem;
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
p{
    font-size:16px;
    position:absolute;
    bottom:80px;
    left:20px;
    color:white;
    opacity:0%; 
    
}
p:active{
    animation-name: appear;
    animation-duration: 10s;
}
@keyframes appear {
    0% { opacity:25%; transform: translate(0,  0px); }
    50%  { opacity:50%; transform: translate(0,  -15px);}
    100%   {opacity:100%; transform: translate(0,  -30px);}   
}


h2{
    font-size: 5rem;
    text-transform: uppercase;
    letter-spacing: 0px;
    position: absolute;
    /*width: 100%;
    height: 100%;*/
    bottom: 10px;
    left: 600px;
    transform: rotateY(180deg);
    padding: 2rem;
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
p{
    font-size:16px;
    position:absolute;
    bottom:100px;
    left:20px;
    color:white;
    opacity:0%; 
    
}
p:active{
    animation-name: appear;
    animation-duration: 10s;
}
@keyframes appear {
    0% { opacity:25%; transform: translate(0,  0px); }
    50%  { opacity:50%; transform: translate(0,  -15px);}
    100%   {opacity:100%; transform: translate(0,  -30px);}   
}


h3{
    font-size: 5rem;
    text-transform: uppercase;
    letter-spacing: 0px;
    position: absolute;
    /*width: 100%;
    height: 100%;*/
    bottom: 10px;
    left: 800px;
    transform: rotateY(180deg);
    padding: 2rem;
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

h4{
    font-size: 5rem;
    text-transform: uppercase;
    letter-spacing: 0px;
    position: absolute;
    /*width: 100%;
    height: 100%;*/
    bottom: 10px;
    left: 1000px;
    transform: rotateY(180deg);
    padding: 2rem;
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes change {
    0%{
        background-position: 0 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0 50%;
    }
}


.float { 
    width: 100px;
    height: 181px;
    position: absolute;
    top:0px;
    left: 500px;
}