Untitled

:root {
    --dark-brown: #2D2424;
    --brown: #5C3D2E;
    --orange-brown: #B85C38;
    --light: #E0C097;
    --button-hover: hsl(20, 35%, 17%);
}


body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--dark-brown);
    margin: 0;
}

.welcome-text { 
    font-size: 3rem;
    text-align: center;
    color: var(--orange-brown);

    animation: text-down 1s;
}

button {
    border: .5px solid var(--light);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
    border-radius: .2em;
    background-color: var(--brown);
    color: var(--light);
    padding-bottom: .2em;
    padding-top: .2em;
    cursor: pointer;
    transition-duration: 0.4s;
    animation-name: opacity-come;
    animation-duration: 2s;

}

button:hover {
    background-color: var(--button-hover);
}

.user-state-buttons {
    margin-top: 5em;
    text-align: center;
}

.user-state-buttons button{
    font-size: 4.8rem;
    text-align: center;
    margin-top: .3em;
    margin-bottom: .3em;
    width: 95%;
}

.ranking-button {
    margin-top: 2em;
    text-align: center;

}

.ranking-button button {
    font-size: 3rem;
    width: 60%;
}

/* footer */
footer {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4%;
    background-color: var(--brown);
    color: var(--light);
 }

footer img {
    width: 2rem;
    height: 2rem;
}

.footer-img {
    margin-top: .35em;
    margin-left: 0.3em;
    margin-right: 0.3em;
}

.footer-text {
    margin-top: .75em;
    margin-left: 0.3em;
    margin-right: 0.3em;
}


@media (min-width: 930px) {
    .user-state-buttons {
        display: flex;
        justify-content: center;
        margin-top: 8em;
    }
    
    .user-state-buttons button{
        margin-top: .3em;
        margin-bottom: .3em;
        margin-left: 0.5em;
        margin-right: 0.5em;
        width: auto;
    }
    
    .ranking-button {
        margin-top: 5em;
    }
    
    .ranking-button button {
        width: 35%;
    }

}

@keyframes opacity-come {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes text-down {
    from {
        opacity: 0;
        transform: translateY(-2em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}