/* ================================
   VARIÁVEIS
================================ */

:root {
  --vermelho: #e30613;
  --vermelho-escuro: #b8000b;

  --preto: #101010;
  --cinza-escuro: #1a1a1a;
  --cinza: #858585;
  --cinza-claro: #eeeeee;

  --branco: #ffffff;
}

/* ================================
   RESET
================================ */

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

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;

  font-family: "Poppins", sans-serif;

  color: var(--branco);

  background: radial-gradient(
    circle at top,
    #292929 0%,
    #151515 35%,
    #080808 100%
  );

  padding: 40px 20px;
}

/* ================================
   CONTAINER
================================ */

.linktree {
  width: 100%;
  max-width: 620px;

  margin: 0 auto;
}

/* ================================
   PERFIL
================================ */

.perfil {
  text-align: center;

  margin-bottom: 35px;
}

.logo-container {
  width: 115px;
  height: 115px;

  margin: 0 auto 20px;

  border-radius: 50%;

  padding: 5px;

  background: linear-gradient(135deg, var(--vermelho), var(--vermelho-escuro));

  box-shadow: 0 10px 30px rgba(227, 6, 19, 0.25);
}

.logo {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  border-radius: 50%;

  background: var(--branco);
}

.perfil h1 {
  font-size: 28px;

  font-weight: 800;

  margin-bottom: 8px;
}

.perfil p {
  max-width: 430px;

  margin: 0 auto;

  font-size: 14px;

  line-height: 1.6;

  color: #bdbdbd;
}

/* ================================
   LINKS
================================ */

.links {
  display: flex;

  flex-direction: column;

  gap: 13px;
}

.link {
  width: 100%;
  min-height: 70px;

  display: grid;

  grid-template-columns: 50px 1fr 30px;

  align-items: center;

  padding: 10px 17px;

  color: var(--branco);

  text-decoration: none;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 16px;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border 0.25s ease,
    box-shadow 0.25s ease;
}

.link:hover {
  transform: translateY(-3px);

  background: rgba(227, 6, 19, 0.13);

  border-color: rgba(227, 6, 19, 0.65);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* ================================
   ÍCONES
================================ */

.icone {
  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 11px;

  font-size: 19px;

  color: var(--branco);

  background: linear-gradient(135deg, var(--vermelho), var(--vermelho-escuro));
}

.texto {
  font-size: 14px;

  font-weight: 600;

  padding: 0 10px;
}

.seta {
  display: flex;

  justify-content: flex-end;

  color: #777;

  font-size: 12px;

  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.link:hover .seta {
  transform: translateX(3px);

  color: var(--vermelho);
}

/* ================================
   REDES SOCIAIS
================================ */

.redes {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  margin-top: 32px;
}

.redes a {
  width: 43px;
  height: 43px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #aaa;

  text-decoration: none;

  font-size: 18px;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition: all 0.25s ease;
}

.redes a:hover {
  color: var(--branco);

  background: var(--vermelho);

  border-color: var(--vermelho);

  transform: translateY(-3px);
}

/* ================================
   RODAPÉ
================================ */

footer {
  margin-top: 35px;

  text-align: center;

  color: #686868;
}

footer p {
  font-size: 12px;

  font-weight: 600;

  margin-bottom: 4px;
}

footer span {
  font-size: 10px;
}

/* ================================
   RESPONSIVO
================================ */

@media (max-width: 600px) {
  body {
    padding: 30px 16px;
  }

  .logo-container {
    width: 100px;
    height: 100px;
  }

  .perfil h1 {
    font-size: 24px;
  }

  .link {
    min-height: 66px;

    grid-template-columns: 46px 1fr 25px;

    padding: 9px 14px;
  }

  .icone {
    width: 39px;
    height: 39px;

    font-size: 17px;
  }

  .texto {
    font-size: 13px;
  }
}