stylesheet.css

sp3ctr4l-h4ck3rs-gu1ld · Sep 24, 2024 · ececed6 · ececed6
1 parent a2ba872
commit ececed6
Showing 1 changed file with 39 additions and 40 deletions.
diff --git 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%;
-}
+    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);
+}