*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: whitesmoke;
}

header 
{
    padding: 3vh 0 3vh 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

header div {
    display: flex;
    justify-content: center;
}

header h1 {
    text-align: center;
    text-transform: uppercase;
}

#header_gameOver {
    display: flex;
    padding-top: 1vh;
    align-items: center;
    color: transparent;
    text-transform: uppercase;
}

#header_gameOver label {
    text-transform: uppercase;
    cursor: grab;
}

main {
    padding-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;

}

header div span:first-child {
    text-transform: capitalize;
    font-weight: bolder;
}

.bord_container {
}

.header_startAgain {
    display: none;
}

.canvas {
    width: min(70vh, 70vw);
    height: min(70vh, 70vw);
    background-color: rgb(183, 155, 112);
    outline: black 3px solid;
}

@media only screen and (max-width: 500px) {
    .canvas {
        width: min(90vh, 90vw);
        height: min(90vh, 90vw);
        background-color: rgb(183, 155, 112);
        outline: black 3px solid;
    }
}