body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

main {
    text-align: center;
}

#grid, .box {
    display: grid;
    grid-template-columns: repeat(3, var(--size));
    grid-template-rows: repeat(3, var(--size));
}

#grid {
    --size: max-content;
    justify-content: center;
}

.box {
    --size: 8vh;
    border: 2px solid black;
}

.box input {
    border: 1px solid gray;
    box-sizing: border-box;
    font-size: 5vh;
    height: 100%;
    text-align: center;
    width: 100%;
}   

.box input:focus {
    outline-color: firebrick;
    outline-offset: 8px;
    z-index:1;
}

.box:nth-of-type(odd) input:nth-of-type(odd) {   
    background-color: #ddd;
}

.box:nth-of-type(even) input:nth-of-type(even) {
    background-color: #ddd;
}

#crab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    font-size: 12rem;
    z-index: -1;
}