@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2"), url("/fonts/JetBrainsMono-Regular.woff") format("woff");
  font-weight: 300 400 500;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2"), url("/fonts/JetBrainsMono-Medium.woff") format("woff");
  font-weight: 600 700;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2"), url("/fonts/JetBrainsMono-Bold.woff") format("woff");
  font-weight: 800 900;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "JetBrains Mono", monospace;
}

body {
  font-family: "Courier New", Courier, monospace;
  background-color: lightgray;
}
body nav,
body main,
body form,
body div#mock__console,
body div.key {
  display: flex;
}
body > h4 {
  width: 100%;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  margin: 0.5rem;
  color: #202020;
  font-size: 0.875rem;
}
body nav,
body main,
body form,
body div.key {
  justify-content: center;
  align-items: center;
}
body nav {
  flex-flow: row nowrap;
  gap: 2rem;
  padding: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  width: 100vw;
  color: black;
  text-decoration: none;
}
body nav a,
body nav a:visited {
  color: black;
  text-decoration: none;
}
body nav a.nav__disabled,
body nav a:visited.nav__disabled {
  color: gray;
  font-weight: lighter;
  pointer-events: none;
}
body main {
  flex-flow: column nowrap;
  gap: 1rem;
  margin: 0rem 2rem;
}
body main h1,
body main h2,
body main h3,
body main h4,
body main h4 a {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
}
body main h4 {
  width: 100%;
  text-align: center;
  color: #202020;
  font-weight: 300;
  font-size: 0.875rem;
}
body main > p {
  max-width: 64vw;
  text-align: justify;
  font-weight: 300;
}
body main > p strong {
  font-weight: 900;
  text-transform: uppercase;
}
body main table,
body main th,
body main td {
  border: 1px solid black;
  font-weight: 600;
  text-transform: uppercase;
}
body main th,
body main td {
  padding: 0.5rem;
}
body main th.infected,
body main td.infected {
  background-color: crimson;
  color: white;
}
body main th.dead,
body main td.dead {
  background-color: black;
  color: white;
}
body main ol {
  max-width: 64vw;
  text-align: justify;
}
body main ol li {
  margin-bottom: 0.5rem;
}
body main ol li strong {
  font-weight: 900;
  text-transform: uppercase;
}
body main ol > ol {
  margin-left: 2rem;
  list-style: lower-roman;
}
body main code {
  background-color: rgba(128, 128, 128, 0.425);
  padding: 0.1875rem;
  border: 1px solid dimgray;
  border-radius: 0.125rem;
  font-size: 0.875rem;
}
body main code sup {
  font-size: 0.5625rem;
}
body main div#maps {
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
  width: 64vw;
  padding: 0rem;
  align-items: center;
  justify-content: center;
}
body main div#maps div.map {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  max-width: 20vw;
}
body main div#maps div.map canvas {
  border: 2px solid black;
  padding: 0.5rem;
}
body main div#maps div.map div.key {
  max-width: 80%;
  gap: 1rem;
  width: 64vw;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
}
body main div#maps div.map div.key p {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
}
body main div#mock__console,
body main button {
  background-color: black;
  color: white;
}
body main button {
  max-width: 50%;
  padding: 0.625rem 4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.25rem;
  cursor: pointer;
}
body main form {
  flex-flow: row wrap;
  width: 36vw;
  gap: 1rem;
}
body main form h3 {
  width: 100%;
  font-weight: bolder;
  -webkit-text-decoration: double underline;
          text-decoration: double underline;
  text-transform: uppercase;
  margin-top: 1rem;
}
body main form label {
  width: 66.66%;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-user-select: auto;
     -moz-user-select: auto;
          user-select: auto;
  cursor: text;
  font-size: 0.9375rem;
}
body main form input {
  width: calc(33.33% - 1rem);
  padding: 0.125rem;
  min-height: 2rem;
  outline: none;
}
body main form input:focus {
  border: 2px solid #202020;
}
body main form input:invalid {
  border: 2px solid crimson;
}
body main div#mock__console {
  flex-flow: column nowrap;
  gap: 0.25rem;
  width: 64vw;
  padding: 1rem;
  border: 2px solid white;
  overflow-y: auto;
}
body main div#mock__console p {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  font-size: 0.875rem;
}
body main div#plot,
body main div#reproductive_success_plot,
body main div#antireproductive_success_plot {
  width: 64vw;
  padding: 0rem;
  min-height: 45vh;
  background-color: white;
}

@media screen and (max-width: 768px) {
  body {
    width: 100vw;
  }
  body main {
    width: calc(100vw - 1rem);
    margin: 0.5rem;
  }
  body main h1,
  body main h2,
  body main h3,
  body main h4,
  body main h4 a {
    text-align: center;
  }
  body main h1 {
    font-size: 1.125rem;
  }
  body main h2 {
    font-size: 1rem;
  }
  body main > p {
    max-width: 100%;
    font-size: 0.75rem;
  }
  body main ol {
    max-width: 100%;
    list-style-position: inside;
  }
  body main ol li {
    font-size: 0.75rem;
    line-height: 0.9375rem;
  }
  body main table,
  body main th,
  body main td {
    max-width: 100%;
    font-size: 0.75rem;
  }
  body main canvas {
    margin: 0.25rem;
    padding: 0.25rem;
  }
  body main form {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
  }
  body main form label,
  body main form input {
    font-size: 0.875rem;
    width: 100%;
  }
  body main form input {
    min-height: 1rem;
  }
  body main form button {
    padding: 0.25rem;
    font-size: 0.75rem;
  }
  body main div#mock__console {
    width: 100%;
    padding: 0.5rem;
  }
  body main div#mock__console p {
    font-size: 0.625rem;
  }
}/*# sourceMappingURL=main.css.map */