:root {
  --page-background: white;
  --over-background: #e0e0e0;
  --link-inactive: #989898;
  --link-active: #2d2d2d;
  --boost-color: rgb(var(--boost-color-values));
}
:root.classic {
  --player-color: #37c537;
  --boost-color-values: 255, 137, 58;
  --target-color: #fb4d4d;
  --empty-color: #fff1f1;
}
:root.blue {
  --player-color: #ff692e;
  --boost-color-values: 57, 200, 129;
  --target-color: #6963dd;
  --empty-color: #f0f7ff;
}
:root.pink {
  --target-color: #a171d1;
  --boost-color-values: 255, 80, 255;
  --player-color: #32ffea;
  --empty-color: #f5e9f5;
}
:root.camouflage {
  --target-color: #7acdb2;
  --boost-color-values: 32, 186, 255;
  --player-color: #fac06a;
  --empty-color: #ddf4ea;
}
:root.reddish {
  --player-color: #f1c40f;
  --boost-color-values: 255, 50, 100;
  --target-color: #df776e;
  --empty-color: #cfc6c5;
}
:root.gold {
  --player-color: #2dee84;
  --boost-color-values: 255, 215, 0;
  --target-color: #d2b582;
  --empty-color: #bbb4a7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-background: #121212;
    --link-inactive: #626262;
    --link-active: #dcdcdc;
    --over-background: #242424;
    color-scheme: dark;
  }
  :root.classic {
    --player-color: #1fdc1f;
    --boost-color-values: 227, 137, 58;
    --target-color: #ff1313;
    --empty-color: #200808;
  }
  :root.blue {
    --player-color: #e36432;
    --boost-color-values: 57, 181, 129;
    --target-color: #6762ba;
    --empty-color: #081320;
  }
  :root.pink {
    --target-color: #7324c2;
    --boost-color-values: 255, 0, 255;
    --player-color: #23dfcc;
    --empty-color: #200820 ;
  }
  :root.camouflage {
    --target-color: #128a64;
    --boost-color-values: 32, 186, 233;
    --player-color: #d4aa6c;
    --empty-color: #111716 ;
  }
  :root.reddish {
    --player-color: #f1c40f;
    --boost-color-values: 255, 61, 70;
    --target-color: #bd645c;
    --empty-color: #210d0a;
  }
  :root.gold {
    --player-color: #25d072;
    --boost-color-values: 255, 215, 0;
    --target-color: #988460;
    --empty-color: #17140f;
  }
}
body {
  margin: 0;
  background: var(--page-background);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

nav {
  display: flex;
  align-items: center;
  height: 80px;
  gap: 12px;
}

.game-modes {
  display: none;
  position: absolute;
  left: 0;
}

.game-mode-link {
  position: relative;
}
.game-mode-link:hover, .game-mode-link:focus, .game-mode-link:focus-within {
  cursor: pointer;
  color: currentColor;
}
.game-mode-link:hover .game-modes, .game-mode-link:focus .game-modes, .game-mode-link:focus-within .game-modes {
  padding: 5px;
  display: revert;
}

a.non-distract, .non-distract a, .non-distract .game-mode-link {
  color: var(--link-inactive);
  text-decoration: none;
}
a.non-distract:hover, a.non-distract:focus, .non-distract a:hover, .non-distract a:focus, .non-distract .game-mode-link:hover, .non-distract .game-mode-link:focus {
  color: currentColor;
  text-decoration: revert;
}

@media (max-width: 842px) {
  .game-modes {
    z-index: 10;
    top: 50px;
    padding: 10px !important;
    background: var(--over-background);
    border-radius: 10px;
  }
  .game-modes a {
    color: currentColor;
  }
}
#theme-switcher {
  padding: 5px;
  aspect-ratio: 1/1;
  border: 4px solid var(--link-inactive);
  border-radius: 10px;
  transition: background 0.1s;
  margin-left: auto;
  margin-right: 0.67em;
}
#theme-switcher svg {
  height: 30px;
  vertical-align: middle;
  stroke-width: 0.8;
  stroke: var(--link-inactive);
}
#theme-switcher:hover {
  background: var(--link-inactive);
}

main {
  margin: 10px;
}

body {
  min-height: 100%;
}

article {
  max-width: 1400px;
  margin: 0 auto;
}

.title {
  text-align: center;
}

a {
  color: currentColor;
  transition: color 0.2s;
}

nav a {
  text-decoration: none;
}

a:hover {
  color: var(--link-active);
  text-decoration: revert;
}

footer {
  position: absolute;
  bottom: 0;
}

.privacy-link {
  margin-top: 2em;
}

/*# sourceMappingURL=sidepage.css.map */