@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/InterVariable.ttf') format('truetype');
}

@media print {

  body {
    margin: 0px !important;
  }

  header,
  nav,
  aside,
  footer {
    display: none !important;
  }
}

.cv {
  --full-width: 700px;
  max-width: calc(var(--full-width) + 12rem) !important;
  background-color: #ffffff;
  padding: 7rem 6rem;
  padding-bottom: 6rem;
  border: 1px solid #999999;
  margin: 0 auto;

  @media print {
    max-width: unset !important;
    margin: 0px !important;
    padding: 0px !important;
    border: none !important;
    margin-top: 2rem !important;
  }

  article {
    font-size: 0.9rem;
    position: relative;
    display: grid;
    grid-gap: 1rem 2rem;
    grid-template:
      "a a g" auto
      "b b i" auto
      "c c c" auto
      "e e e" auto
      "f f f" auto
      "d d d" auto
      "p p p" auto
      "z z z" auto
      / calc((100% - 126px - 4rem) / 2) calc((100% - 126px - 4rem) / 2) 126px;

    @media print {
      max-width: unset !important;
      width: 100% !important;
    }

    * {
      font-family: Inter, sans-serif;
    }

    .header {
      grid-area: a;

      h2 {
        margin-top: 1.4rem !important;
      }
    }

    .glyphs {
      grid-area: g;
      width: 126px;
      line-break: anywhere;
      font-family: Inconsolata;
      font-size: 0.83rem;
      color: #999999;
      line-height: 0.9rem;
      user-select: none;
      pointer-events: none;
      margin-bottom: 2rem;
    }

    .personal-details {
      grid-area: c;
      margin-top: 1rem;
      margin-bottom: 2rem;

      row {
        gap: 2rem;

        cell {
          max-width: max-content;

          span {
            font-family: Inconsolata;
            font-size: 1rem;
            color: #666666;
            margin-top: -2px;
            text-transform: uppercase;
          }

          p {
            margin: 0px;
            margin-top: 0.25rem;
          }
        }
      }
    }

    .information {
      grid-area: i;

      row {
        margin-bottom: 1rem;
        flex-direction: column;

        cell {

          &:first-of-type {
            font-family: Inconsolata;
            font-size: 1rem;
            color: #666666;
            margin-top: -2px;
            text-transform: uppercase;
          }

          &:last-of-type {
            margin-top: 0.25rem;
          }
        }
      }
    }

    .profile {
      grid-area: b;

      p {
        margin: 0px;
      }
    }

    .skills {
      grid-area: d;

      .columns {
        column-count: 2;
        column-gap: 2rem;
        max-height: 290px;

        h2 {
          width: 100%;
          margin-bottom: 1rem !important;
        }

        h3 {
          margin-top: 0px !important;
          margin-bottom: 0.5rem !important;
          font-weight: 600;
        }

        h3 + row {
          margin-top: 1rem !important;
        }

        & > div {
          flex: calc(100% / 2 - 2rem * 1 / 2) 0 0;

          &:first-of-type {
            padding-bottom: 4rem;
          }
        }

        p {
          margin-top: 0.5rem;
          margin-bottom: 1rem;
        }

        row {
          margin-bottom: 0.5rem;

          cell {

            &:first-of-type {
              flex: unset;
              width: 110px;
            }

            &:last-of-type {
              font-family: Inconsolata;
              font-size: 1rem;
              color: #666666;
              max-width: 12ch;
              margin-top: -2px;
            }
          }
        }
      }
    }

    .professional-experience {
      grid-area: e;

      row {
        gap: 2rem;
        margin-bottom: 2rem;

        cell {

          &:first-of-type {
            font-family: Inconsolata;
            font-size: 1rem;
            color: #666666;
            margin-top: -2px;
            flex: 17ch 0 0;
          }

          h3 {
            margin: 0px;
            margin-bottom: 0.3rem;
            font-weight: 600;
          }

          span {
            color: #424242;
          }

          p {
            margin-top: 0.5rem;
            margin-bottom: 0px;
            font-size: 0.9rem;
          }
        }
      }
    }

    .education {
      grid-area: f;

      row {
        margin-bottom: 2rem;
        gap: 2rem;

        cell {

          &:first-of-type {
            font-family: Inconsolata;
            font-size: 1rem;
            color: #666666;
            margin-top: -2px;
            flex: 17ch 0 0;
          }

          h3 {
            margin: 0px;
            margin-bottom: 0.3rem;
            font-weight: 600;
          }

          span {
            color: #424242;
          }

          p {
    
          }
        }
      }
    }

    .projects {
      grid-area: p;

      row {
        margin-bottom: 1rem;
        gap: 2rem;
        flex-wrap: wrap;

        cell {
          flex: calc(100% / 3 - 2rem * 2 / 3) 0 0;
  
          h3 {
            margin: 0px;
            margin-bottom: 0.25rem;
            font-weight: 600;
          }

          span {
            font-family: Inconsolata;
            font-size: 1rem;
            color: #666666;
            margin-top: -2px;
            text-transform: uppercase;
            display: inline-block;
            margin-bottom: 0.5rem;
          }

          p {
            margin: 0px;
            font-size: 0.9rem;
          }
        }
      }
    }

    .footnotes {
      grid-area: z;
      margin-top: 2rem;

      p {
        text-align: right;
        color: #666666;
        margin: 0px;
        font-size: 0.85rem;

        a {
          color: #000000;
        }
      }
    }
  }

  aside {
    display: none !important;
  }

  h1 {
    text-align: left !important;
    margin-bottom: 0px !important;
    font-weight: 700 !important;
  }

  h1 + h2 {
    margin-top: 0.75rem !important;
    /* margin-bottom: 4rem !important; */
    color: #666666;
    border-bottom: none;
    font-weight: 500 !important;
  }

  h2 {
    margin: 0rem !important;
    margin-bottom: 2rem !important;
    padding: 0px !important;
    padding-bottom: 0.5rem !important;
    font-weight: 600 !important;
    border-bottom: 3px solid #bbbbbb;
  }

  h3 {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 1.5rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {

    .anchor {
      display: none !important;
    }

    .copy {
      display: none !important;
    }
  }
}

img.profile {
  width: 25%;
  user-select: none;
  pointer-events: none;
  aspect-ratio: 3/4;
  object-fit: cover;
  border: none !important;
  margin: 0px !important;
  opacity: 0;
}

row {
  display: flex;

  cell {
    flex: 1;
  }
}