style.css

:root {
    --button-default:  rgb(171, 219, 221);
    --button-hover:      rgb(161, 207, 209);
    --button-shadow:     #bbb;
}

* {
    font-family: 'Noto Sans JP', sans-serif;
}

body {
    background-color: beige;
}

h1 {
    font-size: 4em;
    text-align: center;
    text-shadow: 2px 2px 0px var(--button-shadow);
    margin-top: 20px;
}

footer {
    text-align: center;
    position: relative;
    bottom: 10px;
}

p {
    margin: 0 0;
}

/* BUTTON */
.button {
    width: 90px;
    height: 35px;
    display: inline-block;
    margin: 5px 5px;
    outline: 0;
    border-radius: 10px;
    border: 2px solid black;
    background-color: var(--button-default);

    font-size: 1.2em;
    text-align: center;
    vertical-align: middle;
}

.button:hover {
    box-shadow: 2px 2px 0px 0px var(--button-shadow);
}

.button:active {
    box-shadow: none;
}

#size-button {
    font-size: 12px;
}

/* GRID */
#grid {
    display: grid;
    min-height: 500px;
    max-width: 500px;
    margin: 2rem auto;
    border: 4px solid black;
}

.grid-block {
    border: 1px solid black;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background-color: white;
}