@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  --spacing-01: 0.375rem;
  --spacing-02: 0.75rem;
  --spacing-03: 1.125rem;
  --radius-01: 0.375rem;
  --radius-02: 0.75rem;
  --radius-03: 1.125rem;
  --text-01: 0.875rem;
  --text-02: 1rem;
  --text-03: 1.125rem;
  --title-01: 1.5rem;
  --title-02: 1.875rem;
  --title-03: 2.25rem;
  --title-04: 2.625rem;
  --max-width: 64rem;
  --light-01: #ffffff;
  --light-02: #e4e2e9;
  --light-03: #b3afc0;
  --dark-04: #565167;
  --dark-03: #2b2833;
  --dark-02: #1d1b22;
  --dark-01: #0e0d11;
  --cyan: #5cf5f5;
  --green: #66f859;
  --orange: #f8b659;
  --pink: #f859a8;
  --purple: #7359f8;
  --red: #f87359;
  --yellow: #f8f859;
}

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

html {
  scroll-behavior: smooth;
}

.bold {
  font-weight: 800;
}

.italic {
  font-style: italic;
}

.code {
  display: inline-block;
  margin-inline: 0.1rem;
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-01);
  background-color: var(--dark-03);
  color: var(--light-03);
  font-family: "IBM Plex Mono", serif;
  font-weight: 400;
  font-style: normal;
}

.wrapper {
  width: 100%;
  max-width: var(--max-width);
  margin: auto;
  padding: var(--spacing-02);
}

.round-block {
  padding: var(--spacing-03);
  border: solid 2px var(--dark-03);
  border-radius: var(--radius-03);
  background-color: var(--dark-02);
}

.dotted {
  background-image: radial-gradient(var(--dark-01) 10%, transparent 22.8%),
    radial-gradient(var(--dark-01) 10%, transparent 22.8%);
  background-position: 0px 0px, 4px 4px;
  background-size: 8px 8px;
}

body {
  background-color: var(--dark-01);
  color: var(--light-01);
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: 500;
}

p,
ul {
  color: var(--light-02);
  font-size: var(--text-01);
  line-height: var(--spacing-03);
}

a {
  position: relative;
  display: inline-block;
  color: var(--purple);
  text-align: center;
  text-decoration: none;
  font-size: var(--text-01);
  transition: color 0.1s ease-out;
}

a:hover {
  color: var(--pink);
}

a:not(.banner-link, .wendel, .jeni, .kezia):after {
  content: "";
  position: absolute;
  bottom: 0.13rem;
  right: calc(-0.2rem - var(--text-01));
  height: var(--text-01);
  aspect-ratio: 1/1;
  background-image: url(./assets/icons/external-link.svg);
  background-size: contain;
}

ul {
  margin-left: var(--spacing-03);

  & li {
    margin-block: 0.2rem;
  }
}

small {
  color: var(--light-03);
  font-size: 0.75rem;

  & * {
    font-size: inherit;
  }
}

main {
  width: 100%;
}

#banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100vw;
  height: 100%;
  background-image: radial-gradient(var(--dark-02), transparent 80%);
  z-index: -1;
}

#banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-03);
  padding-block: 4rem;

  & div:nth-child(1) {
    position: relative;
    width: 12rem;
    aspect-ratio: 1/1;
    border: solid 2px var(--dark-03);
    border-radius: 50%;
    background-image: url(./assets/img/avatar.jpg);
    background-size: contain;
  }

  & div:nth-child(2) {
    width: 25rem;
    text-align: center;

    & h1 {
      font-size: var(--title-04);
    }

    & h2 {
      font-size: var(--text-02);
      font-weight: 400;
      color: var(--light-03);
    }

    & p {
      margin-block: var(--spacing-01);
    }
  }

  & div:nth-child(3) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-02);

    & a {
      transition: transform 0.1s ease-out;

      & img {
        height: var(--title-01);
      }
    }

    & a:hover {
      transform: scale(105%);
    }
  }

  @media screen and (max-width: 434px) {
    & div:nth-child(2) {
      width: 100%;
      padding-inline: var(--spacing-03);

      & h1 {
        font-size: var(--title-02);
      }
    }
  }
}

