main.css

body {
    background-color: #dbd8d8;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}



.mainDisplay {
    width: 100vw;
    height: 100vh;
    display:flex;
    flex-direction: column;
}

.Agrupa{
    display:flex;
    flex-direction: row;
    justify-content:center ;
}

.BlocoDeJogo {
    background: rgba(5, 5, 5, 0.667);
    box-shadow: 0px 10px 4px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    /*grid-column: 2/3; */
    grid-row: 2/3;
    justify-content: center;
    /*corrige o problema ao aumentar e diminuir a largura do ecrã*/ 
    min-width:600px;
    max-width:100%;
    align-items: center; 
    min-height: 500px;
    max-height: 100%;
    
}

.botoes {
    width: 90%;
    height: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;
    margin-bottom: 5%;
    align-items: center;
}

.botoes>button {
    position:inherit;
    width: 32%;
    height: 32%;
    margin-top: 1%;
    max-width: 32%;
    max-height: 32%;
    border: none;
    justify-content: center;
    background-color:#dbd8d8;
    vertical-align: top;
    font-size: 100px;

}

.botoes>button:hover {
    width: 32%;
    height: 32%;
    margin-top: 1%;
    border: none;
    justify-content: center;
    background-color: aliceblue;
}


.titulo {
    grid-column: 2/3;
    grid-row: 1/3;
    text-align: center;
    height:50px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font: bold;
    font-size: 5rem;
}

.scores {
    grid-column: 3/3;
    grid-row: 2/3;
    margin-left: 100px;
}