diff --git a/stylesheet.css b/stylesheet.css index ec4e056..45fa2e1 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -1,22 +1,34 @@ body { font-family: 'Times New Roman', serif; background-color: #1c1c1c; - color: #ffff; + color: #fff; margin: 0; - margin-top: 150px; - margin-bottom: 150px; padding: 0; overflow-x: hidden; + margin-top: 150px; + margin-bottom: 150px; } header { - background-color: #3a3a3a3a; + background-color: rgba(58, 58, 58, 0.8); padding: 5px; text-align: center; position: fixed; width: 100%; top: 0; z-index: 1000; + transition: top 0.3s ease-in-out, background-color 0.3s ease-in-out; +} + +footer { + background-color: rgba(58, 58, 58, 0); + padding: 5px; + text-align: center; + position: fixed; + width: 100%; + bottom: 0; + transition: background-color 0.3s ease-in-out, opacity 0.5s ease-in-out; + opacity: 0; } nav { @@ -39,29 +51,6 @@ nav a:hover { box-shadow: 0 0 10px rgba(214, 92, 140, 0.8); } -section.active { -background-color: #1A0330; /* Cambiar el color de fondo */ -border-color: #1A0330; /* Cambiar el color del borde */ -box-shadow: 0 0 15px rgba(0, 0, 0, 0.8); /* Cambiar la sombra */ -} - - -footer { -background-color: rgba(58, 58, 58, 0); /* Establece una transparencia inicial */ -padding: 5px; -text-align: center; -position: fixed; -width: 100%; -bottom: 0; -transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Añade una transición suave */ -margin-top: 20px; -opacity: 0; /* Inicialmente oculta el footer */ -} - -section.active { -display: block; -} - .neon-text { text-shadow: 0 0 10px #81fcc9, 0 0 200px #53f9ae, 0 0 300px #29e791; } @@ -73,12 +62,9 @@ display: block; .neon-text-mtr { text-shadow: 0 0 10px #5FE9E5, 0 0 20px #5FE9E5, 0 0 30px #5FE9E5; } -.neon-text-auth-ref { - text-shadow: 0 0 10px #5FE9E5, 0 0 20px #5FE9E5, 0 0 30px #5FE9E5; -} .neon-text-derechos-de-autor { - text-shadow: 0 0 15px #5fe9e5, 0 0 10px #5fe9e5, 0 0 15px #5fe9e5; + text-shadow: 0 0 15px #5FE9E5, 0 0 10px #5FE9E5, 0 0 15px #5FE9E5; } .ornamento { @@ -97,12 +83,25 @@ display: block; } .content { -max-width: 800px; -margin: 25px auto 10px; /* Ajusta el margen inferior a 40px (puedes ajustar según tus preferencias) */ -margin-bottom: 40px; -padding: 20px; -background-color: #2b2b2b; -border: 1px solid #3a3a3a; -box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -border-radius: 1%; -} \ No newline at end of file + max-width: 800px; + margin: 25px auto 40px; + padding: 20px; + background-color: #2b2b2b; + border: 1px solid #3a3a3a; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + border-radius: 1%; + opacity: 0; + transform: translateY(50px); + transition: opacity 0.6s ease-out, transform 0.6s ease-out; +} + +.content.show { + opacity: 1; + transform: translateY(0); +} + +section.active { + background-color: #1A0330; + border-color: #1A0330; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.8); +}