style.css

html, body {
    margin: 0;
    padding: 0;
    font-family: monospace;
    font-weight: 900;
    height: 100%;
}

#welcome {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: white;
    z-index: 1;
    user-select: none;
}

#title {
    font-size: 5rem;
    padding: 0;
    margin: 0;
}

#description {
    font-family: inherit;
}

#start {
    text-align: center;
    font-family: inherit;
    font-weight: inherit;
    border: none;
    background: none;
    text-decoration: underline 2px;
    text-underline-offset: 5px;
}

#start:hover {
    cursor: pointer;
    text-decoration-style: dotted;
}

#container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#tree {
    display: grid; 
    grid-template-rows: 1fr 1fr;
    grid-template-columns: repeat(13, 1fr);
    gap: 0px;
}

.node {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
    margin: 1px;
}

.checkbox {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.checkbox:checked + .code {
    color: black;
}

.code {
    transition: 80ms;
    display: flex;
    color: lightgrey;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    user-select: none;
    font-size: 2rem;
    z-index: -2;
    /* border: solid 2px black; */
    box-sizing: border-box;
}

#stats {
    width: 636px;
    margin-top: 1rem;
    display: grid; 
    grid-template-rows: 1fr;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    justify-items: center;
    align-items: center;

    user-select: none;
}

.counter {
    text-align: center;
}

footer {
    z-index: 2;
    color: #bababa;

    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%);

    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

footer  * {
    margin: 0 6px 0 6px;
}

footer a {
    font-weight: 900;
    text-decoration:none; 
    color: inherit;
}

footer a:hover { color: black; }

#how-to-play-label {
    color: inherit;
    transition: 80;
}

#how-to-play-label:hover {
    color: black;
    cursor: pointer;
}

#how-to-play-checkbox {
    display: none;
}

#how-to-play-checkbox:checked + #how-to-play-label {
    color: black;
}

#how-to-play {
    position: absolute;
    bottom: 7.5%;
    left: 50%;
    transform: translate(-50%);
    margin: 0;
    width: 500px;
    z-index: 3;
    text-align: center;
    color: #bababa;
    visibility: hidden;
}

/* https://toughengineer.github.io/demo/slider-styler */
input[type=range].volume {
  width: 75%;
  height: 2.2em;
  margin: 0;
  -webkit-appearance: none;
}

/*progress support*/
input[type=range].volume.slider-progress {
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--value) - var(--min)) / var(--range));
  --sx: calc(0.5 * 8px + var(--ratio) * (100% - 8px));
}

input[type=range].volume:focus {
  outline: none;
}

/*webkit*/
input[type=range].volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: black;
  border: none;
  box-shadow: none;
  margin-top: calc(2px * 0.5 - 8px * 0.5);
}

input[type=range].volume::-webkit-slider-runnable-track {
  height: 2px;
  border: none;
  border-radius: 0;
  background: #bababa;
  box-shadow: none;
}

input[type=range].volume.slider-progress::-webkit-slider-runnable-track {
  background: linear-gradient(black,black) 0/var(--sx) 100% no-repeat, #bababa;
}

/*mozilla*/
input[type=range].volume::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: black;
  border: none;
  box-shadow: none;
}

input[type=range].volume::-moz-range-track {
  height: 2px;
  border: none;
  border-radius: 0;
  background: #bababa;
  box-shadow: none;
}

input[type=range].volume.slider-progress::-moz-range-track {
  background: linear-gradient(black,black) 0/var(--sx) 100% no-repeat, #bababa;
}

/*ms*/
input[type=range].volume::-ms-fill-upper {
  background: transparent;
  border-color: transparent;
}

input[type=range].volume::-ms-fill-lower {
  background: transparent;
  border-color: transparent;
}

input[type=range].volume::-ms-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: black;
  border: none;
  box-shadow: none;
  margin-top: 0;
  box-sizing: border-box;
}

input[type=range].volume::-ms-track {
  height: 2px;
  border-radius: 0;
  background: #bababa;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

input[type=range].volume.slider-progress::-ms-fill-lower {
  height: 2px;
  border-radius: 0px 0 0 0px;
  margin: -undefined 0 -undefined -undefined;
  background: black;
  border: none;
  border-right-width: 0;
}