:root {
  --color-frame: white;
  --color-logobg: white;
  --color-logo: white;
  --color-textbg: white;
  --color-text: white;
  --size-medium: 1px;
  --size-small: 1px;
}

@font-face {
  font-family: 'Atkinson Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./_fonts/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Bold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./_fonts/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Italic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./_fonts/Atkinson-Hyperlegible-Italic-102a.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Bold Italic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./_fonts/Atkinson-Hyperlegible-BoldItalic-102a.woff2') format('woff2');
}
@font-face {
  font-family: 'Segoe UI Light';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('./_fonts/Segoe-UI-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Segoe UI';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./_fonts/Segoe-UI.woff2') format('woff2');
}
@font-face {
  font-family: 'Segoe UI Bold';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./_fonts/Segoe-UI-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Arial';
    src: local('Arial'), local('ArialMT'),
        url('./_fonts/ArialMT.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Arial';
    src: local('Arial Bold'), local('Arial-BoldMT'),
        url('./_fonts/Arial-BoldMT.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Arial';
    src: local('Arial Italic'), local('Arial-ItalicMT'),
        url('./_fonts/Arial-ItalicMT.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Arial';
    src: local('Arial Bold Italic'), local('Arial-BoldItalicMT'),
        url('./_fonts/Arial-BoldItalicMT.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Arial Narrow';
    src: local('Arial Narrow'), local('ArialNarrow'),
        url('./_fonts/ArialNarrow.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Arial Narrow';
    src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'),
        url('./_fonts/ArialNarrow-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Arial Narrow';
    src: local('Arial Narrow Italic'), local('ArialNarrow-Italic'),
        url('./_fonts/ArialNarrow-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Arial Narrow';
    src: local('Arial Narrow Bold Italic'), local('ArialNarrow-BoldItalic'),
        url('./_fonts/ArialNarrow-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Barrio Regular';
    src: url('./_fonts/Barrio-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

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

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

/*header*/
header {
  margin: 0;
  padding: 0.8em 1.0em 0.5em 1.5em;
  background-color: var(--color-logobg);
  font-family: "Atkinson Bold";
  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*/
aside {
  margin: 0;
  padding: 0.75em 1.2em 1.0em 1.0em;
  background-color: var(--color-textbg);
  font-family: "Atkinson Regular";
  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*/
footer {
  margin: 0;
  padding: 0.4em 0.8em 0.4em 0.8em;
  background-color: var(--color-logobg);
  font-family: "Atkinson Regular";
  font-size: 1.0em;
  font-weight: normal;
  font-style: normal;
  color: var(--color-textbg);
  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-textbg);
  text-decoration: none;
}
footer a:hover {
  background-color: var(--color-textbg);
  color: var(--color-logobg);
  text-decoration: none;
}

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

/*desktop*/
.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";
}

/*mobil*/
@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;
  }
}