@font-face {
  font-family: Atkinson;
  src: url('fonts/AtkinsonHyperlegibleNext-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: Atkinson;
  src: url('fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2') format('woff2');
  font-weight: 900;
  font-style: bold;
}

body {
  font-size: 24px;
  font-family: eurostile, Atkinson, Helvetica, sans-serif;
  background: white;
  color: #333;
  min-height: 100vh;
  margin: 0;
}

.invisible {
  visibility: hidden;
}

#status-message {
  background-color: hsla(0, 100%, 50%, 0.8);
  margin: 1rem;
  padding: 1rem;
  text-shadow: none;
}

ul {
  list-style-type: square;
}

li {
  margin-bottom: 0.5em;
}

button {
  font-family: eurostile-extended, Ubuntu, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 24px;
  cursor: pointer;
  padding: 0.25em;
  border-style: solid;
  border-width: 2px;
  border-radius: 1em;
  border-color: white;
  color: white;
  background-color: hsla(0, 0%, 0%, 0.2);
  min-width: 10em;
}

#start-from-intro-button {
  color: #222;
  background-color: white;
  border-color: #333;
  font-weight: bold;
  font-size: 36px;
}

.animation-controls {
  font-weight: bold;
}

.animation-toggle {
}

.animation-toggle + label {
  font-size: 24px;
}

.centered {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.outer-container {
  display: flex;
}

a:link {
  color: #222;
  font-weight: 700;
}

a:visited {
  color: #444;
}

#version-info {
  position: absolute;
  right: 1.5em;
  top: 1.5em;
  font-size: 0.5em;
  color: #666;
}

.hidden {
  opacity: 0;
  transition: opacity 1s;
  display: none;
}

.graph-info {
  background-color: hsl(100, 40%, 60%);
  padding: 0.25em;
  border-radius: 8px;
}

.current-info {
  background-color: hsl(80, 40%, 60%);
  padding: 0.25em;
  border-radius: 8px;
}

svg {
  background-color: #333;
}

.ohc-level {
  font-size: larger;
  font-weight: bold;
}

.debug-only {
  display: none;
  visibility: hidden;
}

.debug .debug-only {
  display: block;
  visibility: visible;
}

.visuals-container > * {
  position: absolute;
  z-index: 1;
}

#shader-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: #080808;
}

.debug #shader-canvas {
  position: static;
}

.intro {
  color: #333;
  position: absolute;
  width: 100%;
  font-size: 24px;
  z-index: 2;
  background: white;
  height: 1000%;
}

.intro-content {
  width: 80%;
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
  font-family: helvetica;
}

.title {
  font-family: Ubuntu, helvetica;
  font-size: 3em;
  text-transform: uppercase;
  text-align: center;
}

.visuals-overlay {
  justify-content: center;
  gap: 1em;
  width: 100%;
  height: 100%;
  font-size: 60px;
  color: hsl(0, 0%, 100%, .95);

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  cursor: url('images/pointer-cursor-white.svg'), pointer;
}

.ohc-level {
  font-size: 120px;
  font-weight: 900;
}

.controls {
  width: 100%;
  text-align: center;
}

.non-shader {
  position: fixed;
  top: 0;
  left: 0;
}

.debug .non-shader {
  position: static;
}

.date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
}

.date div {
}

.tonality-board {
  background-color: transparent;
}

.tonality-board .fraction,.freq {
  fill: white;
  font-size: 24px;
  font-family: eurostile, ubuntu, Helvetica, sans-serif;
  font-weight: bold;
}

.diamond-cell {
  cursor: pointer;
  fill: transparent;
}

.hz-unit {
  font-size: 12px;
}

foreignObject.pitch {
  font-weight: bold;
  text-align: center;
  color: white;
}

foreignObject.pitch .accidental {
}

foreignObject.pitch .maneri-sims-mark {
  letter-spacing: -10px;
  margin-left: -2px;
}

foreignObject div {
  margin: 0;
  padding: 0;
}

.info {
  font-size: 24px;
  font-family: Helvetica;
  width: 80%;
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
  padding-top: 0;
  background-color: hsla(0, 0%, 0%, 0.8);
  padding-bottom: 0;
}

@media all and (max-height: 568px) {
  body {
    font-size: 18px;
  }
}