:root {
  --text-color-light: #ddd;
  --text-color-dark: #141414;
  --background-light: #141414;
  --background-dark: #ddd;
  --accent: #fa1919;
  --primary-font: normal 500 clamp(1.25rem, 2vw, 2rem) "Oswald", sans-serif;
  --secondary-font: normal 500 clamp(1.5rem, 4vw, 3rem) "Outfit", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.bold {
  font-weight: 900;
}

html {
  font-optical-sizing: auto;
  scrollbar-width: none;
  line-height: 1.5;
}

section {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
}

body {
  background: var(--background-light);
  color: var(--text-color-light);
  font: var(--primary-font);
}

canvas#background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
}

h1,
h2 {
  font: var(--secondary-font);
}

h1 {
  font-size: clamp(3rem, 8vw, 6rem);
}

hr {
  display: none;
}

.scale-up {
  opacity: 0;
  scale: 0.8;
}

div#scroll-wrapper,
div#scroll-content {
  background: transparent;
}

/* each view should only be of a whole section */
section.project {
  flex: 1 1 auto;
  align-content: center;
  justify-content: space-between;
  padding: 1% 2.5%;
  gap: 2.5%;

  div.title {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    h1.highlight-text {
      cursor: pointer;
    }

    button.github {
      background-color: #eee;
      color: var(--text-color-dark);
      margin: auto 0;
      height: clamp(2.5rem, 12vw, 6rem);
      border-radius: clamp(2.5rem, 12vw, 6rem);
      padding: 1%;
      gap: 1em;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      border: solid black 0.4em;
      outline: none;
      cursor: pointer;
      transition: all 0.25s ease;
      box-shadow: 0 0 10px white;

      span {
        text-wrap: nowrap;
        font: normal 600 clamp(0.9rem, 1.25vw, 2rem) "Oswald", sans-serif;
      }

      svg {
        height: 100%;
      }
    }

    button.github:hover {
      border-color: var(--accent);
      box-shadow: none;
    }
  }

  div.demo {
    margin: 2%;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;

    img {
      max-height: 100%;
      max-width: 100%;
      flex: 1 1 auto;
      object-fit: contain;
    }
  }

  div.description {
    margin-bottom: 2.5%;
    text-align: center;
  }
}

section.hero {
  padding-top: 5%;
  justify-content: space-between;
  text-align: center;

  div.scale-up {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    h1 {
      cursor: pointer;
    }
  }

  .info {
    margin: 5% 0;
    height: 30%;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: center;
    justify-content: space-around;

    .avatar-container {
      height: 100%;
      aspect-ratio: 1/1;
      display: flex;
      align-items: center;
      justify-content: center;

      .avatar {
        /* filter: grayscale(1); */
        box-shadow: 0 0 50px black;
        max-width: 40vw;
        width: 100%;
        aspect-ratio: 1/1;
        border-radius: 50%;
        transition: all 0.3s ease;
      }

      .avatar:hover {
        border-radius: 50px;
        scale: 97.5%;
      }
    }

    .info-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .server-text {
    font: normal 300 clamp(0.8rem, 1.1vw, 1.5rem) "Outfit", sans-serif;
    color: #696969;
    margin: 0 5% 2% 5%;
    opacity: 0;

    span {
      color: #ddd;
      font-weight: 500;
      cursor: pointer;
    }
  }
}

section.about {
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 2.5%;

  div.about-text {
    line-height: 2;
  }

  div.socials {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: fit-content;
    width: 100%;

    ul {
      height: fit-content;
      list-style: none;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      margin: 2.5%;

      li {
        cursor: pointer;
        height: fit-content;
        width: fit-content;
        transition: all 0.5s ease;

        svg {
          height: clamp(2.5rem, 5vw, 7.5rem);
          fill: white;
        }
      }

      li:hover {
        scale: 105%;
      }
    }
  }
}


.highlight-text {
  text-wrap: nowrap;
  position: relative;
  width: fit-content;
}

.highlight-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  /* distance under text */
  width: 0;
  /* start hidden */
  height: 10px;
  background: rgb(250, 25, 25);
  /* underline color */
  transition: width 0.5s ease;
}

.underline::after {
  width: 100%;
}

.highlight-text:hover::after {
  width: 0;
}

@media (max-width: 576px) {

  .highlight-text:after {
    height: 6px !important;
  }

  section {
    justify-content: space-evenly !important;
  }

  div.info {
    flex-direction: column !important;
  }

  div.server-text {
    margin: 10% !important;
  }

  div.demo {
    height: fit-content !important;
  }

  hr {
    display: block !important;
  }
}