/*
 * Base: palette and page reset.
 * This is the only file allowed to use tag selectors.
 * All other styles live in css/blocks/ and follow BEM.
 */

:root {
  /* 16-colour palette (NES style) */
  --color-black: #000000;
  --color-white: #fcfcfc;
  --color-gray: #7c7c7c;
  --color-light-gray: #bcbcbc;
  --color-red: #d82800;
  --color-orange: #fc7460;
  --color-yellow: #f8b800;
  --color-brown: #ac7c00;
  --color-green: #00a800;
  --color-light-green: #b8f818;
  --color-teal: #008888;
  --color-navy: #0000bc;
  --color-blue: #0058f8;
  --color-light-blue: #3cbcfc;
  --color-purple: #6844fc;
  --color-pink: #f878f8;

  /* Game area base size (scaled up by whole numbers in js/main.js) */
  --game-width: 256px;
  --game-height: 240px;
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--color-black);
  color: var(--color-white);
}

/* Shared blink: on 0.5 s, off 0.5 s. Use with `animation: blink 1s steps(1, end) infinite`. */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}