@import url(reset.css);

/* aplicando a fonte do discord aos elementos com essa classe */
.luckiest {
  font-family: "Luckiest Guy";
  line-height: 100%;
}

.h1-grow {
  font-size: clamp(1.8rem, calc(3vw + 1rem), 5rem);
}

.h2-grow {
  font-size: clamp(1.5rem, calc(1.5vw + 1rem), 5rem);
}

/* aplicando texto cinza nos elementos */
.txt-cinza {
  color: #23272a;
}

/* backgroud bege nas respectivas sections */
.bg-bege {
  background-color: #f6f6f6;
}

/* estilo do header  */
header {
  background-image: url(../images/svg-header-background.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* div do header que agrupa todos os textos */
.header-info {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  padding: 69px 24px;
}

.header-info p {
  font-family: sans-serif;
  font-weight: 400;
}

/* div do header que agrupa as imagens dos botoes */
.header-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

/* estilo das sections (todas possuem o mesmo) */
.section {
  display: flex;
  flex-direction: column;
  padding: 40px 24px;
  font-family: sans-serif;
  gap: 27px;
}

.section h2 {
  font-weight: 900;
}

.section p {
  font-weight: 400;
}

.section-4 {
  display: flex;
  flex-direction: column;
  padding: 40px 24px;
  gap: 27px;
}

/* estilo do footer */
footer {
  background-color: #23272a;
  display: flex;
  justify-content: center;
  padding: 44px 16px;
}

/* inicio do design responsivo para telas maiores */
@media (min-width: 800px) {
  /* todos os títulos luckiest estão centralizados */
  .luckiest {
    text-align: center;
  }

  header {
    background-image: url(../images/svg-header-background.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  .header-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 94px 15rem;
  }

  .header-info p {
    text-align: center;
  }

  .header-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    justify-content: center;
  }

  .img-fluida {
    max-width: 100%;
    height: auto;
    width: 300px;
  }

  .section {
    display: flex;
    flex-direction: row;
    padding: 40px 10rem;
    gap: 16px;
  }

  .section-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .reverse-section {
    flex-direction: row-reverse;
  }

  .section-4 {
    display: flex;
    flex-direction: column;
    padding: 40px 17rem;
    gap: 27px;
  }

  .section-4 p {
    display: flex;
    text-align: center;
  }
}