:root {
  --font-header: 'Atkinson-Hyperlegible-Regular-102.ttf';
  --font-aside: 'Atkinson-Hyperlegible-Regular-102.ttf';
  --font-main: 'Atkinson-Hyperlegible-Regular-102.ttf';
  --font-headlines: 'Atkinson-Hyperlegible-Bold-102.ttf';
  --font-footer: 'Atkinson-Hyperlegible-Regular-102.ttf';

  --font-ahlertze-group: 'Atkinson-Hyperlegible-Bold-102.ttf';
  --font-design-team1: 'Atkinson-Hyperlegible-Bold-102.ttf';
  --font-design-team2: 'Barrio.ttf';
  --font-ahlers-dt1: 'Arial-BoldMT.ttf';
  --font-ahlers-dt2: 'ArialMT.ttf';

  --color-logobg: black;
  --color-logo: white;
  --color-textbg: white;
  --color-text: black;
  --color-frame: black;
  --color-footer: white;

  --size-medium: 16px;
  --size-small: 14px;
}

html, body {
  margin: 0;
  padding: 0;
}

main {
  margin: 0;
  padding: 0em 2.0em 2.0em 2.0em;
  background-color: var(--color-textbg);
  font-family: var(--font-main);
  font-size: 1.17em;
  color: var(--color-text);
  line-height: 1.3;
  text-align: left;
}
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  margin: 0.8em 0em 0.5em 0em;
  padding: 0;
  font-family: var(--font-headlines);
  font-weight: normal;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
main ol,
main ul {
  margin: 0em 0em 0.8em 0em;
  padding: 0em 0em 0em 1.3em;
}
main li {
  margin: 0;
  padding: 0;
}
main p {
  margin: 0em 0em 0.8em 0em;
  padding: 0;
}
main a:link,
main a:visited,
main a:active {
  color: var(--color-text);
  text-decoration: underline;
}
main a:hover {
  background-color: var(--color-text);
  color: var(--color-textbg);
  text-decoration: none;
}

header {
  margin: 0;
  padding: 0.8em 1.0em 0.5em 1.5em;
  background-color: var(--color-logobg);
  font-family: var(--font-header);
  color: var(--color-logo);
  text-align: left;
  border-bottom: 0.15em solid var(--color-frame);
}
header h1 {
  margin: 0.5em 0.0em 0.3em 0.0em;
  padding: 0;
  font-size: 2.67em;
  font-weight: normal;
  line-height: 1.0;
}

aside {
  margin: 0;
  padding: 0.75em 1.2em 1.0em 1.0em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-textbg);
  font-family: var(--font-aside);
  font-size: 1.17em;
  font-weight: normal;
  font-style: normal;
  color: var(--color-text);
  line-height: 1.5;
  text-align: left;
}
aside.left {
  border-right: 0.15em solid var(--color-frame);
}
aside.right {
  border-left: 0.15em solid var(--color-frame);
}
aside a:link,
aside a:visited,
aside a:active {
  color: var(--color-text);
  text-decoration: none;
}
aside a:hover {
  background-color: var(--color-text);
  color: var(--color-textbg);
  text-decoration: none;
}

footer {
  margin: 0;
  padding: 0.4em 0.8em 0.4em 0.8em;
  background-color: var(--color-logobg);
  font-family: var(--font-footer);
  font-size: 1.0em;
  font-weight: normal;
  font-style: normal;
  color: var(--color-footer);
  text-transform: none;
  line-height: 1.3;
  text-align: right;
  border-top: 0.15em solid var(--color-frame);
}
footer a:link,
footer a:visited,
footer a:active {
  color: var(--color-footer);
  text-decoration: none;
}
footer a:hover {
  background-color: var(--color-footer);
  color: var(--color-logobg);
  text-decoration: none;
}

hr.hidden {
  display: none;
  border: none;
}

.body-container {
  font-size: var(--size-medium);
  display: grid;
  height: 100vh;
  gap: 0.0em;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "header-container       header-container   header-container"
    "aside-container-left   main-container     aside-container-right"
    "footer-container       footer-container   footer-container";
}

@media (max-width: 678px) {
  .body-container {
  font-size: var(--size-small);
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header-container"
      "aside-container-left"
      "main-container"
      "aside-container-right"
      "footer-container";
  }
  aside.left {
    border-right: 0;
    border-bottom: 0.15em solid var(--color-frame);
  }
  aside.right {
    border-top: 0.15em solid var(--color-frame);
    border-left: 0;
  }
}
/*
@media (prefers-color-scheme: light) {
  :root {
    --color-logobg: black;
    --color-logo: #bada55;
    --color-textbg: lightgrey;
    --color-text: black;
    --color-frame: black;
    --color-footer: lightgrey;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-logobg: black;
    --color-logo: grey;
    --color-textbg: black;
    --color-text: grey;
    --color-frame: grey;
    --color-footer: grey;
  }
}
*/