:root {
  --width: 1440px;
  --gutter: 0.25em;
  --padding: 0.25em 1em;

  --gradleft: #83c5be;
  --gradright: #ffddd2;
  --bg: #2E3536;
  --farbg: #67616f;
  --text: #effdf5;
  --gradient: linear-gradient(60deg, var(--gradleft) 0%, var(--gradright) 100%);
}

@font-face {
  font-family: "Helvetica";
  src: url("../assets/fonts/helvetica_regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson";
  src: url("../assets/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

#wrapper {
  max-width: var(--width);
  margin: 0.5em auto 5em;
  height: auto;
}

#content {
  display: flex;
}

#titlebar {
  background-color: var(--bg);
  border: 5px solid;
  border-image: var(--gradient) 1;
  font-size: 2.5em;
  display: flex;
  justify-content: center;
  padding: 0.5em;
  font-family: "Atkinson", monospace;
  font-size: 28pt;
}

.text-center {
  text-align: center;
}

h1, h2, h3, h4, h5 {
  font-family: "Atkinson", monospace;
}

h1 {
  font-size: 18pt;
}

body {
  color: var(--text);
  line-height: 1.4;
  background-color: var(--farbg);
  font-family: "Helvetica", sans-serif;
  font-size: 14pt;
}

section {
  padding: var(--padding);
  background-color: var(--bg);
  border: 1.5px solid var(--farbg);
  transition: border-color ease-out 0.25s;
  
  &:hover {
    border-image: var(--gradient) 1;
  }
}

main {
  flex-wrap: wrap;
  padding: var(--gutter);
}

aside {
  width: 22.5%;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  position: sticky;
  top: var(--gutter);
  padding: var(--gutter);
}

main {
  flex: 1;
}

a {
  --link-underline: var(--gradient);
  --link-color: var(--gradient);

  transition-duration: 0.5s;
  text-decoration: none;
  font-weight: 500;
  color: transparent;
  background:
    linear-gradient(to right, transparent, transparent),
    var(--link-underline),
    var(--link-color) text;
  background-size:
    100% 1px,
    0 1px,
    100% 100%;
  background-position:
    100% 100%,
    50% 100%,
    100% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.1s ease-out, background-position 0.1s ease-out;

  &:hover {
    background-size:
      100% 1px,
      100% 1px,
      100% 100%;
    background-position:
      100% 100%,
      0 100%,
      100% 100%;
  }
}