canvas {
    border: solid;
    display: block;
    margin: auto;
    width: 800px;
    height: 600px;
    top: 10px;
    position: relative;
}
@media (max-width: 840px) {
  canvas {
    width: min(400px, 100%, calc(100svh - 40px));
    height: auto;
  }
}
div.settings {
    margin-top: 2em;
}
div.settingsItem {
    display: grid;
    place-items: center;
    width: 800px;
    margin: auto;
}
@media (max-width: 840px) {
  div.settingsItem {
    width: calc(min(400px, 100%, calc(100svh - 40px)) / 2);
    height: auto;
  }
}
div.settingsItem + div.settingsItem {
    margin-top: 2em;
}
@media (max-width: 840px) {
  div.settingsItem + div.settingsItem {
    margin-top: 3em;
  }
}
div.settingsInnerItem {
    transform: scale(2);
}
#character{
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px; /*game height - character height (200 - 50)*/
}
@keyframes jump{
    0%{top: 150px;}
    30%{top: 50px;}
    70%{top: 50px;}
    100%{top: 150px;}
}
.animate{
    animation: jump 300ms linear;
}
#block{
    width: 20px;
    height: 20px;
    background-color: blue;
    position: relative;
    top: 130px; /* game height - character height - block height (200 - 50 - 20) */
    left: 480px; /* game width - block width (500 - 20) */
    animation: block 2s infinite linear;
}
@keyframes block{
    0%{left: 500px} 
    100%{left: -20px}
}

/* changed via JS */
.hideBeforeStartup {
    display: none;
}
/* changed via JS */
.hideAfterStartup {
}