#highlights {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-03);

  & div {
    position: relative;
    width: 11.5rem;
    aspect-ratio: 3/3.5;

    & h3 {
      margin-bottom: var(--spacing-01);
      color: var(--light-03);
      text-align: center;
      text-transform: uppercase;
      font-size: var(--text-01);
      font-weight: 400;
    }
  }

  & div::before {
    content: "";
    position: absolute;
    top: calc(-0.3rem - 2px);
    left: 50%;
    width: 4rem;
    height: 0.3rem;
    border-top-left-radius: var(--radius-01);
    border-top-right-radius: var(--radius-01);
    transform: translate(-50%);
  }

  & div:nth-child(1)::before {
    background-color: var(--purple);
  }

  & div:nth-child(2)::before {
    background-color: var(--cyan);
  }

  & div:nth-child(3)::before {
    background-color: var(--orange);
  }

  & div:nth-child(4)::before {
    background-color: var(--pink);
  }

  @media screen and (max-width: 813px) {
    & div {
      width: 16rem;
      aspect-ratio: 3/2;
    }
  }

  @media screen and (max-width: 553px) {
    & div {
      width: calc(50% - 4px - var(--spacing-01));
      aspect-ratio: 3/2.5;
    }
  }

  @media screen and (max-width: 484px) {
    & div {
      width: 100%;
      aspect-ratio: unset;
    }
  }
}

#projects {
  & h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-01);
    width: 100%;
    padding-bottom: var(--spacing-03);
    border-bottom: 2px solid var(--dark-03);
    color: var(--light-03);
    font-size: var(--text-02);
    font-weight: 500;

    & img {
      height: var(--text-02);
    }
  }
}

.project-block {
  position: relative;
  border-bottom: 2px solid var(--dark-03);

  & .project-album {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% + var(--spacing-03) + var(--spacing-03));
    height: 16rem;
    margin-block: var(--spacing-03);
    background-image: radial-gradient(var(--dark-04), transparent 80%);
    transform: translateX(-1.125rem);
    overflow: hidden;

    & img {
      height: 100%;
    }

    & img:nth-child(1) {
      transform: translateX(40%) scale(75%);
      z-index: 0;
    }

    & img:nth-child(2) {
      z-index: 1;
    }

    & img:nth-child(3) {
      transform: translateX(-40%) scale(75%);
      z-index: 0;
    }
  }

  @media screen and (max-width: 952px) {
    & .project-album {
      height: 13rem;
    }
  }

  @media screen and (max-width: 786px) {
    & img:nth-child(1) {
      transform: translateX(50%) scale(75%) !important;
    }

    & img:nth-child(3) {
      transform: translateX(-50%) scale(75%) !important;
    }
  }

  @media screen and (max-width: 714px) {
    & .project-album {
      height: 10rem;
    }
  }

  @media screen and (max-width: 564px) {
    & img:nth-child(1) {
      transform: translateX(55%) scale(75%) !important;
    }

    & img:nth-child(3) {
      transform: translateX(-55%) scale(75%) !important;
    }
  }

  @media screen and (max-width: 530px) {
    & .project-album {
      height: 8rem;
    }
  }

  @media screen and (max-width: 435px) {
    & .project-album {
      height: 7rem;
    }
  }

  @media screen and (max-width: 386px) {
    .project-album {
      background-image: radial-gradient(var(--dark-03), transparent 80%);
    }

    & img:nth-child(1) {
      opacity: 0;
    }

    & img:nth-child(3) {
      opacity: 0;
    }
  }

  & h3 {
    margin-top: var(--spacing-01);
    font-size: var(--title-02);
    font-weight: 800;
  }

  & h4 {
    margin-bottom: var(--spacing-01);
    color: var(--light-03);
    font-size: var(--text-02);
    font-weight: 500;
  }

  & h5 {
    margin-top: var(--spacing-03);
    font-size: var(--title-01);
  }

  & a {
    margin-top: var(--spacing-03);
  }

  & h6 {
    margin-top: var(--spacing-03);
    color: var(--light-03);
    font-size: var(--text-01);
    font-weight: 500;
    text-transform: uppercase;
  }

  & .contributors-block {
    display: flex;
    align-items: center;
    gap: var(--spacing-01);

    & a {
      display: block;
      width: var(--title-04);
      aspect-ratio: 1/1;
      border: solid 2px var(--dark-03);
      border-radius: 50%;
      background-size: contain;
    }

    & .wendel {
      background-image: url(./assets/img/avatar.jpg);
    }

    & .jeni {
      background-image: url(./assets/img/avatar-jeni.jpg);
    }

    & .kezia {
      background-image: url(./assets/img/avatar-kezia.jpg);
    }
  }

  & .contributors-block:last-child {
    padding-bottom: unset;
  }
}

