@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    font-family: 'Press Start 2P';
    background-color: #0b0014;
    color: #00ffcc;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}
header{
 background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet, red);
  background-size: 600% 100%;
  color: white;
  text-align: center;
  padding: 1.5rem 0;
  text-shadow: 2px 2px #000;
  animation: arcoiris 15s linear infinite;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin: 0 1.5rem;
}

nav a {
    color: #00ffff;
    text-decoration: none;
    transition: color 0.5s ease;
}

nav a:hover, .activo {
    color: #ff00ff;
}


main {
    background: rgba(20, 0, 40, 0.9);
    max-width: 900px;
    margin: 2rem auto;
|    padding: 2rem;
    border: 2px solid #00ffcc;
    border-radius: 12px;
    box-shadow: 0 0 15px #ff00ff;
}

.imagen-contenedor {
    text-align: center;
    margin: 2rem 0;
}

.imagen-contenedor img {
    width: 50%;
    border: 4px solid #00ffff;
    border-radius: 30px;
    box-shadow: 0 0 20px #ff00ff;
    transition: transform 0.3s ease-in-out;
}

.imagen-contenedor img:hover {
    transform: scale(1.05);
}

.pie-imagen {
    font-size: 0.8em;
    color: #ff66cc;
    margin-top: 0.5rem;
}

aside {
    background: rgba(255, 0, 255, 0.1);
    border-left: 4px solid #ff00ff;
    padding: 1rem;
    margin-top: 1.5rem;
}

blockquote {
    color: #00ffff;
    font-style: italic;
}

@keyframes arcoiris{
	0% 	 {background-position: 0% 50%;}
	100% {background-position: 100% 50%}
}

footer {
    background: #111;
    color: #00ffff;
    text-align: center;
    padding: 1rem;
    border-top: 2px solid #ff00ff;
}