html, body {
    width:  100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-flow: column;
}

header {
    flex: 0 1 auto;
}

canvas {
    border: 1px solid black;
    flex: 1 1 auto;
}

small {
    flex: 0 1 16px;
    margin: 8px;
}

label {
    margin: 16px;
}

header {
    margin-bottom: 8px;
}

.buttongroup {
    display: flex;
    background: silver;
}
.buttongroup input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.buttongroup label {
    width: 1.5em;
    height: 1.5em;
    font-size: 1.5em;
    text-align: center;
}
.buttongroup input[type=radio]:checked + label {
    background: gray;
}
.buttongroup input[type=radio]:focus-visible + label {
    outline: 2px auto black;
    outline: auto -webkit-focus-ring-color;
}