/* Fondo con gradiente animado y transición */
body.gradient {
background: linear-gradient(-45deg, #ff00cc, #333399, #00ffcc, #ff6600, #ff2079);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
transition: background 5s ease;
color: #fff;
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Encabezado */
header {
text-align: center;
padding: 40px;
}
header h1 {
font-size: 48px;
font-weight: bold;
text-shadow: 0 0 15px #00ffcc;
animation: glow 2s ease-in-out infinite;
}
/* Secciones de contenido */
section {
padding: 50px;
text-align: center;
}
section h2 {
font-size: 36px;
color: #ff2079;
text-shadow: 0 0 10px #ff2079;
animation: glow 2s ease-in-out infinite;
}
section p {
font-size: 20px;
line-height: 1.5;
}
/* Botones Interactivos */
.btn {
display: inline-block;
padding: 15px 30px;
font-size: 20px;
color: #fff;
background: #ff2079;
border: none;
border-radius: 4px;
cursor: pointer;
box-shadow: 0 0 10px #ff2079;
transition: all 0.3s ease;
margin-top: 20px;
}
.btn:hover {
background: #00ffff;
transform: scale(1.05);
}
/* Footer con efectos de transición en la información */
footer {
background: #111;
padding: 40px;
text-align: center;
}
footer h3 {
font-size: 32px;
text-shadow: 0 0 10px #ff6600;
animation: glow 2s ease-in-out infinite;
}
footer a {
color: #ff6600;
text-decoration: none;
transition: color 0.3s ease;
}
footer a:hover {
color: #00ffff;
}
/* Efecto de glow (resplandor) para títulos */
@keyframes glow {
0%, 100% {
text-shadow: 0 0 10px #ff2079, 0 0 20px #ff2079, 0 0 30px #ff2079;
}
50% {
text-shadow: 0 0 20px #ff2079, 0 0 30px #ff2079, 0 0 40px #ff2079;
}
}
