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

@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: 'Barrio Regular';
    src: url('./_fonts/Barrio-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@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');
}

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

/*main*/
main {
  margin: 0;
  padding: 0em 10.0em 2.0em 10.0em;
  background-color: var(--color-textbg);
  font-family: "Segoe UI";
  font-weight: normal;
  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: "Segoe UI 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;
  background: linear-gradient(var(--color-highlight), var(--color-highlight)) no-repeat;
  background-size: 100% 0;
  background-position: 0 100%;
}
a:hover {
  text-decoration: none;
  background-size: 100% 0.6em;
}

/*header*/
header {
  margin: 0;
  padding: 0.5em 1.0em 0.0em 1.0em;
  background-color: var(--color-logobg);

  background: linear-gradient(var(--color-highlight), var(--color-highlight)) no-repeat;
  background-size: 100% 1.0em;
  background-position: 0 2.9em;

  color: var(--color-logo);
  border-bottom: 0.0em solid var(--color-frame);
}
header h1 {
  margin: 0;
  padding: 0;
  font-family: "Atkinson Bold";
  font-weight: normal;
  font-size: 3.0em;
  text-align: center;
  line-height: 1.0;
}

/*aside*/
aside {
  margin: 0;
  padding: 0.75em 1.0em 1.0em 1.0em;
  background-color: var(--color-textbg);
  font-family: "Segoe UI";
  font-weight: normal;
  font-size: 1.17em;
  font-style: normal;
  color: var(--color-text);
  line-height: 1.5;
}
aside.left {
  text-align: center;
  border-bottom: 0.0em solid var(--color-frame);
}
aside.right {
  padding: 0.0em 10.0em 0.0em 10.0em;
  text-align: left;
  border-top: 0.0em solid var(--color-frame);
}
aside a:link,
aside a:visited,
aside a:active {
  color: var(--color-text);
  text-decoration: none;
  background: linear-gradient(var(--color-highlight), var(--color-highlight)) no-repeat;
  background-size: 100% 0;
  background-position: 0 100%;
}
aside a:hover {
  text-decoration: none;
  background-size: 100% 0.6em;
}

/*footer*/
footer {
  margin: 0;
  padding: 0.5em 1.0em 0.4em 1.0em;
  background-color: var(--color-logobg);
  font-family: "Segoe UI Bold";
  font-weight: normal;
  font-size: 1.0em;
  font-style: normal;
  color: var(--color-text);
  text-transform: none;
  line-height: 1.3;
  text-align: center;
  border-top: 0.0em solid var(--color-frame);
}
footer a:link,
footer a:visited,
footer a:active {
  color: var(--color-text);
  text-decoration: none;
  background: linear-gradient(var(--color-highlight), var(--color-highlight)) no-repeat;
  background-size: 100% 0;
  background-position: 0 100%;
}
footer a:hover {
  text-decoration: none;
  background-size: 100% 0.6em;
}

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

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


@media (max-width: 960px) {
  main {
    padding: 0em 5.0em 2.0em 5.0em;
  }
  aside.right {
    padding: 0.0em 5.0em 0.0em 5.0em;
  }
}

@media (max-width: 720px) {
  .container {
    font-size: var(--size-small);
  }
  main {
    padding: 0em 2.0em 2.0em 2.0em;
  }
  aside.right {
    padding: 0.0em 2.0em 0.0em 2.0em;
  }
}