styles.css

p {
     font-size: 25px;
     font-family: 'georgia', cursive;
     text-align: center;
}
 body {
     background-color: lightblue;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
 h1 {
     font-family: 'Cinzel', serif;
     color: black;
     text-align: center;
     border: none;
     border-collapse: collapse;
     padding: 50px 500px 50px 500px;
     text-shadow: 1px 1px white;
     background: linear-gradient(lightyellow, transparent);
     text-transform: rgba(0, 0 ,0 , 0.5);
     box-shadow: 0 8px 16px 0 rgba(153, 67, 67, 0.2);
}

#description {
width: 50%;
}
 .container{
     text-align: center;
     flex: center;
}
 #generator {
     width: 150px;
     height: 30px;
     border: none;
     font-weight: 700;
     box-shadow: 0px 2px 10px rgba(0,0,0,.5);
     margin-bottom: 20px;
     margin-right: 20px;
     border-radius: 5px;
}

 #quotenumber {
     width: 150px;
     height: 30px;
     font-weight: 700;
     border: none;
     box-shadow: 0px 2px 10px rgba(0,0,0,.5);
     margin-bottom: 20px;
     border-radius: 5px;
}

 #btn {
     background-color: #4CAF50;
}
 #btn:hover {
    background-color: #3e8e41
}
 #btn:active {
     background-color: #3e8e41;
}
 #sentence {
     text-align: center;
     padding-top: 50px;
     margin-bottom: 25px;
     width: 50%;
     font-size: 30px;
     font-family: 'Quintessential', cursive
}
 .buttons {
     display: flex;
     flex-direction: column;
     justify-content: center;
}
 .genbtn {
    padding: 15px 25px;
    font-size: 20px;
    margin: 0em 30em 1.5em 30em;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    color: black;
    background-color: #f51616;
    border: none;
    border-radius: 10px;
    box-shadow: 0 9px #999;
}

.genbtn:active{
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

#quitbtn:hover {
    background-color: #990000;
}

#quitbtn:active {
    background-color: #990000;
}

#backbtn {
    padding: 15px 25px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    outline: none;
    text-transform: uppercase;
    color: black;
    background-color: #ffc400;
    border: none;
    border-radius: 10px;
    box-shadow: 0 9px #999;
    align-content: center;
}

 #backbtn:hover {
    background-color: #b58b00;
}
 #backbtn:active {
     background-color: #b58b00;
     box-shadow: 0 5px #666;
     transform: translateY(4px);
} 

/* Animation */

:root{
    --animation-duration: 500ms;
    --animation-delay: 500ms
}

h1{
    animation: appear var(--animation-duration);
}

#description{
    opacity: 0;
    animation: appear var(--animation-duration) var(--animation-delay) forwards;
}

select{
    opacity: 0;
    animation: appear var(--animation-duration) calc(var(--animation-delay) * 2) forwards;
}

#btn{
    opacity: 0;
    animation: appear var(--animation-duration) calc(var(--animation-delay) * 3) forwards;
}

#quitbtn{
    opacity: 0;
    animation: appear var(--animation-duration) calc(var(--animation-delay) * 4) forwards;
}

#sentence p{
    animation-name: appear;
    animation-duration: 2.5s;
}

@keyframes appear{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}