body {
    margin: 0;
    background-color: #325880;
    font-family: Helvetica;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

nav {
    height: 8vh;
    width: 100vw;
    margin-bottom: 4vh;
    background-color: #00000040;
    color: #f5f5dc;
    font-size: 4vmin;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-item {
    margin: 0vh 4vh;
    padding: 0vh 4vh;
}

#guesses {
    font-weight: bold;
}

#restart {
    height: 8vh;
    border: none;
    background-color: #f5f5dc00;
    color: #325880;
    font-family: Helvetica;
    font-size: 4vmin;
    font-weight: bold;
    cursor: pointer;
}

#restart:hover {
    background-color: #325880;
    color: #f5f5dc;
}

#mesa {
    height: 82vh;
    width: 160vh;
    margin: 0;
   
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-flow: row wrap;
    gap: 4vmin;
}

footer {
    width: 160vh;
    display: flex;
    justify-content: flex-start;
}

footer p {
    font-size: 2vmin;
    color: #00000040;
    margin: 0vmin 4vmin 4vmin;
}

footer p a {
    color: #00000040;
}

.card {
    height: 22vmin; 
    width: 22vmin; 
    background-color: #f5f5dc;

    border-radius: 2vmin;
    box-shadow: 1px 1px 4px #00000040, 4px 4px 10px #00000040; 

    cursor: pointer;  

    display: flex;
    justify-content: center;
    align-items: center;

    transition: 0.4s;  
    transform-style: preserve-3d; 
}

.card img {
    height: 22vmin; 
    width: 22vmin; 

    border-radius: 2vmin;

    transform: rotateY(180deg);
    backface-visibility: hidden;
}

.card.view {  
    transform: rotateY(180deg);
}

.collected {
    opacity: 0;
    cursor: default; 
} 

.review img {
    backface-visibility: visible;
}

@media only screen and (max-width: 768px) { 

    .nav-item {
        margin: 0vh;
    }    

    #mesa {
        height: 160vw;
        width: 82vw;
    }

    footer {
        width: 82vw;
        justify-content: center;
    }

    footer p {
        margin: 4vh 0vh;
    }

}