@font-face {
  font-family: 'Helvetica Black';
  src: url('../../assets/fonts/Helvetica-Black.otf') format('opentype');
  font-weight: bolder;
}

@font-face {
  font-family: 'Helvetica Bold';
  src: url('../../assets/fonts/Helvetica-Bold.otf') format('opentype');
  font-weight: bold;
}

@font-face {
  font-family: 'Helvetica Light';
  src: url('../../assets/fonts/Helvetica-Light.otf') format('opentype');
  font-weight: lighter;
}

@font-face {
  font-family: 'Helvetica';
  src: url('../../assets/fonts/Helvetica.otf') format('opentype');
  font-weight: normal;
}

@font-face {
  font-family: 'Helvetica Oblique';
  src: url('../../assets/fonts/Helvetica-LightOblique.otf') format('opentype');
  font-style: italic, oblique;
}

@font-face {
  font-family: 'Consolas';
  src: url('../../assets/fonts/Consolas.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'IBM VGA';
  src: url('../../assets/fonts/PxPlus_IBM_VGA8.ttf') format('truetype');
  font-weight: normal;
}

.ibm-text {
  font-size: 16px;
  line-height: 14px;
  font-family: 'IBM VGA';
}

.callsign-text {
  font-weight: 300;
  font-size: 3.5em;
  letter-spacing: 2px;
  line-height: 0;
  text-transform: uppercase;
}

.xl-text {
  font-size: 120px;
  line-height: 90px;
  float: right;
  font-weight: 100;
}

.heading h4 {
  font-family: 'Helvetica Bold', sans-serif;
  font-size: 12pt;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.heading h3 {
  font-family: 'Helvetica Bold', sans-serif;
  font-size: 14pt;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.heading h2 {
  font-family: 'Helvetica Black', sans-serif;
  font-size: 22pt;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.active-text {
  font-size: 36pt;
  letter-spacing: 5px;
  line-height: 0;
  text-transform: uppercase;
  text-align: right;
}

.heading {
  font-family: 'Helvetica Bold', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}
.heading.h1 {
  font-size: 36pt;
}
.heading.h2 {
  font-size: 18pt;
}
.heading.h3 {
  font-size: 14pt;
}
.heading.table {
  font-family: 'Helvetica Black', sans-serif;
  font-size: 24pt;
}
.heading.mech {
  font-size: 36pt;
  color: var(--v-accent-base);
}
.heading.sub {
  font-size: 16pt;
  color: var(--v-accent-base);
}

.body-text {
  font-family: 'Helvetica Regular', sans-serif;
  font-size: 12pt;
  color: var(--v-text-base);
}

@media only screen and (max-width: 600px) {
.heading.h1 {
  font-size: 31pt;
}
.heading.h2 {
  font-size: 18pt;
}
.heading.h3 {
  font-size: 13pt;
}

.heading.table {
  font-size: 22pt;
}

.heading.mech {
  font-size: 32pt;
}

.heading.sub {
  font-size: 14pt;
}
  .body-text {
    font-size: 11pt;
  }

}

.flavor-text {
  font-family: 'Consolas', monospace;
  font-size: 12pt;
  color: var(--v-light-text-base);
}

.fluff-text {
  font-family: 'Helvetica Oblique', sans-serif;
  font-style: italic;
  font-size: 13pt;
  color: var(--v-light-text-base);
}

.effect-text {
  font-family: 'Helvetica Bold', sans-serif;
  font-size: 12pt;
  color: var(--v-text-base);
}

.stat-text {
  font-family: 'Consolas', monospace;
  font-size: 12pt;
  font-weight: bolder;
  color: var(--v-text-stark-base);
}

.large-text {
  font-size: 18pt !important;
}

.x-large-text {
  font-size: 25pt !important;
}

.ra-quiet {
  color: #eeeeee;
  font-family: 'Consolas', monospace;
  font-size: 12pt;
  font-weight: bolder;
}

code {
  padding: 4px 12px 4px 12px;
}

code.horus {
  font-size: 1.1em;
  background-color: rgba(0, 0, 0, 0.7) !important;
  box-shadow: none;
  color: white;
  font-style: normal;
  letter-spacing: 0.05em;
  border-radius: 0;
}

code.horus:hover {
  background-color: black !important;
  animation: distort 0.6s infinite;
  text-transform: uppercase;
  font-weight: bold;
}


.horus--subtle {
  animation: distort-subtle 5s infinite;
}

.honk--subtle {
  animation: distorthonk 5s infinite;
}
.preserve-linebreaks {
  white-space: pre-wrap;
}

@keyframes distort {
  0% {
    text-shadow: 2px 1px #ff00ff, -2px -3px #00ffff;
    transform: translate(-1px, 1px) translate3D(-30px, 0px, 0) rotate(-0.1deg);
    cursor: crosshair;
  }
  25% {
    text-shadow: -2px -3px #ff00ff, 2px 1px #00ffff;
    transform: translate(2px, 1px) translate3D(-30px, 0px, 0) rotate(-0.1deg);
    cursor: cell;
  }
  50% {
    text-shadow: 2px -1px #ff00ff, -4px 1px #00ffff;
    transform: translate(-2px, 1px) translate3D(-30px, 0px, 0) rotate(-0.1deg);
    cursor: col-resize;
  }
  75% {
    text-shadow: -4px -1px #ff00ff, -2px -1px #00ffff;
    transform: translate(3px, 1px) translate3D(-30px, 0px, 0) rotate(-0.1deg);
    cursor: move;
  }
  100% {
    text-shadow: -2px 0 #ff00ff, 2px -1px #00ffff;
    transform: translate(-2px, 0) translate3D(-30px, 0px, 0) rotate(-0.1deg);
    cursor: all-scroll;
  }
}

@keyframes distort-subtle {
  25% {
    text-shadow: none;
  }
  26% {
    text-shadow: 2px -1px #ff0000, -2px 3px #00ffff;
  }
  27% {
    text-shadow: -2px -3px #ff0000, 2px 1px #00ffff;
  }
  28% {
    text-shadow: 2px 1px #ff0000, -4px 1px #00ffff;
  }
  29% {
    text-shadow: -4px 1px #ff0000, -2px -1px #00ffff;
  }
  30% {
    text-shadow: none;
  }
  75% {
    text-shadow: none;
  }
  76% {
    text-shadow: -4px 1px #ff0000, -2px -1px #00ffff;
  }
  77% {
    text-shadow: -2px -3px #ff0000, 2px 1px #00ffff;
  }
  78% {
    text-shadow: 2px -1px #ff0000, -2px 3px #00ffff;
  }
  79% {
    text-shadow: 2px 1px #ff0000, -4px 1px #00ffff;
  }
  80% {
    text-shadow: none;
  }
}
@keyframes distorthonk {
  25% {
    text-shadow: none;
  }
  26% {
    text-shadow: 2px -1px #ff3caf, -2px 3px #fff06e;
  }
  27% {
    text-shadow: -2px -3px #ff3caf, 2px 1px #fff06e;
  }
  28% {
    text-shadow: 2px 1px #ff3caf, -4px 1px #fff06e;
  }
  29% {
    text-shadow: -4px 1px #ff3caf, -2px -1px #fff06e;
  }
  30% {
    text-shadow: none;
  }
  75% {
    text-shadow: none;
  }
  76% {
    text-shadow: -4px 1px #ff3caf, -2px -1px #fff06e;
  }
  77% {
    text-shadow: -2px -3px #ff3caf, 2px 1px #fff06e;
  }
  78% {
    text-shadow: 2px -1px #ff3caf, -2px 3px #fff06e;
  }
  79% {
    text-shadow: 2px 1px #ff3caf, -4px 1px #fff06e;
  }
  80% {
    text-shadow: none;
  }
}

.keyboard-shortcut {
  font-family: monospace;
  font-weight: bold;
  font-size: 0.9em;
  padding: 3px 5px;
  background-color: #727272;
  border: 1px solid black;
  color: #f6f6f6;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.4);
  min-height: 14px;
  min-width: 14px;
  padding: 3px 6px 5px 6px;
  text-align: center;
  display: inline-block;
  border-radius: 2px;
  margin: 0 2px;
  text-transform: uppercase;
}

/* xs */
/* @media (min-width:0px) {
  .body-text {
    font-size: 8pt;
  }
} */

/* sm */
/* @media (min-width:600px) {
  .body-text {
    font-size: 9pt;
  }
} */

/* md */
/* @media (min-width:960px) {
  .body-text {
    font-size: 10pt;
  }
} */

/* lg */
/* @media (min-width:1264px) {
  .body-text {
    font-size: 11pt;
  }
} */

/* xl */
/* @media (min-width:1904px) {
  .body-text {
    font-size: 12pt;
  }
} */