@font-face {
  font-family: 'LTAIdentity';
  src: url('lta.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body#how > ol > li > button,
body,
body#index > button,
body#index > dialog,
body#index > dialog > button,
body#game > div#map,
body#game > div#popup > span > button,
body#game > div#popup > button {
  border: none;
}

body#how > ol > li,
body#how > ol > li > button,
body#index > nav,
body#index > button,
body#index > dialog > button,
body#index > dialog > span,
body#index > dialog > span > input,
body#game > div#popup > span,
body#game > div#popup > span > button,
body#game > div#popup > span > input,
body#game > div#popup > span > a > button,
body#game > div#popup > button {
  font-size: 1.75rem;
}

body#how > ol > li > button,
body > input[placeholder="🔍"],
body#index button,
body#index > dialog > span > input,
body#game > div#popup > span > input,
body#game > div#popup button {
  border-radius: 9e9rem;
}

body,
body#index > dialog,
body#game > div#map,
body#game > div#popup {
  background-color: black;
  text-align: center;
}

body,
body#index > dialog,
body#game > div#map,
body#game > div#popup,
body#leaderboard > div > table > tbody > tr > td:first-child {
  font-family: sans-serif;
}

body,
body#index > dialog,
body#game > div#map,
body#game > div#popup > button {
  color: white;
}

body#index > dialog > span,
body#game > div#map > div.maplibregl-control-container,
body#game > div#popup > button {
  display: none;
}

body#how > ol > li > button,
body#index > button,
body#index > dialog > button,
body#game > div#popup > span button,
body#game > div#popup > button {
  margin: 0.125rem;
  background-color: hsl(76, 59%, 53%);
  color: black;
  transition: background-color 0.267s;
}

body#leaderboard > div > h1,
body#players > div > table > tbody > tr > td > span,
body#recent > div > table > tbody > tr > td > span {
  color: hsl(76, 59%, 53%)
}

body#index > button:active,
body#index > dialog > button:active,
body#game > div#popup > span button:active,
body#game > div#popup > button:active {
  background-color: hsl(76, 59%, 33%);
}

body#game,
body#game > div#map,
body#game > div#popup > h1,
body > div > h1 {
  margin: 0;
}

body#game > div#map {
  position: relative;
  bottom: 4rem;
}

body#game > div#popup > span > input,
body#index > dialog > span > input,
body#index > dialog > span  {
  max-width: 85vw;
}

body#index > svg,
body#game,
body#game > div#map {
  width: 100vw;
  height: 100vh;
}

body > div > table,
body > div > table > tbody,
body > div > table > tbody > tr {
  width: 98vw !important;
}

body#game > div#popup > h1,
body#game > div#popup > span,
body#game > div#popup > span > button,
body#players > div > table > tbody > tr > td:last-child,
body#players > div > table > tbody > tr > td > span,
body#recent > div > table > tbody > tr > td:last-child,
body#recent > div > table > tbody > tr > td > span,
body#leaderboard {
  font-family: "LTAIdentity";
}

body > input[placeholder="🔍"],
body#index > nav > a {
  text-decoration: none;
  filter: grayscale();
}

body#index > svg,
body#game > div#popup {
  position: fixed;
}

body#game > div#popup {
  z-index: 2;
  bottom: -50%;
  width: 100%;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  transition: bottom 0.3s;
  max-height: 50vh;
  overflow-y: scroll;
  border-top: 0.125rem solid hsl(67, 0%, 28%);
}

body#game > div#popup > button {
  background-color: hsl(256, 59%, 53%);
  color: white;
}

body#game > div#popup > button:active {
  background-color: hsl(256, 59%, 33%)
}

body#index > dialog,
body > div > table > tbody > tr > td {
  border: 0.125rem solid hsl(67, 0%, 16.7%);
}
body > div > table {
  border-collapse: collapse;
  width: 99vw;
}
body > div > h1 {
  margin-top: 0.67rem
}

body#index > dialog {
  border-radius: 2rem;
}
body#index > nav {
  margin-bottom: calc(50vh - 6rem);
  transform: translateX(-32px);
}

img[src="bushopper.svg"] {
  height: 4rem;
  width: 4rem;
  float: left;
  z-index: 3;
  position: relative;
}

body#index > svg {
  top: 0;
  left: 0;
  z-index: -1;
}
body#index > svg > circle#spin1,
body#index > svg > circle#spin2 {
  stroke: hsl(67, 0%, 28%);
  cx: 500;
  cy: 500;
  stroke-width: 20;
  stroke-dasharray: 6.7 993.3;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  fill: none;
}

body#index > svg > circle#spin1 {
  r: 477;
  animation: spin 6.9s infinite linear;
}

body#index > svg > circle#spin2 {
  r: 457 ;
  animation: spin 6.7s infinite linear reverse;
}

body#index > svg > circle#nospin {
  r: 467;
  stroke: hsl(67, 0%, 16.7%);
  stroke-width: 50;
  cx: 500;
  cy: 500;
  stroke-linecap: round;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

img[src="marker.svg"] {
  height: 2rem;
}