:root {
    --cell-size: 120px;
    --cell-gutter: 60px;
}

#grid {
    width: calc(var(--cell-size) * 3 + var(--cell-gutter));
    height: calc(var(--cell-size) * 3 + var(--cell-gutter));

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}

.cell {
    height: var(--cell-size);
    width: var(--cell-size);
    background-color: white;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    cursor: pointer;
}

.bug {
    background-image: url('images/bug.png');
}

.splat {
    background-image: url('images/bug-splat.png'); /* va messo il bug schiacciato */
}

h3 {
    margin-bottom: 12px;
}

button {
    cursor: pointer;
    font-family: 'Press Start 2P', cursive;
    color: white;
    background-color: var(--accent-color);
    padding: 10px 15px;
}
