@font-face {
  font-family: Neuton;
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/neuton-v10-latin/neuton-v10-latin-300.eot");
  src: local("Neuton Light"), local("Neuton-Light"), url("/fonts/neuton-v10-latin/neuton-v10-latin-300.eot?#iefix") format("embedded-opentype"), url("/fonts/neuton-v10-latin/neuton-v10-latin-300.woff2") format("woff2"), url("/fonts/neuton-v10-latin/neuton-v10-latin-300.woff") format("woff"), url("/fonts/neuton-v10-latin/neuton-v10-latin-300.ttf") format("truetype"), url("/fonts/neuton-v10-latin/neuton-v10-latin-300.svg#Neuton") format("svg"); }

@font-face {
  font-family: Neuton;
  font-style: italic;
  font-weight: 400;
  src: url("/fonts/neuton-v10-latin/neuton-v10-latin-italic.eot");
  src: local("Neuton Italic"), local("Neuton-Italic"), url("/fonts/neuton-v10-latin/neuton-v10-latin-italic.eot?#iefix") format("embedded-opentype"), url("/fonts/neuton-v10-latin/neuton-v10-latin-italic.woff2") format("woff2"), url("/fonts/neuton-v10-latin/neuton-v10-latin-italic.woff") format("woff"), url("/fonts/neuton-v10-latin/neuton-v10-latin-italic.ttf") format("truetype"), url("/fonts/neuton-v10-latin/neuton-v10-latin-italic.svg#Neuton") format("svg"); }

@font-face {
  font-family: Neuton;
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/neuton-v10-latin/neuton-v10-latin-regular.eot");
  src: local("Neuton Regular"), local("Neuton-Regular"), url("/fonts/neuton-v10-latin/neuton-v10-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/neuton-v10-latin/neuton-v10-latin-regular.woff2") format("woff2"), url("/fonts/neuton-v10-latin/neuton-v10-latin-regular.woff") format("woff"), url("/fonts/neuton-v10-latin/neuton-v10-latin-regular.ttf") format("truetype"), url("/fonts/neuton-v10-latin/neuton-v10-latin-regular.svg#Neuton") format("svg"); }

@font-face {
  font-family: Neuton;
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/neuton-v10-latin/neuton-v10-latin-700.eot");
  src: local("Neuton Bold"), local("Neuton-Bold"), url("/fonts/neuton-v10-latin/neuton-v10-latin-700.eot?#iefix") format("embedded-opentype"), url("/fonts/neuton-v10-latin/neuton-v10-latin-700.woff2") format("woff2"), url("/fonts/neuton-v10-latin/neuton-v10-latin-700.woff") format("woff"), url("/fonts/neuton-v10-latin/neuton-v10-latin-700.ttf") format("truetype"), url("/fonts/neuton-v10-latin/neuton-v10-latin-700.svg#Neuton") format("svg"); }

@font-face {
  font-display: swap;
  font-family: Oswald;
  font-style: normal;
  font-weight: 200;
  src: url("/fonts/oswald-v53-latin_vietnamese/oswald-v53-latin_vietnamese-200.woff2") format("woff2"); }

@font-face {
  font-display: swap;
  font-family: Oswald;
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/oswald-v53-latin_vietnamese/oswald-v53-latin_vietnamese-300.woff2") format("woff2"); }

@font-face {
  font-display: swap;
  font-family: Oswald;
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/oswald-v53-latin_vietnamese/oswald-v53-latin_vietnamese-regular.woff2") format("woff2"); }

@font-face {
  font-display: swap;
  font-family: Oswald;
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/oswald-v53-latin_vietnamese/oswald-v53-latin_vietnamese-500.woff2") format("woff2"); }

@font-face {
  font-display: swap;
  font-family: Oswald;
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/oswald-v53-latin_vietnamese/oswald-v53-latin_vietnamese-600.woff2") format("woff2"); }

@font-face {
  font-display: swap;
  font-family: Oswald;
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/oswald-v53-latin_vietnamese/oswald-v53-latin_vietnamese-700.woff2") format("woff2"); }

:root {
  --color-logo-apple: #f7a600;
  --color-logo-black: #1d1d1b;
  --color-orange: #f5a300;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-button-black: #1b1a1f;
  --color-button-light-blue: #0477d6;
  --color-button-red: #d10156;
  --background-color-grey: #f4f4f4;
  --background-color-white: #ffffff; }

div.category_buttons {
  display: flex;
  flex-direction: row;
  gap: 2em; }

.category-overview a.button.orange-button {
  height: 8.5em;
  width: 8.5em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  align-items: center; }
  .category-overview a.button.orange-button span.category-title {
    margin-bottom: 1em;
    padding: 0 0.5em; }
  .category-overview a.button.orange-button svg.category-icon {
    margin-bottom: 1em;
    aspect-ratio: 1/1;
    margin-top: 1em;
    width: 3em;
    height: 3em; }
  .category-overview a.button.orange-button:hover svg {
    color: var(--color-white);
    stroke: var(--color-white);
    fill: var(--color-white); }

#plot {
  width: 100%;
  max-width: 50em;
  aspect-ratio: 16/8; }

@media screen and (max-width: 800px) {
  #plot {
    min-height: 50vh;
    width: 90vw; } }

@media screen and (max-width: 400px) and (min-width: 0px) {
  #plot {
    min-height: 50vh; } }

html {
  width: 100vw; }

body {
  color: var(--color-button-black);
  font-family: sans-serif;
  line-height: 1.5;
  margin: 1rem;
  font-family: Rasa, Times, serif;
  background-color: var(--background-color-white); }
  @media screen and (max-width: 800px) {
    body {
      margin: 0;
      width: 90vw; } }
a.button,
button.button {
  border-style: none;
  color: var(--color-white);
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .3s ease-out, color .3s ease-out;
  display: inline-block;
  border-radius: 5px;
  padding: 0.25em 0.5em; }
  a.button.default-link,
  button.button.default-link {
    background: none;
    display: inline;
    color: var(--color-black);
    text-transform: none !important; }
    a.button.default-link:hover,
    button.button.default-link:hover {
      background: none;
      text-decoration: underline; }
  a.button.button,
  button.button.button {
    width: 9.5em;
    height: 5em;
    display: flex;
    flex-direction: column;
    display: inline-flex;
    justify-content: center;
    text-align: center; }
    @media screen and (max-width: 600px) {
      a.button.button,
      button.button.button {
        font-size: 85%; } }
    a.button.button.flat,
    button.button.button.flat {
      height: auto;
      width: max-content;
      white-space: nowrap; }
  a.button.orange-button,
  button.button.orange-button {
    background-color: var(--color-orange);
    color: black; }
    a.button.orange-button:hover,
    button.button.orange-button:hover {
      background-color: var(--color-button-black);
      color: white; }
  a.button.red-button,
  button.button.red-button {
    background-color: var(--color-button-red); }
  a.button.blue-button,
  button.button.blue-button {
    background-color: var(--color-button-light-blue); }
  a.button:hover,
  button.button:hover {
    background-color: var(--color-button-black); }

h1,
h2,
h3,
h4,
h5,
h6,
a {
  font-family: Oswald, Consolas, monospace; }

header {
  border-bottom: 1px solid #222;
  margin-bottom: 1rem; }

footer {
  border-top: 1px solid #222;
  margin-top: 1rem; }

.default-flex {
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  gap: 1em;
  justify-content: flex-start; }

input[type="checkbox"] {
  float: left;
  margin-right: 0.75em; }