* {
    font-family: "Noto Sans JP";
    font-display: swap;
}

body {
    max-width: 640px;
    padding: 0 0.5em;
    margin: auto;
}

h1 {
    font-size: 130%;
    font-weight: 100;
    margin: 0;
    padding: 0.5em;
    border-bottom: 1px solid black;
}

h2 {
    font-size: 120%;
    font-weight: 100;
    margin: 2em 0.5em 1em;
    padding: 0.25em 0.5em;
    border-left: 5px solid darkblue;
    border-bottom: 1px dashed black;
}

p {
    margin: 0.5em 1em;
}

#canvas_wrapper {
    max-width: 800px;
    margin: 0 auto;
}
canvas {
    width: 100%;
    border: 1px solid black;
    margin: 16px 0;
    image-rendering: pixelated;
}
.spb {
    font-size: min(8vw, 32px);
    max-width: 80px;
    max-height: 80px;
    width: 20vw;
    height: 20vw;
    border: 1px solid black;
    border-radius: 100%;
    position: fixed;
    opacity: 70%;
    visibility: collapse;
}

#lButton {
    left: 5vw;
    bottom: 25vw;
}
#rButton {
    left: 35vw;
    bottom: 25vw;
}
#uButton {
    left: 20vw;
    bottom: 40vw;
}
#dButton {
    left: 20vw;
    bottom: 10vw;
}
#cButton {
    right: 15vw;
    bottom: 10vw;
}
#reButton {
    left: 5vw;
    bottom: 70vw;
}
#sButton {
    right: 5vw;
    bottom: 40vw;
}
#esButton {
    font-size: min(4vw, 16px);
    right: 5vw;
    bottom: 70vw;
}