html,
body {
  position: relative;
  width: 100%;
  height: 100%;
}

html {
  --max-width: 416px;
}

html.dark {
  --bg-color: #243447;
  --text-color: #fff;
  --grid-border-color: #3d5566;
  --cell-bg-color: #1b2836;
  --cell-text-color: #fff;
  --button-bg-color: #1b2836;
  --button-text-color: #fff;
}

html.light {
  --bg-color: #f0ebd8;
  --text-color: #1b2836;
  --grid-border-color: #655e56;
  --cell-bg-color: #c2bcad;
  --cell-text-color: #1b2836;
  --button-bg-color: #c2bcad;
  --button-text-color: #1b2836;
}

@font-face {
  font-family: "B612 Mono";
  src: url("/assets/fonts/B612Mono-Regular.woff2");
}

* {
  font-family: "B612 Mono", monospace;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 500ms;
  margin: 0;
  box-sizing: border-box;
  overscroll-behavior: contain;
}