:root {
  --red: #C22;
  --black: #222;
  --mid-black: #111;
  --full-black: #000;
  --white: #CCC;
  --box-border: rgba(60,60,60,80%);
}

@font-face {
  font-family: 'dseg';
  src: url('./js/car/assets/fonts/fonts-DSEG_v046/DSEG14-Classic/DSEG14Classic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'cp437';
  src: url('/cp437.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'TX-02';
  src: url('/TX-02-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'TX-02';
  src: url('/TX-02-Oblique.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'TX-02';
  src: url('/TX-02-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Atkinson';
  src: url('/atkinson-hyperlegible-variable.woff2') format('woff2');
}

h1 {
  font-size: 2em;
}

a:link { color: lightskyblue; }
a:visited { color: #6d4b8d; }
a:hover { color: var(--white); }
a:active { color: var(--red); text-decoration:none; font-weight:normal; }

body {
  color: var(--white);
  background: var(--mid-black);
  font-family: tx-02;
}

#outrun {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100dvw;
  height: 100dvh;
}

nav {
  display: flex;
  flex-direction: column;
  padding: 1em;
  max-width: 30em;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background-color: rgba(0, 0, 0, 50%);
  border: 2px solid var(--box-border);
  border-radius: 4px;
}

nav ul {
  list-style: disclosure-closed;
}

nav h1 {
  font-size: 1em;
  border-bottom: 2px solid var(--box-border);
}

nav p {
  margin: 0.25em;
}

page-title {
  font-size: 4em;
  position: absolute;
  bottom: 1em;
  font-family: cp437, monospace;
  color: red;
  text-shadow: 0px 0px 10px black;

  right: 0em;
  left: 0em;
  margin-inline: auto;
  width: fit-content;
}

blockquote {
  font-style: italic;
}

article {
  max-width: 50em;
  margin: auto;
}

article.font-atkinson {
  font-family: Atkinson, sans-serif;
}

/* Honestly DIN Alternate would be best, but need a variable woff2 */
article.font-mono {
  font-family: tx-02, monospace;
}

article.font-typewritter {
  font-family: American Typewritter, Courier New, Courier, monospace;
}

table thead {
  border-bottom: 2px solid var(--white);
  border-top: 2px solid var(--white);
}

article > nav {
  width: inherit;
  font-family: tx-02, monospace;
}

audio-player {
  display: block;
  margin-top: 1em;
}

pre {
  border: 2px solid var(--box-border);
  border-radius: 4px;
  padding: .3em;
  overflow: auto;
  background-color: #0000007f;
  color: green;
  font-family: tx-02-regular,source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;
  padding-left: .3em;
  padding-right: .3em;
}

cmd-line {
  font-size: 0.9em;
}

cmd-line.subdue {
  opacity: 60%;
}

cmd-line.cursor {
  animation: 1.1s step-end infinite blink;
  margin-left: 0.5em;
}

cmd-line.prompt {
  color: var(--red);
}

@keyframes blink {
  0%, 49% { opacity: 1 }
  50%, to { opacity: 0 }
}

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid var(--red);
  border-bottom: 1px solid var(--red);
  padding-top: 1em;
  padding-bottom: 1em;

  margin-left: 0;
  margin-right: 0;
}

img {
  width: 50%;
}

figcaption {
  margin-top: 1em;
  font-style: italic;
}

inline-audio {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1em;
}

inline-audio span {
  margin-right: 1em;
}