@font-face {
  font-family: PressStart2P;
  src: url(fonts/PressStart2P-Regular.ttf);
 }

 :root {
  --grid-color: #262927;
  --bg-color: #2cff05;
  --text-color: var(--grid-color);
  --text-color-alt: #dfede4;
 }

 *,
 *::before,
 *::after {
  box-sizing: border-box;
 }

 ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
 }


 body {
  position: relative;
  padding-top: calc(18rem);
  padding-bottom: 4rem;
  padding-inline: 4rem;
  margin: 0;
  overflow: hidden;

  width: 100svw;
  height: 100svh;

  background-color: var(--bg-color);
  background-size: 4rem 4rem;
  background-image:
   linear-gradient(to right, var(--grid-color) 2px, transparent 2px),
   linear-gradient(to bottom, var(--grid-color) 2px, transparent 2px);
  /* background-size: 40px 60px; */
  /* background-image: radial-gradient(circle, #000000 2px, rgba(0, 0, 0, 0) 1px); */
  color: var(--text-color);
  font-family: PressStart2P;

  /* avoid zoom on double tap */
  touch-action: manipulation;
 }

 #frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
 }