@import url("https://fonts.googleapis.com/css2?family=Krona+One&family=Roboto:wght@100;300;400;500;700&display=swap");

:root {
  --texto-primario: #fff;
  --texto-secundario: #b429fe;
  --texto-terciario: #f6f6f6;

  --cor-primaria: linear-gradient(317deg, rgba(152, 10, 232, 1) 0%, rgba(173, 60, 233, 1) 60%, rgba(168, 80, 217, 1) 100%);
  --cor-secundaria: linear-gradient(317deg, rgba(178, 40, 255, 1) 0%, rgba(164, 55, 224, 1) 50%);
}

body {
  display: grid;
  background: linear-gradient(310deg, rgba(0, 0, 0, 1) 0%, rgb(30, 30, 30) 90%) no-repeat;
  background-repeat: no-repeat;
  color: var(--texto-primario);
  min-height: 100vh;
}
.container-conteudo {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.menu {
  display: flex;
  padding: 3.5rem 3.5rem 2.75rem 3.5rem;
  gap: 4rem;
  box-sizing: border-box;
}
.menu-link {
  font-family: "roboto", sans-serif;
  font-weight: 500;
  font-size: 1.45rem;
  padding: 0.75rem 0;
  text-decoration: none;
  color: var(--texto-secundario);
  position: relative;

  &:after {
    content: "";
    display: block;
    height: 2px;
    width: 0px;
    background: var(--texto-secundario);
    margin-top: 4px;
    transition: 0.3s;
    position: absolute;
  }
  &:hover::after {
    width: 100%;
  }
}

.main-box {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 2.5rem 3.5rem;
  box-sizing: border-box;
}

.img-box {
  max-width: 400px;
  & img {
    max-width: 100%;
  }
}
.intro-box {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
  max-width: 37rem;
  padding-right: 3rem;
}
.intro-titulo {
  font-family: "Krona one", sans-serif;
  font-size: 2.2rem;
  line-height: 3rem;
  place-self: start;
}
strong {
  color: var(--texto-secundario);
}
.intro-paragrafo {
  font-family: "roboto", sans-serif;
  color: var(--texto-terciario);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2rem;
}

.redes-box {
  display: grid;
  gap: 2rem;
  justify-items: center;
  place-self: start;
}
.redes-titulo {
  font-family: "krona one", sans-serif;
  font-size: 1.35rem;
  color: var(--texto-primario);
}
.redes-link {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  font-family: "roboto", sans-serif;
  font-size: 1.5rem;
  color: var(--texto-terciario);
  text-decoration: none;
  width: 20rem;
  border: 2px solid var(--texto-secundario);
  border-radius: 8px;
  text-align: center;
  padding: 1rem 0;

  &:hover {
    background: var(--cor-primaria);
  }
}

.rodape {
  background: var(--cor-primaria);
  width: 100% !important;
  margin-top: 3rem;
  height: max-content;
  place-self: end;
}
.rodape-paragrafo {
  font-family: "roboto", sans-serif;
  font-weight: 500;
  padding: 1.5rem;
  text-align: center;
}

/* About Page */
.intro-paragrafo-sobre {
  font-family: "roboto", sans-serif;
  color: var(--texto-terciario);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.85rem;
  letter-spacing: 0.06rem;
}

/* Responsive */

@media (max-width: 1000px) {
  .menu {
    justify-content: center;
    padding: 3rem;
  }
  .img-box {
    max-width: 350px;
  }
  .intro-titulo {
    font-size: 1.85rem;
    line-height: 2.8rem;
  }
}

@media (max-width: 850px) {
  .menu-link {
    font-size: 1.5rem;
  }
  .main-box {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: 2rem;
  }
  .img-box {
    max-width: 300px;
  }
  .intro-box {
    padding: 2.2rem 1rem 0 1rem;
    gap: 2rem;
  }
  .redes-box {
    place-self: center;
  }
}

@media (max-width: 530px) {
  .menu {
    padding: 2rem;
    flex-wrap: wrap;
    gap: 2rem;
  }
  .menu-link {
    font-size: 1.2rem;
  }
  .img-box {
    max-width: 250px;
  }
  .intro-box {
    gap: 1.75rem;
    padding: 1.75rem 1rem 0 1rem;
  }
  .intro-titulo {
    font-size: 1.5rem;
    line-height: 2.3rem;
  }
  .intro-paragrafo {
    font-size: 1.35rem;
    line-height: 1.8rem;
  }
  .redes-box {
    gap: 1.75rem;
  }
  .redes-link {
    width: 16rem;
  }

  .intro-paragrafo-sobre {
    font-size: 1.15rem;
    line-height: 1.75rem;
  }
}