body{
    background:black;
    color:white;
    font-family:Palatino, Literata,Times;
}

p{
    font-size:1.5rem;
    text-align:center;
    margin-top:30vh;
    padding-left:25px;
    padding-right:25px;
}

#time{
    margin-top:300px;
}

.m14{
    position:relative;
    font-family:Palatino, Literata, Times;
    font-size:2rem;
    color:white;
}

.m14 .letters{
    position:absolute;
    margin:auto;
    left:0;
    top:0.3em;
    right:0;
    opacity:0;
    color:white;
}

*{
    margin:0;
    padding:0;
}

canvas{
    display:block;
}

#timer{
    color:red;
}

#hover{
    display:none;
}



#animation{
    animation-name:text;
    animation-duration:3s;
    animation-delay:9s;
    opacity:0;
    animation-fill-mode: forwards;
}



#container{
    position:fixed;
    bottom:50px;
    right:0;
    left:0;
    text-align:center;
    font-size:1rem;
}

#button{
    margin:auto;
}

a{
    font-family:Palatino, Literata, Times;
}

@keyframes text{
    0%{opacity:0;}
    100%{opacity:100;}
}

@media only screen and (min-width:800px){
    #animation{
        display:none;
    }

    p{
        font-size:2rem;
    }

    #hover{
        display:inline;
        opacity:70%;
    }

    .container{
        text-align:center;
        margin-top:50px;
    }

    .beginning{
        text-align:center;
    }

    #beginning{
        display:inline-block;
        margin-top:100px;
    }

    .label:hover:after{
        content:'But we can\0027t go back to the precise beginning.';
        opacity:100;
        font-size:3rem;
      }
      
      .label:after{
        content:'_______________';
        opacity:0;
      }

}