@font-face {
  font-family: "Berkeley Mono Regular";
  src: url("./fonts/BerkeleyMonoVariable-Regular.woff2");
}

:root {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial;
  --text-primary-rgb: 51, 51, 51;
  --text-secondary-rgb: 102, 102, 102;
  --color-primary-rgb: 117, 75, 75;
  --color-accent-rgb: 68, 90, 90;

  --text-primary: rgb(var(--text-primary-rgb));
  --text-secondary: rgb(var(--text-secondary-rgb));
  --color-primary: rgb(var(--color-primary-rgb));
  --color-accent: rgb(var(--color-accent-rgb));
}

html {
  background-color: rgba(var(--color-accent-rgb), 0.66);
}

#page {
  box-sizing: border-box;
  max-width: 62rem;
  padding: 1.2cm;
  margin: 3rem auto;
  background-color: white;
  box-shadow: 0px 0px 4px hsl(0deg 0% 0% / 0.1),
    0px 0px 8px hsl(0deg 0% 0% / 0.1), 0px 0px 16px hsl(0deg 0% 0% / 0.1),
    0px 0px 32px hsl(0deg 0% 0% / 0.1), 0px 0px 64px hsl(0deg 0% 0% / 0.1);
  color: var(--text-primary);
}

h2 {
  color: var(--color-primary);
}

h3,
h4,
h5,
h6 {
  color: var(--color-accent);
}

a {
  font-family: "Berkeley Mono Regular", "Courier New", Courier, monospace;
  font-weight: lighter;
  /* Ligatures make links look weird! */
  font-variant-ligatures: none;
  color: var(--color-accent);
  text-decoration: dotted underline;
}

.date-year {
  font-family: "Berkeley Mono Regular", "Courier New", Courier, monospace;
  font-weight: lighter;
  color: var(--color-accent);
}

.left-border {
  border-left: rgba(var(--text-secondary-rgb), 0.5) 2.5px solid;
  padding-left: 1rem;
}

header {
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 6fr 5fr;

  .kv-pair {
    margin: 1rem;
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-end;

    border-right: rgba(var(--text-secondary-rgb), 0.5) 2.5px solid;

    > h4 {
      margin: 0;
    }
  }

  > hgroup {
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    > h1,
    p {
      margin: 0;
    }

    > h1 {
      font-size: xxx-large;
      color: var(--color-primary);
    }

    > p {
      font-size: larger;
      font-style: italic;
    }
  }
}

hgroup,
hgroup::before {
  > :nth-child(2) {
    color: var(--text-secondary);
    /* font-style: italic; */
  }
}

.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.three-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.skills {
  display: grid;
  grid-template-columns: 1fr 2fr;

  h3 {
    margin-top: 0rem;
  }
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.kv-pair {
  display: block;

  > :nth-child(1) {
    font-weight: bold;
    margin-bottom: 0.15rem;
  }

  > :nth-child(2) {
    margin: 0;
  }
}

.headed-list {
  padding-left: 1rem;

  > h3,
  h4 {
    margin-bottom: 0rem;
    padding-left: 1rem;
    color: var(--text-secondary);
  }

  ul {
    padding-left: 1rem;
    margin-bottom: 0;
  }

  li {
    margin-bottom: 0.3rem;
    margin-left: 1rem;
    list-style-type: square;
    padding-left: 0.5rem;
  }

  li .first-word {
    /* font-weight: bold; */
  }
}

.past-positions {
  color: rgba(var(--text-secondary-rgb), 0.75);
}

/* Override the styling for printing to be able to save as PDF.

Excellent write-up from Mark Vincze on building a modern CV that
still looks great when printed: https://blog.markvincze.com/cv.html
*/

@media print {
  @page {
    size: a4;
    margin: none;
  }

  html {
    print-color-adjust: exact;
    font-size: 8.2pt;
    background-color: white;
  }

  #page {
    font-size: 8.2pt;
    padding: 1.2cm;
    margin: 0;
    box-shadow: none;
    max-width: none;
  }
}