body .hstretch, body > .hstretch, body .stretch, body > .stretch, :host .hstretch, :host > .hstretch, :host .stretch, :host > .stretch {
    width: 100%;
  }
body .vstretch, body > .vstretch, body .stretch, body > .stretch, :host .vstretch, :host > .vstretch, :host .stretch, :host > .stretch {
    height: 100%;
  }
html {
  --eggshell: 235,235,235;
  --purple: 40,16,98;
  --mauve: 154,88,133;
  --pinkred: 255,85,112;
  --red: 255, 0, 0;
  --gold: 187,183,76;
  --silvergold: 237,233,126;
  --sky: 88,146,246;
  --deepsky: 20,48,151;
  --space: 34,32,56;
  --deepspace: 6,3,33;
  --grass: 0,238,119;
  --transluent: rgba(255,255,255,0.12);
  --deepwater: 51,50,77;
}
.bg-transparent {
  background-color: transparent;
}
.bg-transluent {
  background-color: var(--transluent);
}
.sky {
  color: rgb(var(--sky));
}
.br-sky {
  border-color: rgb(var(--sky));
}
.br-deepspace {
  border-color: rgb(var(--deepspace));
}
.gold {
  color: rgb(var(--gold));
}
@font-face {
  font-family: "Hasteristico";
  src: url(../assets/fonts/hasteristico-bold.woff) format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Hasteristico";
  src: url(../assets/fonts/hasteristico-light.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "RobotoMono";
  src: url(../assets/fonts/roboto-mono-regular.woff) format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "RobotoMono";
  src: url(../assets/fonts/roboto-mono-light.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
/* CSS DEBUG TOOLS */
.hdl-debug *, .hdl-debug *::before, .hdl-debug *::after {
    box-shadow: inset 0 0 0 1px gold;
  }
/* END CSS DEBUG TOOLS */
html,
body {
  width: 100dvw;
  height: 100dvh;
}
html {
  --regular-font-points: 0.83;
  --min-font-size: 12px;
  --regular-font-size: calc(var(--regular-font-points) * 1vw);
  --alt-font-size: 2.625vmin;
  --max-font-size: 16px;

  font-size: var(--min-font-size)
}
@media (min-width: 1481px) and (max-width: 1920px) {
html {
    font-size: var(--regular-font-size)
}
  }
@media (min-width: 1921px) {
html {
    font-size: var(--max-font-size)
}
  }
body {
  --font-color: rgb(var(--eggshell));

  padding: 0;
  margin: 0;
  color: var(--font-color);

  background-color: rgb(var(--space));
  background-image: url(../assets/images/heimdall_helmet_flat.svg),
    linear-gradient(black, rgb(var(--purple)), rgb(var(--mauve)));
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: 10vw, auto;

  overflow: hidden;
  position: fixed;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
body,
svg text {
  font-family: "Hasteristico";
  letter-spacing: 0.05em;
}
svg text {
  fill: var(--font-color);
}
a {
  outline: none;
}