/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fundo */
body {
  background: linear-gradient(135deg, #000000, #000000);
  color: #fff;
  font-family: "Poppins", sans-serif;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

/* Container principal */
.pageMain {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 90dvh;
  width: 100vw;
  align-items: center;
  justify-items: center;
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
  background-image: repeating-linear-gradient(
      135deg,
      transparent,
      transparent 50px,
      rgba(255, 255, 255, 0.025) 51px
    ),
    repeating-linear-gradient(
      225deg,
      transparent,
      transparent 50px,
      rgba(255, 255, 255, 0.045) 51px
    );
  background-blend-mode: overlay;
}

.logo {
  width: clamp(120px, 20vw, 200px);
  max-width: 80vw;
  height: auto;
  display: block;
  margin: 0 auto;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.logo:hover {
  opacity: 0.8;
}

.mainTitle {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 600;
  color: white;
  text-align: center;
  line-height: 1.2;
}

/* Card de redes sociais */
.card {
  position: relative;
  background: #131313;
  padding: 40px 30px;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
  text-align: center;
  width: 100%;
  max-width: 300px;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.card::after,
.card::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(
    from var(--angle),
    rgb(255, 153, 0),
    rgb(0, 153, 255),
    rgb(255, 0, 140),
    rgb(255, 153, 0)
  );
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 2px;
  border-radius: 15px;
  animation: 3s spin linear infinite;
}

.card::before {
  filter: blur(1.5rem);
  opacity: 0.5;
}

/* Links */
.linksContainer {
  list-style: none;
}

.linksContainer li {
  margin: 20px 0;
}

/* Ajustes para o ícone dentro dos links */
.linksContainer a {
  text-decoration: none;
  justify-content: center;
  color: #fff;
  background-color: #222;
  padding: 12px 20px;
  border-radius: 8px;
  display: flex; /* FLEX para alinhar logo e texto */
  align-items: center; /* Alinhar verticalmente */
  gap: 10px; /* Espaço entre ícone e texto */
  width: 100%;
  transition: 0.3s;
  font-weight: bold;
}

/* Estilo dos ícones */
.linksContainer a img.icon {
  width: 24px; /* Ajuste o tamanho do ícone */
  height: 24px;
  object-fit: contain;
  filter: invert();
}

.linksContainer a:hover {
  background-color: #444;
  transform: scale(1.05);
}

.footerContainer img {
  width: 100px; /* Ajuste o tamanho da imagem */
  max-width: 32px;
  opacity: 0.7;
  transition: 0.3s;
}

.footerContainer img:hover {
  opacity: 1;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

/* ----------------- RESPONSIVO ----------------- */

/* Telas pequenas: até 480px */
@media (max-width: 480px) {
  .card {
    max-width: 260px;
    padding: 30px 20px;
  }

  .logo {
    padding: 1rem 0;
  }
}

/* Telas médias: de 481px até 768px */
@media (min-width: 481px) and (max-width: 768px) {
  .card {
    max-width: 280px;
  }

  .logo {
    padding: 1rem 0;
  }
}

/* Telas grandes: 769px para cima */
@media (min-width: 769px) {
  .card {
    max-width: 300px;
  }
}