@font-face {
  font-family: BoldPixels;
  src: url("/font/BoldPixels.otf");
}

* {
  padding: 0;
  margin: 0;

  font-family: BoldPixels, sans-serif;
  font-weight: 400;
  font-style: normal;
}

html,
body {
  background: #444;
  touch-action: manipulation;
}

body {
  display: flex;
  justify-content: center;
}

.canvas-container {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

canvas {
  max-width:100%;
  background: #555;
  image-rendering: pixelated;
}

.buttons {
  display: flex;
  justify-content: space-evenly;
  padding: 1rem;
  column-gap: 1rem;
}

button {
  padding: 0 1rem;
  font-size: xx-large;
  color: white;
  border: 3px solid white;
  background: none;
  cursor: pointer;
}

button:hover {
  background: rgba(255, 255, 255, 0.05);
}