@charset "UTF-8";

/* ???? Fondo Completo en Alta Calidad ???? */
body {
  background:black url(https://i.postimg.cc/rKD7dvNj/Imagen-de-Whats-App-2025-03-01-a-las-04-42-59-14e9442f.jpg) no-repeat center top fixed;
  background-size:100% auto;
/* Mantiene la calidad sin distorsio?n */
  image-rendering:crisp-edges;
/* Evita pe?rdida de nitidez */
  image-rendering:-webkit-optimize-contrast;
/* Optimiza en navegadores WebKit */
  background-attachment:fixed;
}

/* ???? Caja del Perfil con Efecto Glow ???? */
.profilebox {
  background:rgba(0,0,0,0.85);
  border:2px solid red;
  padding:20px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 0 20px red;
  transition:.3s;
}

.profilebox:hover {
  box-shadow:0 0 40px crimson;
}

/* ???? Imagen de Perfil con Brillo ???? */
#profilepic img {
  border-radius:50%;
  border:3px solid red;
  box-shadow:0 0 15px red;
  transition:.5s ease-in-out;
}

#profilepic img:hover {
  transform:scale(1.1);
  box-shadow:0 0 30px crimson;
}

/* ???? Efecto Ethereal en Texto ???? */
.ethereal-text {
  font-size:22px;
  color:red;
  text-shadow:0 0 20px crimson;
  animation:floating-text 3s infinite ease-in-out alternate;
}

/* Animacio?n de texto flotante */
@keyframes floating-text {
  0% {
    transform:translateY(0px);
  }

  100% {
    transform:translateY(10px);
  }
}

/* ???? Botones Animados con Sonido ???? */
.my-button {
  background:linear-gradient(45deg,black,red);
  color:white;
  padding:12px 20px;
  border-radius:5px;
  font-size:16px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:2px;
  display:inline-block;
  border:2px solid red;
  transition:.3s ease-in-out;
  box-shadow:0 0 10px red;
}

.my-button:hover {
  background:linear-gradient(45deg,red,black);
  color:white;
  box-shadow:0 0 15px red;
  transform:scale(1.1);
}

/* Agregar sonido a los botones */
.my-button:active {
  animation:button-press .1s ease-in-out;
}

/* Animacio?n del clic */
@keyframes button-press {
  0% {
    transform:scale(1.1);
  }

  100% {
    transform:scale(1);
  }
}

/* ???? Cajas de Informacio?n ???? */
.info-box {
  background:rgba(0,0,0,0.8);
  padding:15px;
  border:1px solid red;
  border-radius:5px;
  margin-top:10px;
  text-align:left;
  box-shadow:0 0 10px red;
}