@font-face {
  font-family: Bahnschrift;
  font-weight: 300 700;
  font-stretch: 75% 100%;
  src: url(bahnschrift.ttf);
}

@font-face {
  font-family: "Source Code Pro";
  font-weight: 700;
  src: url(SourceCodePro-Bold.ttf);
}

:root {
  --tint: linear-gradient(
    rgb(128 0 0 / 1),
    rgb(125 0 0 / 1) 10%,
    rgb(120 0 0 / 1) 20%,
    rgb(120 0 0 / 1) 30%,
    rgb(128 0 0 / 1) 37.26%,
    rgb(138 0 0 / .959) 45%,
    rgb(148 0 0 / .923) 50%,
    rgb(170 0 0 / .835) 60%,
    rgb(195 0 0 / .737) 70%,
    rgb(220 0 0 / .641) 80%,
    rgb(241 0 0 / .559) 90%,
    rgb(255 0 0 / .502)
  );
  --highlight: #fff200;
  --version: #ed1c24;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: #000 url(bg.jpg) center / cover no-repeat;
  color: #fff;
  font: 700 16px/1 "Source Code Pro", monospace;
}

main {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--tint);
}

.stage {
  position: relative;
  width: min(100vw, 177.78vh);
  aspect-ratio: 16 / 9;
  container-type: size;
  text-align: center;
}

.author, h1 span {
  position: absolute;
  inset-inline: 0;
  margin: 0;
  font-family: Bahnschrift, sans-serif;
  font-stretch: 75%;
  font-weight: 700;
  line-height: 0;
  text-transform: uppercase;
  translate: 0 -.294em;
}

h1 {
  margin: 0;
}

.author {
  top: 15.3cqh;
  font-size: 8.77cqh;
}

h1 span:first-child {
  top: 56.85cqh;
  font-size: 53.82cqh;
}

h1 span:last-child {
  top: 79.99cqh;
  font-size: 31.14cqh;
}

nav {
  position: absolute;
  inset-inline: 15%;
  top: 85.56%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em 2.5em;
  font-size: max(2.22cqh, 12px);
}

nav a {
  color: inherit;
  text-decoration: none;
}

nav a:hover, nav a:focus-visible {
  color: var(--highlight);
  outline: none;
}

.version {
  position: absolute;
  left: 1.25%;
  bottom: 1.1%;
  font-size: max(2.22vh, 12px);
  color: var(--version);
}