:root {
  color-scheme: light dark;
}

:root {
  --background-color: #fafafa;
  --nav-bar-color: #ffffffe2;
  --foreground-color: #010101;

  --link-color: #237bf6;

  --max-content-width: 900px;
  --aside-width: 20rem;
  --content-padding: 1rem;

  --body-font: "Avenir Next", "Helvetica Neue", "Helvetica", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #000;
    --foreground-color: #ededec;
    --nav-bar-color: #191919c7;
  }
}

html {
  background-color: var(--background-color);
  line-height: 1.4;
  font-family: var(--body-font);
}

body {
  margin: 0;
}

header {
  background-color: var(--nav-bar-color);
  position: sticky;
  top: 0;

  nav {
    max-width: var(--max-content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.2rem var(--content-padding);

    a {
      color: var(--foreground-color) !important;
      font-weight: bold;
    }

    .title {
      margin-right: auto;
      display: flex;
      align-items: center;
      font-size: 1.5rem;

      img {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        margin-right: 0.5rem;
      }
    }
  }
}

main {
  max-width: var(--max-content-width);
  padding: var(--content-padding);
  margin: 0 auto;
  overflow: hidden;

  img {
    width: 100%;
  }
}

a,
a:visited {
  text-decoration: none;
  color: var(--link-color);
}
a:hover {
  text-decoration: underline;
}

@media (width < 900px) {
  header {
    position: initial;

    nav {
      flex-wrap: wrap;
      justify-content: center;

      .title {
        width: 100%;
        justify-content: center;
      }
    }
  }
}

aside > ul {
  list-style: none;
  display: inline;
  padding: 0;
  margin: 0;
}

@media (width < calc(900px + 21rem)) {
  aside > ul {
    > li:not(:last-child)::after {
      content: ", ";
    }

    li {
      display: inline;
    }
  }
}

@media (width >= calc(900px + 21rem)) {
  aside {
    font-family: "Baskerville", serif;
    position: absolute;
    text-align: right;
    margin-left: calc(-10.5rem);
    width: calc(10rem);
  }
}

.printOnly {
  display: none;
}

@media print {
  nav a:not(:first-child) {
    display: none;
  }

  .printOnly {
    display: block;
  }

  .page-break-after {
    break-after: page;
  }
}

ul.archive {
  list-style: none;
  padding: 0;
  margin: 0;

  .date {
    color: var(--foreground-color);
  }
}

main.cv {
  max-width: unset;

  > section {
    display: grid;
    grid-template-columns: 10rem minmax(auto, 900px) 10rem;
    justify-content: center;
    column-gap: 2rem;
    grid-template-areas:
      "date       headline"
      "-          role"
      "technology summary";

    > h2 {
      grid-area: headline;
      margin: 1em 0 0 0;
    }

    .date {
      grid-area: date;
      justify-self: end;
      align-self: end;

      font-style: italic;
    }

    .role {
      grid-area: role;
      margin-bottom: 0.5rem;
    }

    ul.highlights {
      grid-area: summary;
      padding-inline-start: 1rem;
      font-style: italic;
      margin-block: 0;
    }

    .technologies {
      grid-area: technology;
      text-align: right;
      margin-block: 0;
      list-style: none;
    }
  }
}

@media print {
  main.cv {
    > section {
      grid-template-columns: 10rem 1fr;
    }
  }
}

@media screen and (width < calc(900px + 21rem)) {
  main.cv {
    > section {
      grid-template-columns: 1fr;
      grid-template-areas:
        "headline   role"
        "technology date"
        "summary    summary";
      column-gap: 0;

      > h2 {
        margin: 1em 0 0 0;
        border-bottom: 0.5px solid var(--foreground-color);
      }

      .date {
        margin-bottom: 0.5rem;
        font-family: monospace;
      }

      .role {
        font-style: normal;
        font-weight: bold;
        border-bottom: 0.5px solid var(--foreground-color);
        justify-self: unset;
        align-self: end;
        margin: 0;
      }

      ul.highlights {
        padding-inline-start: 1rem;
        font-style: italic;
        margin-block: 0;
      }

      .technologies {
        justify-self: start;
        padding: 0;
        margin-bottom: 0.5rem;
        font-family: monospace;

        > li:not(:last-child)::after {
          content: ", ";
        }

        li {
          display: inline;
        }
      }
    }
  }
}

@media screen and (width < calc(600px)) {
  main.cv {
    > section {
      grid-template-columns: 1fr;
      grid-template-areas:
        "headline"
        "role"
        "date"
        "technology"
        "summary";
      column-gap: 0;

      .role {
        border: 0;
      }

      .date {
        border: 0;
        justify-self: start;
      }
    }
  }
}