body {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column; /* coloquei pro h1 ficar em cima do main, e enquanto eu escrevia
     esse comentário a IA do VSCode me humilhou de forma gratuita falando que não é a melhor forma, mas, existe outra? (desconfio que seja grid)*/
    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: 100vh; /* eu perguntei pra IA se tinha algo que podia melhorar,
     ela me sugeriu trocar pra dvh, mas não tá dando overflow, então, não ligo #contradependenciasdeIA #professormeda10 */
}

main {
    padding: 0;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr; /* isso é inutil, coloquei pra garantir mas o grid-template-columns já faz isso sozinho */
    gap: 5px;

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

    min-width: 40vh;
    min-height: 40vh;

    background-color: black; /* a função desse lil bro é deixar as gaps pretas
     e essa é a melhor forma que encontrei e espero que o professor me ensine as formas sagradas pra fazer isso */
    button {
        width: 100%;
        height: 100%;

        font-size: 10vh; /* isso serve pra fonte não ficar bugadona */
    }

    button:hover {
      color: rgb(192, 192, 192);
      background-color: rgb(175, 175, 175);
    }
}

h1 {
    font-size: clamp(1rem, 5vw, 2rem);
}

#contadores {
    font-size: clamp(1rem, 3.5vw, 2rem);
    padding: 0;
    p{
        margin: 0;    
    }
}