@font-face {
    font-family: 'Classic Console';
    src: url(./assets/fonts/clacon2.ttf) format("truetype");
}

* {
    margin: 0;
    pad: 0;
    box-sizing: border-box;
    font-family: 'Classic Console', serif;
}

body {
    width: 90vw;
    margin: auto;
}

.header {
    margin: 20px 0;
    display: flex;
    gap: 10px;
    align-items: center;
}

#setGridInput {
    padding: 10px;
    width: 3em;
    font-size: 2em;
    text-align: center;
}

#setGridBtn {
    font-size: 1.5em;
    padding: 15px;
    box-shadow: inset 1px 2px 2px 5px rgb(226, 224, 224);
    background: gray;
    border: 1px solid gray;
    color: white;
    /* background-color: ; */
}

#setGridBtn:active {
    /* background-color: rgb(206, 203, 203); */
    background: rgb(192, 192, 192);
    box-shadow: inset 2px 1px 3px 5px rgb(126, 124, 124);
}

#container {
    display: flex;
    flex-direction: column;
    width: 90vw;
    height: 700px;
    margin: 20px auto;
}

.grid-square {
    height: 100%;
    width: 100%;
    border: 0.5px solid rgba(215, 206, 206, 0.792);
}

.grid-row {
    width: 100%;
    display: flex;
    flex: 1;
}