:root {
  color-scheme: light dark;

  --black: light-dark(#000000, #1A1A1A);
  --white: light-dark(#FFFFFF, #FFFFFF);
  --red: light-dark(#813338, #B15C61);
  --cyan: light-dark(#75CEC8, #A4FFFC);
  --purple: light-dark(#8E3C97, #BE65C9);
  --green: light-dark(#56AC4D, #82DF78);
  --blue: light-dark(#2E2C9B, #5653CC);
  --yellow: light-dark(#EDF171, #FFFFA0);
  --orange: light-dark(#8E5029, #BE7C51);
  --brown: light-dark(#553800, #816116);
  --light-red: light-dark(#C46C71, #F89AA0);
  --dark-gray: light-dark(#4A4A4A, #757575);
  --gray: light-dark(#7B7B7B, #ABABAB);
  --light-green: light-dark(#A9FF9F, #DCFFD1);
  --light-blue: light-dark(#706DEB, #9E9BFF);
  --light-gray: light-dark(#B2B2B2, #E5E5E5);

  --border-color: light-dark(var(--light-blue), var(--dark-gray));
  --background-color: light-dark(var(--blue), var(--black));
  --text-color: light-dark(var(--white), var(--light-gray));
  --link-color: light-dark(var(--cyan), var(--light-blue));
  --link-visited-color: light-dark(var(--yellow), var(--light-red));

  --font-size: 16px;
}

@font-face {
  font-family: "Kommondore";
  src: url("/fonts/Kommondore.woff2") format("woff2");
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: Kommondore;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;

  background-color: var(--border-color);
  color: var(--text-color);

  hyphens: auto;
}

main {
  width: 40em;
  min-height: 25em;
  font-size: var(--font-size);
  line-height: 2;
  box-sizing: border-box;
  padding: 1em;
  margin: 0;
  background-color: var(--background-color);
}

main > * {
  margin: 1em 0;
}

main > *:first-child {
  margin-top: -0.5em;
}

main > *:last-child {
  margin-bottom: -0.5em;
}

a:link {
  color: var(--link-color); 
  text-decoration: none;
}

a:visited {
  color: var(--link-visited-color);
}

a:focus-visible {
  outline: none;
}

h1 {
  font-weight: 400;
  font-size: var(--font-size);
}

h1::before {
  content: "*** ";
}

h1::after {
  content: " ***";
}

p.character-table {
  white-space: pre;
  text-transform: none;
}

ul {
  padding: 0 0 0 2em;
  list-style-type: "-";
}

li:has(> a:hover, > a:focus-visible) {
  list-style-type: "->"
}

@media screen and (pointer: coarse), screen and (max-width: 400px) {
  :root {
    --font-size: 12px;
  }

  body {
    hyphens: none;
    background-color: var(--background-color);
  }
}