@media (width < 450px) {
  :root {
    --scale: 1;
  }
}

@media (width >= 450px) and (width < 1600px) {
  :root {
    --scale: 2;
  }
}

@media (width >= 1600px) and (width < 2700px) {
  :root {
    --scale: 3;
  }
}

@media (width >= 2700px) {
  :root {
    --scale: 4;
  }
}

@font-face {
  font-family: 'Mutated Small';
  src: url(fonts/Mutated\ Small.ttf);
  font-display: swap;
}

@font-face {
  font-family: 'Mutated Medium';
  src: url(fonts/Mutated\ Medium.ttf);
  font-display: swap;
}

@font-face {
  font-family: 'Mutated Large';
  src: url(fonts/Mutated\ Large.ttf);
  font-display: swap;
}

html {
  height: 100%;
  width: 100%;
}

body {
  background-color: #71ffbc;
  height: fit-content;
  width: stretch;
  padding: calc(var(--scale) * 4px) calc(var(--scale) * 4px) 0 calc(var(--scale) * 4px);
  margin: 0;
}

#orpheus-flag-link {
  margin: 0;
  position: fixed;
  left: 0;
  right: 0;
  height: fit-content;
  width: fit-content;
}

area {
  scale: var(--scale);
}

#orpheus-flag {
  margin: 0;
  position: fixed;
  left: 0;
  right: 0;
  height: calc(var(--scale) * 32px);
  width: calc(var(--scale) * 56px);
  image-rendering: pixelated;
}

#mutate-header {
  margin-block-end: 0px;
}

#motto-subheader {
  margin-block-start: calc(var(--scale) * 2px);
  margin-block-end: calc(var(--scale) * 16px);
}

#process-description {
  display: table;
  margin: 0 auto;
}

#faq-dither {
  background-image: url(sprites/dither_to_faq.png);
  background-repeat: repeat-x;
  background-size: calc(var(--scale) * 8px) calc(var(--scale) * 23px);
  margin: calc(var(--scale) * 12px) calc(var(--scale) * -4px) 0;
  height: calc(var(--scale) * 23px);
  width: stretch;
  image-rendering: pixelated;
}

#faq-holder {
  width: stretch;
  margin: 0 calc(var(--scale) * -4px);
  padding: calc(var(--scale) * 8px) calc(var(--scale) * 8px + var(--scale) * 4px);
  background-color: #12e5f0;
}

.faq-pair {
  width: auto;
  padding: calc(var(--scale) * 2px);
}

.faq-question{
  border-radius: 0;
  border-width: calc(var(--scale) * 1px);
  border-style: solid;
  border-color: #060894;
  background-color: #56c6ff;
  width: stretch;
  margin: 0;
  padding: calc(var(--scale) * 2px) calc(var(--scale) * 3px);
}

.faq-question:hover {
  border-color: #1b2127;
  background-color: #2d8ef8;
}

.faq-question:active {
  border-color: #1b2127;
  background-color: #123ef0;
}

.faq-pair[open="false"] > .faq-answer {
  display: none;
}

.faq-pair[open="true"] > .faq-answer {
  visibility: visible;
  background-color: #2d8ef8;
  margin: 0;
  padding: calc(var(--scale) * 2px);
  border-width: 0 calc(var(--scale) * 1px) calc(var(--scale) * 1px);
  border-color: #060894;
  border-style: solid;
}

h1, h2, h3, p {
  -webkit-font-smoothing: none;
  font-smooth: never;
  font-synthesis-weight: none;
}

h1 {
  font-family: 'Mutated Large';
  font-size: calc(var(--scale) * 36px);
  line-height: calc(var(--scale) * 42px);
}

h2 {
  font-family: 'Mutated Large';
  font-size: calc(var(--scale) * 24px);
  line-height: calc(var(--scale) * 28px);
}

.large-text {
  font-family: 'Mutated Large';
  font-size: calc(var(--scale) * 16px);
  line-height: calc(var(--scale) * 20px);
}

.medium-text {
  font-family: 'Mutated Medium';
  font-size: calc(var(--scale) * 8px);
  line-height: calc(var(--scale) * 10px);
}

.small-text {
  font-family: 'Mutated Small';
  font-size: calc(var(--scale) * 5px);
  line-height: calc(var(--scale) * 7px);
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}