/* Naming convention: https://ricostacruz.com/rscss/ */

$color-signature: #2A3FFB;
$color-text-dim: #777;
$color-border-dim: #aaa;
$fz-1: 36px;
$fz-2: 22px;
$fz-3: 18px;
$fz-4: 16px;
$lh-p: 1.4;

.cv-container {
  font-size: 14px;
  font-family: system-ui, sans-serif;
}

a, a:visited, a:active {
  color: $color-signature;
  text-decoration: none;
}
a:hover {
  color: $color-signature;
  text-decoration: underline;
}

section {
  .section-title {
    margin-top: 3em;
    display: flex;
    h2 {
      font-size: $fz-2;
      font-weight: 600;
      color: $color-signature;
      margin: 0;
    }
    .line {
      flex-grow: 1;
      margin: 14px 0 0 1em;
      height: 2px;
      background-color: $color-signature;
    }
  }

  .section-item {
    margin-top: 2em;

    h3 {
      font-size: $fz-3;
      line-height: 1.4;
      margin: 0;
    }

    ul {
      margin: .8em 0;
      padding-left: 16px;
      li {
        margin-bottom: .4em;
      }
    }
  }

  svg {
    vertical-align: bottom;
    position: relative;
    bottom: 1px;
  }
  .row {
    margin: .4em 0;
  }
  .p, p {
    line-height: $lh-p;
    margin: .8em 0;
  }

  .space-between {
    display: flex;
    justify-content: space-between;

    a {
      color: $color-text-dim;
    }
  }

  .keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: .8em;

    .item {
      font-size: 13px;
      color: #555;
      padding: 0 4px;
      height: 22px;
      line-height: 21px;
      background: #f1f1f1;
    }
  }

  .two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.5em;
  }

  /* helpers */
  ._fz-4 {
    font-size: $fz-4;
  }
  ._ul {
    text-decoration: underline;
  }
  ._text-dim {
    color: $color-text-dim;
  }
}

.basics-section {
  h1 {
    font-size: $fz-1;
    font-weight: 600;
    margin: .2em 0 .2em 0;
  }
  .contact {
    color: $color-text-dim;

    display: flex;
    .item {
      margin-right: 1em;
      a {
        color: $color-text-dim;
      }
    }
  }
}

.sideprojects-section {
  .description p:last-of-type {
    margin-bottom: 0;
  }
}

footer {
  opacity: .7;
  margin-top: 3em;
  border-top: 1px solid $color-border-dim;
  padding: 4px 0 8px;
  display: flex;
  font-size: 13px;
  color: $color-text-dim;
  > div {
    margin-right: 2em;
  }
}