html,
body,
#canvas {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
}

#debug {
   font-family: Monospace, Monospace;
   font-size: 0.7rem;
   position: fixed;
   color: white;
   text-shadow: 0 0 2px black;
   top: 0.5rem;
   left: 0.5rem;
}

#canvas,
#joystick,
#form {
   position: fixed;
   touch-action: none;
}

#joystick {
   left: 0;
   bottom: 0;
   width: 50vmin;
   height: 50vmin;
   background: radial-gradient(closest-side at center,
         #0004,
         #0000);
}

#joystick>:first-child {
   width: 100%;
   height: 100%;
   border-radius: 100%;
   background: radial-gradient(closest-side at center,
         #ffff,
         #ffff,
         #fffc,
         #ffff 49%,
         #fff0 50%);
}