$bp-tablet: 600px;
$bp-desktop: 900px;
$bp-super: 1200px;

$link-border-width: 0.2rem;

@mixin prefer-light {
  --bg-color: #e9e9e9;
  --border-color: #ccc;
  --cta-color: #e24350;
  --fg-color: #333333;
  --tag-bg-color: #e9e9e9;
}

@mixin prefer-dark {
  --bg-color: #333333;
  --border-color: #999;
  --cta-color: #e24350;
  --fg-color: #e9e9e9;
  --tag-bg-color: #e9e9e9;
}

:root {
  font-family: 'Roboto Mono', 'Courier New', Courier, monospace;
  font-size: 12pt;

  @include prefer-light;

  @media (prefers-color-scheme: dark) {
    @include prefer-dark;
  }
}

html,
body {
  background-color: var(--bg-color);
  color: var(--fg-color);

  padding: 0;
  margin: 0;

  .color-light {
    @include prefer-light;
  }

  .color-dark {
    @include prefer-dark;
  }
}

@mixin link($color: var(--cta-color)) {
  border-bottom: $link-border-width solid $color;
  color: $color;
  text-decoration: none;
}

@mixin link-hover {
  cursor: pointer;

  &:hover {
    border-bottom-color: var(--bg-color);
  }
}

a {
  @include link;
  @include link-hover;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4em;
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1em;
  margin: 0;
  padding: 0;
}

h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1em;
  margin: 0;
  padding: 0;
}

p {
  line-height: 1.5em;
  margin: 1rem 0;
}

ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style-position: inside;
  list-style-type: square;
  padding: 0;
}

li {
  line-height: 1.5rem;
}

.cta {
  color: var(--cta-color);
  text-transform: uppercase;
}

main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
}

#top {
  header h1 {
    display: flex;
    flex-direction: column;

    @media (min-width: $bp-desktop) {
      display: initial;
    }
  }

  .description {
    font-style: italic;
  }
}

#skills {
  #skills-tags {
    margin-top: 2rem;
  }

  .tags {
    $ph: 0.4rem;
    $pv: 0.2rem;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;

    .tag {
      border-radius: 0.3rem;
      border-width: 0;
      display: inline-block;
      padding: $pv $ph;
    }

    @mixin tag($bg, $fg) {
      background-color: $bg;
      border-color: $bg;
      color: $fg;

      &.active {
        @include link($bg);
        background-color: var(--tag-bg-color);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding-bottom: $pv - $link-border-width;
      }
    }

    [data-tag="database"] {
      @include tag(red, white);
    }

    [data-tag="design"] {
      @include tag(darkgreen, white);
    }

    [data-tag="ecommerce"] {
      @include tag(orange, black);
    }

    [data-tag="framework"] {
      @include tag(teal, white);
    }

    [data-tag="js"] {
      @include tag(green, white);
    }

    [data-tag="knowledge"] {
      @include tag(salmon, black);
    }

    [data-tag="language"] {
      @include tag(navy, white);
    }

    [data-tag="office"] {
      @include tag(maroon, white);
    }

    [data-tag="operations"] {
      @include tag(orangered, white);
    }

    [data-tag="php"] {
      @include tag(indigo, white);
    }

    [data-tag="platform"] {
      @include tag(cornflowerblue, white);
    }

    [data-tag="web3"] {
      @include tag(darkslategray, white);
    }
  }

  #skills-list {
    border-bottom: solid 0.2rem var(--border-color);
    border-top: solid 0.2rem var(--border-color);
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    list-style: none;
    padding: 2rem 0;

    @media screen and (min-width: $bp-tablet) {
      grid-template-columns: 1fr 1fr;
    }

    @media screen and (min-width: $bp-desktop) {
      grid-template-columns: 1fr 1fr 1fr;
    }

    @media screen and (min-width: $bp-super) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .description {
      font-size: 0.8rem;
    }

    .tags {
      font-size: 0.8rem;
      padding: 0.1rem 0.2rem;
    }
  }
}

#color {
  position: absolute;
  right: 2rem;
  top: 2rem;

  button {
    background: none;
    border: none;
    color: var(--fg-color);
    cursor: pointer;
    display: block;

    svg {
      display: block;
      fill: var(--fg-color);
      height: 100%;
      width: 2rem;
    }
  }
}