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

:root {
  --color-text: #cdd6f4;
  --color-subtext-1: #bac2de;
  --color-subtext-0: #a6adc8;
  --color-overlay-2: #9399b2;
  --color-overlay-1: #7f849c;
  --color-overlay-0: #6c7086;
  --color-surface-2: #585b70;
  --color-surface-1: #45475a;
  --color-surface-0: #313244;
  --color-base: #1e1e2e;
  --color-mantle: #181825;
  --color-crust: #11111b;

  --color-lavender: #b4befe;
  --color-mauve: #cba6f7;
  --color-yellow: #f9e2af;

  font-family: Inter, sans-serif;
}

html {
  color: var(--color-text);
  background: var(--color-surface-2);

  &:before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: '';
    /* https://codepen.io/tomhermans/pen/wBvwomx */
    background: radial-gradient(circle at 50% 30%, var(--color-yellow), 18%, var(--color-mauve), var(--color-lavender), 20%, var(--color-base), var(--color-crust));
    background-size: cover;
    filter: url(#dither);
    transform: scale(1.3);
  }
}

#container {
  margin: 6rem auto;
  padding: 0 1rem;
  max-width: 500px;
  position: relative;
  z-index: 1;

  header {
    color: var(--color-subtext-0);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  footer {
    margin-top: 5rem;
    text-align: center;

    a {
      color: var(--color-text);
    }
  }

  .headline {
    background: radial-gradient(circle at center, var(--color-surface-0), 90%, transparent);
    padding: 0.6rem 1.5rem 1.2rem;
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;

    h1 {
      font-size: 3rem;
      font-weight: 200;
    }
    h2 {
      font-size: 1.4rem;
      color: var(--color-text);
      font-weight: 300;
    }

    small {
      color: var(--color-lavender);
      text-transform: uppercase;
      font-size: 2.3rem;
      font-weight: 500;
    }
  }
}

#pfp {
  margin: 0 auto;
  position: relative;
  width: 250px;
  height: 250px;

  img {
    border-radius: 10%;
    width: 250px;
  }

  img.animated {
    position: absolute;
    left: 0;
    opacity: 0;
    cursor: not-allowed;

    &:hover, &:active {
      opacity: 1;
    }
  }
}

main {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;

  .icons-only {
    justify-content: center;
    display: flex;
    flex-direction: row;
    gap: 2rem;

    a {
      transition: transform 100ms ease-out;

      &:hover, &:focus, &:active {
        transform: scale(1.2);
      }

      img {
        height: 3rem;
      }
    }
  }

  .links {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    a {
      border-radius: 0 0.5rem 0.5rem 0;
      background: var(--color-text);
      display: block;
      text-decoration: none;
      position: relative;
      height: 5rem;
      line-height: 5rem;
      transition: background 100ms ease-out;

      &:before {
        content: '';
        background: var(--color-surface-0);
        position: absolute;
        top: 0.3rem;
        right: -0.3rem;
        bottom: -0.3rem;
        left: 0.3rem;
        z-index: -1;
        border-radius: 0 0.5rem 0.5rem 0;
        border: 2px solid var(--color-surface-1);
      }

      &:hover, &:focus {
        background: var(--color-yellow);
      }

      &:active {
        background: var(--color-subtext-1);
      }

      img {
        position: absolute;
        height: 5rem;
        background: var(--color-surface-0);
      }

      span {
        color: var(--color-base);
        font-weight: 300;
        font-size: 1.5rem;
        text-align: center;
        display: block;
        width: 100%;
      }
    }
  }
}