@layer normalize, core, components;
@import "https://fonts.googleapis.com/css?family=Open+Sans:400,600";
@import "normalize.css" layer(normalize);

@page {
  margin: 0;
}

@layer core {
  @layer document {
    * {
      box-sizing: border-box;
      flex: 0 1 auto;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }

    html {
      font-size: 100%;
      height: 100%;

      --black: #000;

      --gray1: #111;
      --gray2: #222;
      --gray3: #333;
      --gray4: #444;
      --gray5: #555;
      --gray6: #666;
      --gray7: #777;
      --gray8: #888;
      --gray9: #999;
      --grayA: #aaa;
      --grayB: #bbb;
      --grayC: #ccc;
      --grayD: #ddd;
      --grayE: #eee;

      --white: #fff;

      --blue: #05a;
      --purple: #808;

      --accent: var(--blue);

      --sans: "Open Sans", sans-serif;

      --u8: 4;
      --u7: 3.3636;
      --u6: 2.8284;
      --u5: 2.3784;
      --u4: 2;
      --u3: 1.6818;
      --u2: 1.4142;
      --u1: 1.1892;

      --d1: 0.8409;
      --d2: 0.7071;
      --d3: 0.5946;
      --d4: 0.5;
      --d5: 0.4204;
      --d6: 0.3536;
      --d7: 0.2973;
      --d8: 0.25;
    }

    body {
      background-color: var(--white);
      color: var(--gray4);
      display: flex;
      flex-direction: column;
      font-family: var(--sans);
      font-size: 1rem;
      line-height: var(--u2);
      min-height: 100%;
      overflow-y: scroll;
    }

    @media print {
      body {
        font-size: 0.75rem;
      }
    }
  }

  @layer headings {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: var(--gray1);
      font-weight: 600;
      text-transform: uppercase;
    }

    h1 {
      font-size: calc(var(--u4) * 1em);
      font-weight: normal;
      letter-spacing: 0.125em;
      line-height: 1;
      margin: 0.5em 0;
    }

    @media (min-width: 20rem) {
      h1 {
        font-size: calc(var(--u5) * 1em);
      }
    }
    @media (min-width: 30rem) {
      h1 {
        font-size: calc(var(--u6) * 1em);
      }
    }
    @media (min-width: 48rem) {
      h1 {
        font-size: calc(var(--u7) * 1em);
      }
    }
    @media (min-width: 60rem) {
      h1 {
        font-size: calc(var(--u8) * 1em);
      }
    }

    h2 {
      font-size: calc(var(--u1) * 1em);
      letter-spacing: 0.25em;
      margin: 0 0 1em;
    }

    h3 {
      font-size: 1em;
      margin: 0;
    }
  }

  @layer links {
    :any-link {
      text-decoration: none;
    }

    :any-link:is(:hover, :focus) {
      outline: none;
      text-decoration: underline;
    }

    :link {
      color: var(--blue);
    }

    :visited {
      color: var(--purple);
    }

    @media print {
      :any-link {
        color: inherit;
      }
    }
  }

  @layer lists {
    ul,
    ol {
      font-size: calc(var(--d1) * 1em);
      padding-inline: 2em 0;
    }

    li {
      padding-inline: 0.5em 0;
      text-wrap: balance;
    }
  }

  @layer typography {
    p {
      margin: 0 0 1em;
    }

    strong {
      font-weight: 600;
    }
  }
}

@layer components {
  @layer {
    .Body {
      display: grid;
      flex-grow: 1;
      gap: 0;
      grid-template:
        "profile   "
        "experience"
        "education "
        "skills    "
        "contact   "
        / 1fr;
      margin: auto;
      padding: 0 2rem;
    }

    @media (min-width: 48rem), print {
      .Body {
        background-image: linear-gradient(var(--grayC), var(--grayC));
        background-position: calc((100% - 8rem) / 3 + 4rem) 0;
        background-repeat: repeat-y;
        background-size: 0.125rem;
        gap: 0 4rem;
        /* prettier-ignore */
        grid-template:
          "contact   profile   " auto
          "education experience" auto
          "skills    experience" 1fr
          / 1fr      2fr         ;
      }
    }

    @media (min-width: 60rem) {
      .Body {
        width: 58.75rem;
      }
    }

    @media (min-width: 75rem) {
      .Body {
        width: 65rem;
      }
    }
  }

  @layer {
    .ContactList {
      font-size: 1em;
    }
    @media (min-width: 48rem), print {
      .ContactList {
        list-style: none;
        padding: 0;
      }
    }

    .ContactList ._item {
      margin-block: 0.5em;
    }
    @media (min-width: 48rem), print {
      .ContactList ._item {
        padding: 0;
      }
    }

    .ContactList ._link {
      align-items: baseline;
      display: inline-flex;
    }

    .ContactList ._icon {
      height: 1em;
      line-height: 1;
      margin-inline: 0 0.375em;
    }
  }

  @layer {
    .Footer {
      background-color: var(--accent);
      padding-bottom: 3.125rem;
    }
  }

  @layer {
    .Header {
      padding: 1.75rem 0;
      text-align: center;
    }
  }

  @layer {
    .Section {
      margin-bottom: 1em;
    }

    @media (min-width: 48rem), print {
      .Section.-left {
        text-align: right;
      }

      .Section.-left ul {
        direction: rtl;
      }
    }

    .Section.-contact {
      grid-area: contact;
    }
    .Section.-education {
      grid-area: education;
    }
    .Section.-experience {
      grid-area: experience;
    }
    .Section.-profile {
      grid-area: profile;
    }
    .Section.-skills {
      grid-area: skills;
    }

    .Section ._heading {
      border-bottom: 0.125rem solid var(--grayC);
    }
  }

  @layer {
    .Subtitle {
      font-weight: 600;
      letter-spacing: 0.5em;
      text-transform: uppercase;
      text-wrap: balance;
    }
  }

  @layer {
    .Tag {
      --color: var(--gray6);
      background-color: var(--white);
      box-shadow: 0 0 0.0625rem var(--color);
      border-radius: 0.25rem;
      color: var(--color);
      display: inline-block;
      font-size: calc(var(--d2) * 1em);
      padding: 0.125rem 0.25rem;
    }
  }

  @layer {
    .Title {
      background-color: var(--accent);
    }

    .Title ._frame {
      background-color: var(--white);
      display: inline-block;
      padding: 0 1.25rem;
    }
  }
}