Update style.css

Author: bubu07codes

style.css

@@ -1,78 +1,90 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: 'Courier New', Courier, monospace;
-}
-
+/* General Styles */
 body {
-  background-color: #1a1a1a;
-  color: #33ff33;
+    font-family: Arial, sans-serif;
+    background-color: #1c1c1c;
+    color: #e0e0e0;
+    margin: 0;
+    padding: 0;
 }
 
-.container {
-  width: 80%;
-  margin: 0 auto;
-  padding: 20px;
+h1, h2 {
+    color: #c99cf1;
 }
 
 header {
-  text-align: center;
-  margin-bottom: 40px;
+    text-align: center;
+    padding: 20px;
+    background-color: #2a2a2a;
+    border-bottom: 2px solid #c99cf1;
 }
 
 header h1 {
-  font-size: 2.5em;
-  color: #ffcc00;
+    font-size: 2.5em;
+}
+
+header span {
+    color: #c99cf1;
+}
+
+nav {
+    display: flex;
+    justify-content: center;
+    padding: 10px 0;
+    background-color: #2a2a2a;
 }
 
 nav ul {
-  list-style: none;
-  display: flex;
-  justify-content: center;
-  gap: 15px;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    gap: 20px;
 }
 
-nav ul li a {
-  color: #33ff33;
-  text-decoration: none;
-  padding: 5px 10px;
-  border: 2px solid #33ff33;
-  border-radius: 5px;
+nav a {
+    color: #c99cf1;
+    text-decoration: none;
+    font-weight: bold;
 }
 
-nav ul li a:hover {
-  background-color: #33ff33;
-  color: #1a1a1a;
+nav a:hover {
+    text-decoration: underline;
 }
 
 main {
-  background-color: #262626;
-  padding: 20px;
-  border-radius: 10px;
-  border: 2px solid #33ff33;
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #292929;
+    border-radius: 8px;
 }
 
-.intro, .features, .docs {
-  margin-bottom: 20px;
+section {
+    margin-bottom: 40px;
 }
 
-h2 {
-  color: #ffcc00;
-  margin-bottom: 10px;
+.code-block {
+    background-color: #1e1e1e;
+    padding: 10px;
+    border-radius: 5px;
+    font-family: "Courier New", Courier, monospace;
+    color: #f0f0f0;
 }
 
-ul {
-  list-style-type: '★ ';
-  padding-left: 20px;
+footer {
+    text-align: center;
+    padding: 15px;
+    background-color: #2a2a2a;
+    color: #c99cf1;
 }
 
-.code-block {
-  background-color: #000;
-  color: #33ff33;
-  padding: 10px;
-  border-radius: 5px;
-  border: 2px solid #33ff33;
-  margin: 10px 0;
-  overflow-x: auto;
+/* Retro Elements */
+body::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 5px;
+    background: linear-gradient(to right, #c99cf1, #72388f, #c99cf1);
 }