* { padding:0; margin:0; vertical-align:baseline; list-style:none; border:0; text-decoration: none;}

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/*font-family: 'Press Start 2P', cursive;*/

body{
    background-image: url("../imagens/mesa.jpg");
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.close{
    width: 31.25rem;
    height: 43.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url("../imagens/capa.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.open{
    background-image: url("../imagens/fundo.gif");
    width: 50rem;
    height: 43.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

h1{
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    color: #B2A280;
}

h1:hover{
    font-size: 250%;
    cursor: pointer;
}

section{
    display: none;
    align-items: center;
    justify-content: center;
    padding-top: 15.625rem;
    gap: 6.25rem;
}

section div{
    display: flex;
    justify-content: center;
    width: 18.75rem;

}

div img{
    width: 5rem;
}

section p{
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 18.75rem;
}

button{
    display: none;
    background: none;
    font-size: 1rem;
    font-family: 'Press Start 2P', cursive;
}

button:hover{
    font-size: 130%;
}

#botoes{
    display: none;
    width: 85%;
    margin-bottom: 5rem;
}

.credits img{
    width: 35%;
}

.credits p{
    text-align: center;
    font-size: 100%;
}

a{
    color: rgb(122, 5, 5);
}

a:hover{
    cursor: pointer;
}


@media (max-width: 500px) {
    html{
        font-size: 9px;
    }
}