.project-block:last-child {
  border-bottom: unset;
}

.in-development::after {
  content: "Em Desenvolvimento";
  position: absolute;
  top: var(--spacing-03);
  right: 0;
  padding: 0.1rem var(--spacing-01);
  border-radius: var(--radius-01);
  background-color: var(--yellow);
  color: var(--dark-02);
  font-size: 0.75rem;
  font-weight: 600;
}

.in-production::after {
  content: "Finalizado";
  position: absolute;
  top: var(--spacing-03);
  right: 0;
  padding: 0.1rem var(--spacing-01);
  border-radius: var(--radius-01);
  background-color: var(--green);
  color: var(--dark-02);
  font-size: 0.75rem;
  font-weight: 600;
}

@media screen and (max-width: 386px) {
  .in-development::after,
  .in-production::after {
    top: 0;
  }
}

#knowledge {
  margin-top: var(--spacing-03);

  & h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-01);
    width: 100%;
    padding-bottom: var(--spacing-03);
    color: var(--light-03);
    font-size: var(--text-02);
    font-weight: 500;

    & img {
      height: var(--text-02);
    }
  }

  p {
    margin-bottom: var(--spacing-02);
  }
}

#other-knowledge {
  margin-top: var(--spacing-03);

  & h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-01);
    width: 100%;
    padding-bottom: var(--spacing-03);
    color: var(--light-03);
    font-size: var(--text-02);
    font-weight: 500;

    & img {
      height: var(--text-02);
    }
  }

  & div:not(.mini-round-block) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-03);

    & .mini-round-block {
      display: flex;
      align-items: center;
      gap: var(--spacing-03);
      width: calc(50% - 0.6rem);
      padding: var(--spacing-03);
      border-radius: var(--radius-02);
      background-color: var(--dark-03);

      & img {
        height: var(--title-01);
      }

      & p {
        color: var(--light-02);
        font-size: var(--text-03);
        line-height: var(--text-03) + var(--text-02);
      }
    }
  }

  @media screen and (max-width: 687px) {
    & .mini-round-block {
      height: 7rem !important;
    }
  }

  @media screen and (max-width: 571px) {
    & .mini-round-block {
      width: 100% !important;
    }
  }
}

#contact {
  margin-top: var(--spacing-03);

  & h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-01);
    width: 100%;
    padding-bottom: var(--spacing-03);
    color: var(--light-03);
    font-size: var(--text-02);
    font-weight: 500;

    & img {
      height: var(--text-02);
    }
  }

  p {
    margin-bottom: var(--spacing-02);
  }
}

footer {
  margin-top: var(--spacing-03);
  padding-block: 3rem;
  border-top: solid 2px var(--dark-03);
  background-color: var(--dark-02);

  & .wrapper > div {
    display: flex;
    align-items: center;
    gap: var(--spacing-01);
    margin-bottom: var(--spacing-01);

    & img {
      height: var(--text-03);
    }

    & h2 {
      color: var(--dark-04);
      font-size: var(--text-02);
    }
  }
}