Update style.css

style.css

@@ -1,26 +1,59 @@
+/* General Body Styles */
 body {
     margin: 0;
     font-family: 'Courier New', Courier, monospace;
     background-color: #0d0d0d;
     color: #00ff9d;
-}
-
+    overflow-x: hidden;
+}
+
+/* Animated Background */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: repeating-linear-gradient(
+        45deg,
+        transparent,
+        transparent 10px,
+        rgba(255, 255, 255, 0.02) 10px,
+        rgba(255, 255, 255, 0.02) 20px
+    );
+    opacity: 0.2;
+    z-index: -1;
+    animation: slide 20s linear infinite;
+}
+
+@keyframes slide {
+    from {
+        background-position: 0 0;
+    }
+    to {
+        background-position: 100% 100%;
+    }
+}
+
+/* Container */
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
 }
 
+/* Header and Navigation */
 header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px 0;
     border-bottom: 2px solid #00ff9d;
-}
-
-.logo {
-    height: 60px;
+    position: sticky;
+    top: 0;
+    background: rgba(13, 13, 13, 0.9);
+    z-index: 100;
 }
 
 nav ul {
@@ -33,99 +66,133 @@ nav ul li a {
     color: #00ff9d;
     text-decoration: none;
     font-weight: bold;
-    transition: color 0.3s ease;
+    transition: color 0.3s ease, text-shadow 0.3s ease;
 }
 
 nav ul li a:hover {
     color: #ff0080;
+    text-shadow: 0 0 8px #ff0080;
 }
 
+/* Hero Section */
 .hero {
     text-align: center;
-    padding: 100px 20px;
+    padding: 150px 20px;
     background: url('assets/bg.png') no-repeat center center/cover;
     color: #ffffff;
+    position: relative;
 }
 
 .hero h1 {
-    font-size: 4rem;
+    font-size: 5rem;
     margin: 0;
+    letter-spacing: 5px;
+    text-transform: uppercase;
+    background: linear-gradient(90deg, #00ff9d, #ff0080);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: flicker 2s infinite alternate;
 }
 
 .hero p {
-    font-size: 1.5rem;
+    font-size: 1.8rem;
     margin: 20px 0;
+    opacity: 0.9;
 }
 
 .cta-button {
     background-color: #00ff9d;
     color: #0d0d0d;
-    padding: 10px 20px;
-    border-radius: 5px;
+    padding: 15px 30px;
+    border-radius: 0;
     text-decoration: none;
     font-weight: bold;
-    transition: background-color 0.3s ease;
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 0 15px rgba(0, 255, 157, 0.6);
 }
 
 .cta-button:hover {
     background-color: #ff0080;
     color: #ffffff;
+    box-shadow: 0 0 20px rgba(255, 0, 128, 0.7);
 }
 
+/* About and Features Section */
 section {
-    padding: 60px 20px;
+    padding: 80px 20px;
 }
 
 .about, .features, .docs, .contact {
     border-bottom: 1px solid #00ff9d;
 }
 
-h2 {
-    font-size: 2.5rem;
-    margin-bottom: 20px;
+.about h2, .features h2, .docs h2, .contact h2 {
+    font-size: 3rem;
+    margin-bottom: 40px;
+    position: relative;
+    z-index: 1;
 }
 
-footer {
-    text-align: center;
-    padding: 20px 0;
-    border-top: 2px solid #00ff9d;
-    margin-top: 40px;
+.about h2::before, .features h2::before, .docs h2::before, .contact h2::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 10px;
+    width: 150px;
+    height: 4px;
+    background: linear-gradient(90deg, #00ff9d, #ff0080);
 }
 
-footer p {
-    margin: 0;
-    color: #00ff9d;
-    font-size: 0.9rem;
+ul {
+    padding-left: 20px;
+    line-height: 1.8;
 }
 
-/* Customize Scrollbars */
-::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
+ul li {
+    margin-bottom: 10px;
 }
 
-::-webkit-scrollbar-track {
-    background: #0d0d0d;
+ul li:before {
+    content: '✔';
+    margin-right: 10px;
+    color: #ff0080;
 }
 
-::-webkit-scrollbar-thumb {
-    background-color: #00ff9d;
-    border-radius: 6px;
-    border: 3px solid #0d0d0d;
+/* Section Dividers */
+.about {
+    background: #111111;
+    clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background-color: #ff0080;
+.features {
+    background: #0d0d0d;
+    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
+}
+
+/* Footer */
+footer {
+    text-align: center;
+    padding: 30px 0;
+    border-top: 2px solid #00ff9d;
+    background: #111111;
+    color: #00ff9d;
+    margin-top: 50px;
+    font-size: 1rem;
 }
 
-/* Firefox */
-* {
-    scrollbar-width: thin;
-    scrollbar-color: #00ff9d #0d0d0d;
+footer p {
+    margin: 0;
+    color: #00ff9d;
+    font-size: 0.9rem;
 }
 
-/* Internet Explorer */
-body {
-    scrollbar-face-color: #00ff9d;
-    scrollbar-track-color: #0d0d0d;
+@keyframes flicker {
+    0% {
+        opacity: 0.9;
+        text-shadow: -2px 2px 10px rgba(255, 0, 128, 0.9), 2px -2px 10px rgba(0, 255, 157, 0.9);
+    }
+    100% {
+        opacity: 1;
+        text-shadow: -2px 2px 20px rgba(255, 0, 128, 1), 2px -2px 20px rgba(0, 255, 157, 1);
+    }
 }