:root {
  --main-color: #c77dff;
}

html, body {
  margin: 0;
  background: #000;
  height: 100vh;
  overflow: hidden;
  font-family: Arial;
  color: white;
}

/* FUNDO */
#bg-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(0.4);
  transform: scale(1.2);
  transition: all 1s ease;
  z-index: -2;
}

/* PARTICLES */
#particles {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* CARD */
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 340px;
  padding: 30px;

  backdrop-filter: blur(30px);
  background: rgba(0,0,0,0.5);

  border-radius: 25px;
  text-align: center;

  box-shadow:
    0 0 20px var(--main-color),
    0 0 40px var(--main-color),
    0 0 80px var(--main-color);

  transition: transform 0.15s ease;
}

/* CAPA */
#cover {
  width: 100%;
  border-radius: 15px;
  margin-bottom: 12px;
  display: none;

  box-shadow:
    0 0 20px var(--main-color),
    0 0 40px var(--main-color),
    0 0 60px var(--main-color);

  animation: glow 1.5s infinite alternate;
}

/* AVATAR LED */
#avatar {
  width: 110px;
  border-radius: 50%;

  box-shadow:
    0 0 10px var(--main-color),
    0 0 25px var(--main-color),
    0 0 50px var(--main-color);

  animation: pulse 2s infinite;
}

/* NOME */
#username {
  text-shadow:
    0 0 5px var(--main-color),
    0 0 15px var(--main-color),
    0 0 30px var(--main-color);
}

/* ATIVIDADE */
#activity {
  text-shadow: 0 0 10px var(--main-color);
}

/* SOCIAL LED */
.socials a {
  margin: 12px;
  font-size: 28px;
  color: white;

  text-shadow:
    0 0 5px var(--main-color),
    0 0 15px var(--main-color);

  transition: 0.3s;
}

.socials a:hover {
  color: var(--main-color);

  text-shadow:
    0 0 10px var(--main-color),
    0 0 30px var(--main-color),
    0 0 60px var(--main-color);

  transform: scale(1.3);
}

/* ANIMAÇÕES */

@keyframes glow {
  from {
    box-shadow: 0 0 20px var(--main-color);
  }
  to {
    box-shadow:
      0 0 40px var(--main-color),
      0 0 80px var(--main-color);
  }
}

@keyframes pulse {
  0% {
    box-shadow:
      0 0 10px var(--main-color),
      0 0 20px var(--main-color);
  }
  50% {
    box-shadow:
      0 0 30px var(--main-color),
      0 0 60px var(--main-color);
  }
  100% {
    box-shadow:
      0 0 10px var(--main-color),
      0 0 20px var(--main-color);
  }
}