:root,
.theme-light {
  --color-accent: #000000;
  --color-bg: #ffffff;
  --font-main: 'Inter', sans-serif;
  --font-accent: 'PressStart2P', fantasy;
  --font-weight-text: 400;
  --font-weight-title: 700;
  --contour-color: #000000;
  --animation-fill-color: #ff0000;
  --label-outline-color: #ffffff;
  --bg-image: repeating-linear-gradient(
      to right,
      #d3d3d3 0,
      #d3d3d3 2px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      to bottom,
      #d3d3d3 0,
      #d3d3d3 2px,
      transparent 2px,
      transparent 4px
    ),
    linear-gradient(to bottom, #e7e7e7 0.01%, #1a1a1a);
}

.theme-dark {
  --color-accent: #00cc14;
  --color-bg: #000000;
  --contour-color: #00cc14;
  --animation-fill-color: #ff0000;
  --label-outline-color: #000000;
  --bg-image: repeating-linear-gradient(
      to right,
      #000000 0,
      #000000 2px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      to bottom,
      #000000 0,
      #000000 2px,
      transparent 2px,
      transparent 4px
    ),
    linear-gradient(to bottom, #007f0c 0.01%, #004306);
}

@media (prefers-color-scheme: dark) {
  .theme-auto {
    --color-accent: #00cc14;
    --color-bg: #000000;
    --contour-color: #00cc14;
    --animation-fill-color: #ff0000;
    --label-outline-color: #000000;
    --bg-image: repeating-linear-gradient(
        to right,
        #000000 0,
        #000000 2px,
        transparent 2px,
        transparent 4px
      ),
      repeating-linear-gradient(
        to bottom,
        #000000 0,
        #000000 2px,
        transparent 2px,
        transparent 4px
      ),
      linear-gradient(to bottom, #007f0c 0.01%, #004306);
  }
}

@media (prefers-color-scheme: light) {
  .theme-auto {
    --color-accent: #000000;
    --color-bg: #ffffff;
    --contour-color: #000000;
    --animation-fill-color: #ff0000;
    --label-outline-color: #ffffff;
    --bg-image: repeating-linear-gradient(
        to right,
        #d3d3d3 0,
        #d3d3d3 2px,
        transparent 2px,
        transparent 4px
      ),
      repeating-linear-gradient(
        to bottom,
        #d3d3d3 0,
        #d3d3d3 2px,
        transparent 2px,
        transparent 4px
      ),
      linear-gradient(to bottom, #e7e7e7 0.01%, #1a1a1a);
  }
}