html, body, #grid {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #17140f;

    overflow: hidden;
}

#grid {
    column-gap: 0;
    column-fill: auto;
}

#grid > div {
    box-sizing: border-box;
    padding: 5px;

    break-inside: avoid;

    background-origin: content-box;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#grid > div {
    height: 100%;
}

#grid[data-size="2"] {
    column-count: 2;
}

#grid[data-size="2"] > div {
    height: 50%;
}

#grid[data-size="3"] {
    column-count: 3;
}

#grid[data-size="3"] > div {
    height: 33.3%;
}

.fab {
    display: block;
    margin-bottom: 10px;
    color: black;

    background-color: #F44336;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #F44336;
    border: none;
    outline: none;
    font-size: 36px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.buttons {
    position: absolute;
    right: 1em;
    top: 1em;
}

#undo img {
    width: 0.7em;
}