@media print {
  @page {
    size: letter;
    margin: .5in;

    @bottom-center {
      content: counter(page) "/" counter(pages);
    }
  }
}

html {
  @media print {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 10pt;

    background: white;
  }
}

body > nav {
  @media print {
    display: none;
  }
}

.resume {
  --max-width: 1200px;

  --horizontal-list-separator: ", ";
  --horizontal-list-separator-margin: 0;

  font-family: "Helvetica Neue", sans-serif;

  max-width: var(--max-width);
  margin: 2rem auto;
  padding: 0 1rem;

  line-height: 1.5;

  /* media query doesn't support variables */
  @media (max-width: 1200px) {
    margin: 0 auto;
  }

  @media print {
    max-width: 100%;

    margin: 0;
    padding: 0;
  }

  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.25rem;
  
    margin-bottom: 1rem;
  }
  
  h3 {
    font-size: 1rem;
    font-weight: 800;
  
    margin-bottom: .5rem;
  }
  
  p {
    margin-bottom: .5rem;
  }  

  a,
  .location {
    color: inherit;

    text-decoration-line: none;

    svg.icon {
      fill: inherit;
    }

    &:hover {
      text-decoration-line: underline;
    }

    &:visited {
      color: inherit;
    }
  }

  a:visited svg.icon {
    fill: inherit;
  }

  > header {
    margin-bottom: 2rem;

    .title {
      font-size: 1.25rem;

      color: var(--header-secondary-color);
    }

    > address {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto;
      grid-template-areas:
        "location email linkedin"
        ".  phone github";

      margin: 1rem 0;

      @media (max-width: 700px) {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "location linkedin"
          "email github"
          "phone .";
      }

      @media (max-width: 500px) {
        grid-template-columns: 1fr;
        grid-template-areas:
          "location"
          "email"
          "phone"
          "linkedin"
          "github";
      }

      a, .location {
        text-wrap: nowrap;
      }

      .email {
        grid-area: email;
      }

      .location {
        grid-area: location;
      }

      .phone {
        grid-area: phone;
      }

      .linkedin {
        grid-area: linkedin;
      }

      .github {
        grid-area: github;
      }
    }
  }

  section {
    margin: 2rem 0;
  
    > article {
      margin-bottom: 1rem;
  
      break-inside: avoid;
    }
  }
  
  .skills-section,
  .education-section {
    break-inside: avoid;
  }
  
  .job-position,
  .education-entry {
    > header {
      display: grid;
      
      grid-template-columns: 2fr 0.5fr 0.5fr;
      grid-template-rows: auto;
      grid-template-areas:
        "title location date-range"
        "subtitle . .";

      @media (max-width: 700px) {
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "title title"
          "location date-range"
          "subtitle subtitle";
      }
  
      .title {
        grid-area: title;
      }
  
      .date-range {
        grid-area: date-range;
 
        text-align: end;

        color: var(--base-secondary-color);
      }
  
      .location {
        grid-area: location;
  
        color: var(--base-secondary-color);
      }

      .subtitle {
        grid-area: subtitle;

        color: var(--base-secondary-color);
      }
    }
  }
  
  .job-position
  {
    .details {
      padding-inline-start: 2rem;
  
      list-style-type: square;
  
      @media (max-width: 500px) {
        padding-inline-start: 1rem;
      }
    }
  }
  
  .education-entry {
    .degree-and-major {
      color: var(--base-secondary-color);
    }
  }
 
  .skills-categories-list {
    display: grid;
    grid-template-columns: [category] auto [skills] 1fr;
    grid-template-rows: auto;

    column-gap: 1rem;

    @media (max-width: 700px) {
      grid-template-columns: auto;

      *:nth-child(2n) {
        margin-bottom: 1rem;
      }
    }

    > .category {
      grid-column: category;

      @media (max-width: 700px) {
        grid-column: auto;
      }

      color: var(--base-secondary-color);
  
      &::after {
        content: ": ";
      }
    }
  
    > .skills {
      grid-column: skills;

      @media (max-width: 700px) {
        grid-column: auto;
      }
    }

    .skill:not(:last-child)::after {
      content: ", ";
    }
  }
}