:root {
  --typography-spacing-vertical: 0.5rem;
}

article {
  transition: opacity 100ms ease 20ms;
}

@media(hover: hover) {
  main:has(article:hover) {
    article:not(:hover) {
      opacity: 70%;
    }
  }
}

article ul li {
  list-style: circle;
}

.repo.selected {
  background: var(--muted-accent);
}

/* float the links at the bottom */
#work {
  & details {
    position: relative;
    & div {
      position: absolute;
      bottom: .5ch;
      right: 1ch;
    }
  }
}

  main > header {
    margin: 0;
    border: none;
    display: grid;
    grid-template-columns: 80px 32ch 1fr;
    grid-column-gap: 10px;
    img {
      grid-column-start: 1;
      width: 80px;
      grid-row: span 4;
    }
    & > h1 {
      grid-row: span 3;
      grid-column: 2/3;
    }
    a[href^="mailto"], a[href^="tel"] {
      grid-column-start: 2;
      grid-row: 4;
      text-align: start;
    }
    a[href^="tel"] {
      justify-self: end;
    }
    & > *:not(h1, img) {
      text-align: end;
      grid-column-start: 3;
    }
  }

@media print {
  :root {
    font-size: 14px;
  }
  article > header {
    font-size: 16px;
    font-weight: bolder;
  }
  a {
    background: none !important;
  }
  main > header {
    grid-template-columns: 60px 32ch 1fr;
    & > h1 {
      margin: 0;
      grid-row: span 2 !important;
    }
    a[href^="mailto"], a[href^="tel"] {
      grid-row: 3;
    }
    img {
      grid-row: span 3;
      width: 60px;
    }
  }
  #code {
    display: grid !important;
    grid-template-columns: 2fr 5fr;
    & header {
      grid-column: span 2;
    }
    & a {
      /* have the "underline" appear in the whole column */
      width: 100%;
      /* shrink the line height so bottom border appears to be the underline */
      text-decoration: none;
      border-bottom: 1px dotted currentColor;
      height: 20px;
    }
  }
  #work {
    --density: .05;
    a {
      display: none !important;
    }
    & details {
      padding-inline: 1ch;
      margin-inline: -8px;
    }
  }
  #education > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    & h5 {
      display: contents;
      & span {
        grid-column: 1 / 1;
      }
      /* grid-row: span 2; */
      margin: 0;
    }
    & p {
      text-align: right;
      &:first-of-type { grid-row: 1 / 1; }
      grid-column: 2 / 2;
      margin: 0;
    }
  }
  /* #award { */
  /*   display: flex; */
  /*   align-items: center; */
  /*   justify-content: space-between; */
  /* } */

  article header {
    margin: 0;
    margin-top: 3px;
  }
  article section,p {
    margin: 5px;
  }
  .navbar, button, body > footer {
    display: none !important;
  }
  .print\:show {
    display: block !important;
  }
  .print\:hide {
    display: none !important;
  }
}