html {
  font-size: 14pt;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Helvetica, Arial, sans-serif;
}

@media print {
  @page {
    margin: 0.5in;
  }

  html {
    font-size: 10pt;
  }

  body {
    margin-block: 0 !important;
  }

  ul {
    padding-inline-start: 1.25rem !important;

    li {
      padding-inline-start: 0.25rem !important;
    }
  }
}

a {
  color: inherit;
}

body {
  max-width: 55rem;
  margin-inline: auto;
  margin-block: 0.5rem 2rem;

  &>header {
    display: flex;
    padding: 0.5rem;
    flex-direction: row;
    flex-wrap: wrap;

    &>h1 {
      font-size: 2rem;
      font-weight: bolder;

      flex: 1 0 auto;

      /* Title, e.g., "Programmer" */
      &>span {
        font-size: 1.1rem;
        font-weight: 300;
      }
    }

    &>address {
      flex: 1 0 auto;
      align-self: end;

      text-align: end;

      font-style: normal;
      font-size: 0.9rem;
      line-height: 1.6;

      &>a {
        display: block;
        white-space: pre;

        &::after {
          margin-inline-start: 0.5rem;

          display: inline-block;

          position: relative;
          right: 0.5pt;
        }

        &[href*='michaelengen.com']::after {
          content: '🌐';
        }

        &[href^='mailto']::after {
          content: '📧';
        }

        &[href^='tel']::after {
          content: '📞';
        }

        &[href^='https://www.linkedin.com']::after {
          content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z' fill='%23007EBB'/%3E%3Cpath d='M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");
          background-size: 1rem 1rem;

          width: 1rem;
          height: 1rem;

          bottom: -2pt;
          right: 2pt;
        }
      }
    }
  }

  &>main {
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 0.75rem;

    /* h2-level sections, e.g., "Summary", "Experience", or "Education" */
    &>section {
      grid-column: 1 / 3;

      width: 100%;

      display: grid;
      grid-template-columns: subgrid;
      justify-items: stretch;
      align-items: start;

      row-gap: 0.75rem;
      column-gap: 1rem;

      border-block-start: 2pt solid #0E2181;
      padding-block-start: 0.75rem;
      padding-inline: 0.5rem;
      margin-inline: 0.25rem;

      line-height: 1.4;

      &>h2 {
        grid-column: 1 / span 1;

        margin-block-start: 0.2rem;

        line-height: 1;

        font-size: 1.1rem;
        font-weight: lighter;
        text-transform: uppercase;
      }

      &>p,
      &>section {
        grid-column: 2 / 3;
      }

      &>section {
        display: grid;
        gap: 0.25rem;

        &>header {
          display: grid;
          grid-template-columns: max-content 1fr;
          column-gap: 0.25rem;

          &>h3 {
            grid-column: 1 / span 1;

            font-size: 1rem;
            font-weight: bolder;
          }

          &>span {
            grid-column: 1;

            font-weight: lighter;

            &>.focus {
              text-transform: lowercase;
            }

            &.date {
              grid-column: 2;
              grid-row: 1;

              justify-self: end;
            }
          }
        }

        &>ul {
          padding-inline-start: 1rem;
        }
      }
    }
  }
}

@media screen and (max-width: 50rem) {
  body {
    main {
      &>section {

        &>h2 {
          grid-column-end: span 2;
          justify-self: center;

          font-size: 1.25rem;
        }

        &>p,
        &>section {
          grid-column-start: 1;

          &>header {
            &>h3 {
              grid-column-end: span 2;
            }

            &>span.date {
              grid-row: 2;
            }
          }
        }
      }
    }
  }
}