*{
    margin: 0;
    padding: 0;
}

body{
    background: white;
    font-family: 'Courier New', Courier, monospace;
}

nav {
    display: flex;
    font-family: "Bungee Spice", sans-serif ;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: rgb(37, 35, 35);
    height: 30px;
}

nav h1{
    color: aliceblue;
    font-family: "Bungee Spice", sans-serif;
}

.canvasText{
    display: flex;
    flex-wrap: wrap;
    margin:  10px 10px;
    justify-content: center;
    align-items: center;
}

.canvas {
    margin: 15vh auto;
    width: 80%;
    text-align: center;
}


/* buttons */

.buttons {
    display: flex;
    gap: 20px;
    margin: 20px auto;
    width: 80%;
    flex-wrap: wrap;
    justify-content: space-evenly;

}

.button{
    width: 100px;
    height: 100px;
    border: 2px solid black;
}


/* screen optimization */
@media (min-width: 768px) {
    .buttons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
    }
}

@media (max-width: 767px) {
    .canvas {
        margin: 10vh auto;
    }
}

@media (max-width: 600px) {
    .canvas {
        margin: 10vh auto;
    }
}

@media (max-width: 545px) {
    .canvas {
        margin: 2vh auto;
    }
}



/* colors */
#white {
    background: white;
}

#black {
    background: black;
}

#red {
    background: red;
}

#blue {
    background: blue;
}

#gray {
    background: gray;
}

#cyan {
    background: cyan;
}

#magenta {
    background: magenta;
}

#green {
    background: green;
}