app.css

:root {
    --base-width: 500px;
    --base-height: 500px;
}

body {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 25% 25% 25% 25%;
}

#app {
    padding-bottom: 2.5rem;
    grid-column: 2 / 4;
    justify-self: center;
    min-height: calc(var(--base-height) + 4rem)
}

#app.is-dark,
#app.is-dark .title {
    background-color: tomato;
}

.pixelgrid {
    width: var(--base-width);
    height: var(--base-height);
    display: grid;
    background-color: #fff;
}

.buttons {
    grid-column: 1;
    grid-row: 1 / 4;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: space-around;
}

.buttons button {
    align-self: center;
}

footer {
    text-align: center;
    grid-column: 1 / -1;
    grid-row: 4 / -1;
    align-self: end;
}