.bg--none {
  --background: rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.4);
}
.text--none {
  --color: rgba(0, 0, 0, 0.8);
  color: rgba(0, 0, 0, 0.8);
}
.border--none {
  --border-color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.5);
}
.bg--default {
  --background: rgba(129, 129, 129, 0.4);
  background-color: rgba(129, 129, 129, 0.4);
}
.text--default {
  --color: rgba(129, 129, 129, 0.8);
  color: rgba(129, 129, 129, 0.8);
}
.border--default {
  --border-color: rgba(129, 129, 129, 0.5);
  border-color: rgba(129, 129, 129, 0.5);
}
.bg--primary {
  --background: rgba(1, 195, 238, 0.4);
  background-color: rgba(1, 195, 238, 0.4);
}
.text--primary {
  --color: rgba(1, 195, 238, 0.8);
  color: rgba(1, 195, 238, 0.8);
}
.border--primary {
  --border-color: rgba(1, 195, 238, 0.5);
  border-color: rgba(1, 195, 238, 0.5);
}
.bg--secondary {
  --background: rgba(238, 206, 1, 0.4);
  background-color: rgba(238, 206, 1, 0.4);
}
.text--secondary {
  --color: rgba(238, 206, 1, 0.8);
  color: rgba(238, 206, 1, 0.8);
}
.border--secondary {
  --border-color: rgba(238, 206, 1, 0.5);
  border-color: rgba(238, 206, 1, 0.5);
}
.bg--tertiary {
  --background: rgba(238, 1, 226, 0.4);
  background-color: rgba(238, 1, 226, 0.4);
}
.text--tertiary {
  --color: rgba(238, 1, 226, 0.8);
  color: rgba(238, 1, 226, 0.8);
}
.border--tertiary {
  --border-color: rgba(238, 1, 226, 0.5);
  border-color: rgba(238, 1, 226, 0.5);
}
.bg--info {
  --background: rgba(1, 195, 238, 0.4);
  background-color: rgba(1, 195, 238, 0.4);
}
.text--info {
  --color: rgba(1, 195, 238, 0.8);
  color: rgba(1, 195, 238, 0.8);
}
.border--info {
  --border-color: rgba(1, 195, 238, 0.5);
  border-color: rgba(1, 195, 238, 0.5);
}
.bg--success {
  --background: rgba(1, 238, 33, 0.4);
  background-color: rgba(1, 238, 33, 0.4);
}
.text--success {
  --color: rgba(1, 238, 33, 0.8);
  color: rgba(1, 238, 33, 0.8);
}
.border--success {
  --border-color: rgba(1, 238, 33, 0.5);
  border-color: rgba(1, 238, 33, 0.5);
}
.bg--danger {
  --background: rgba(238, 21, 1, 0.4);
  background-color: rgba(238, 21, 1, 0.4);
}
.text--danger {
  --color: rgba(238, 21, 1, 0.8);
  color: rgba(238, 21, 1, 0.8);
}
.border--danger {
  --border-color: rgba(238, 21, 1, 0.5);
  border-color: rgba(238, 21, 1, 0.5);
}
.bg--warning {
  --background: rgba(238, 206, 1, 0.4);
  background-color: rgba(238, 206, 1, 0.4);
}
.text--warning {
  --color: rgba(238, 206, 1, 0.8);
  color: rgba(238, 206, 1, 0.8);
}
.border--warning {
  --border-color: rgba(238, 206, 1, 0.5);
  border-color: rgba(238, 206, 1, 0.5);
}
.bg--light {
  --background: rgba(190, 190, 190, 0.4);
  background-color: rgba(190, 190, 190, 0.4);
}
.text--light {
  --color: rgba(190, 190, 190, 0.8);
  color: rgba(190, 190, 190, 0.8);
}
.border--light {
  --border-color: rgba(190, 190, 190, 0.5);
  border-color: rgba(190, 190, 190, 0.5);
}
.bg--medium {
  --background: rgba(129, 129, 129, 0.4);
  background-color: rgba(129, 129, 129, 0.4);
}
.text--medium {
  --color: rgba(129, 129, 129, 0.8);
  color: rgba(129, 129, 129, 0.8);
}
.border--medium {
  --border-color: rgba(129, 129, 129, 0.5);
  border-color: rgba(129, 129, 129, 0.5);
}
.bg--dark {
  --background: rgba(89, 89, 89, 0.4);
  background-color: rgba(89, 89, 89, 0.4);
}
.text--dark {
  --color: rgba(89, 89, 89, 0.8);
  color: rgba(89, 89, 89, 0.8);
}
.border--dark {
  --border-color: rgba(89, 89, 89, 0.5);
  border-color: rgba(89, 89, 89, 0.5);
}
.bg--red {
  --background: rgba(238, 21, 1, 0.4);
  background-color: rgba(238, 21, 1, 0.4);
}
.text--red {
  --color: rgba(238, 21, 1, 0.8);
  color: rgba(238, 21, 1, 0.8);
}
.border--red {
  --border-color: rgba(238, 21, 1, 0.5);
  border-color: rgba(238, 21, 1, 0.5);
}
.bg--orange {
  --background: rgba(238, 108, 1, 0.4);
  background-color: rgba(238, 108, 1, 0.4);
}
.text--orange {
  --color: rgba(238, 108, 1, 0.8);
  color: rgba(238, 108, 1, 0.8);
}
.border--orange {
  --border-color: rgba(238, 108, 1, 0.5);
  border-color: rgba(238, 108, 1, 0.5);
}
.bg--yellow {
  --background: rgba(238, 206, 1, 0.4);
  background-color: rgba(238, 206, 1, 0.4);
}
.text--yellow {
  --color: rgba(238, 206, 1, 0.8);
  color: rgba(238, 206, 1, 0.8);
}
.border--yellow {
  --border-color: rgba(238, 206, 1, 0.5);
  border-color: rgba(238, 206, 1, 0.5);
}
.bg--green {
  --background: rgba(1, 238, 33, 0.4);
  background-color: rgba(1, 238, 33, 0.4);
}
.text--green {
  --color: rgba(1, 238, 33, 0.8);
  color: rgba(1, 238, 33, 0.8);
}
.border--green {
  --border-color: rgba(1, 238, 33, 0.5);
  border-color: rgba(1, 238, 33, 0.5);
}
.bg--cyan {
  --background: rgba(1, 195, 238, 0.4);
  background-color: rgba(1, 195, 238, 0.4);
}
.text--cyan {
  --color: rgba(1, 195, 238, 0.8);
  color: rgba(1, 195, 238, 0.8);
}
.border--cyan {
  --border-color: rgba(1, 195, 238, 0.5);
  border-color: rgba(1, 195, 238, 0.5);
}
.bg--blue {
  --background: rgba(1, 76, 238, 0.4);
  background-color: rgba(1, 76, 238, 0.4);
}
.text--blue {
  --color: rgba(1, 76, 238, 0.8);
  color: rgba(1, 76, 238, 0.8);
}
.border--blue {
  --border-color: rgba(1, 76, 238, 0.5);
  border-color: rgba(1, 76, 238, 0.5);
}
.bg--pink {
  --background: rgba(238, 1, 226, 0.4);
  background-color: rgba(238, 1, 226, 0.4);
}
.text--pink {
  --color: rgba(238, 1, 226, 0.8);
  color: rgba(238, 1, 226, 0.8);
}
.border--pink {
  --border-color: rgba(238, 1, 226, 0.5);
  border-color: rgba(238, 1, 226, 0.5);
}
.bg--purple {
  --background: rgba(131, 1, 238, 0.4);
  background-color: rgba(131, 1, 238, 0.4);
}
.text--purple {
  --color: rgba(131, 1, 238, 0.8);
  color: rgba(131, 1, 238, 0.8);
}
.border--purple {
  --border-color: rgba(131, 1, 238, 0.5);
  border-color: rgba(131, 1, 238, 0.5);
}
* {
  box-sizing: border-box;
  font-family: sans-serif;
}
html {
  margin: 0;
  padding: 0;
  font-size: 15px;
}
body {
  width: 100dvw;
  height: 100dvh;
  margin: 0;
  padding: 2rem;
  background: #000;
  color: #FFF;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  gap: 5vw;
}
@media (orientation: portrait) {
  body {
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 1rem;
  }
}
h1 {
  font-size: clamp(1rem, 5vw, 2rem);
  text-transform: uppercase;
  text-align: right;
}
.splashscreen img {
  max-width: 100%;
  max-height: 25vh;
  object-fit: contain;
  width: 55vw;
}
@media (orientation: portrait) {
  .splashscreen img {
    max-width: 100%;
    max-height: 100%;
    width: 100vw;
  }
}
@media (orientation: landscape) {
  .splashscreen {
    display: flex;
    flex-direction: column;
    align-items: end;
  }
}
@media (orientation: landscape) {
  .splashscreen {
    flex: 0 1 75vw;
    align-self: center;
  }
}
@media (orientation: portrait) {
  .splashscreen.no-menu {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
@media (orientation: landscape) {
  .splashscreen.no-menu {
    flex: 0 0 auto;
  }
}
nav {
  width: 100%;
  display: flex;
  gap: 1rem;
  flex: 1 1 25vw;
  flex-direction: row;
  flex-direction: column;
}
nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: #FFF;
  text-decoration: none;
  line-height: 0.8;
  text-transform: uppercase;
  gap: 1rem;
  transition: all 200ms ease-in-out;
  background: #33ABC9;
  flex-direction: column;
  flex-direction: row;
  font-size: 1rem;
}
@media (orientation: landscape) {
  nav a {
    width: 300px;
  }
}
@media (orientation: portrait) {
  nav a {
    font-size: 2rem;
  }
}
nav a #letter path {
  fill: #800080 !important;
  transition: all 200ms ease-in-out;
}
nav a:hover {
  opacity: 0.75;
}
nav a.active {
  background: #800080;
}
nav a.active #letter path {
  fill: #33ABC9 !important;
}
nav .icon, nav svg {
  width: 3rem;
  height: 3rem;
}
nav .label {
  flex: 1 1 auto;
}
.error {
  background-color: var(--background);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 2rem;
}
@media (orientation: portrait) {
  .error {
    position: relative;
  }
}
.error-container {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 2rem;
  padding: 1rem;
  justify-content: center;
}
@media (orientation: portrait) {
  .error-container {
    align-items: start;
  }
}
@media (orientation: portrait) {
  .error-icon-container {
    font-size: 5rem;
  }
}
.error-text-container {
  display: flex;
  align-items: baseline;
  gap: 2rem;
}
@media (orientation: portrait) {
  .error-text-container {
    gap: 1rem;
    flex-direction: column;
  }
}
.error-text-title {
  margin: 0;
}
.error-text-message {
  font-size: 75%;
}