Update styles.css

CeraMapleheart · Sep 8, 2024 · a635d74 · a635d74
1 parent ad389d1
commit a635d74
Showing 1 changed file with 118 additions and 0 deletions.
diff --git a/styles.css b/styles.css
@@ -60,3 +60,121 @@ footer {
 section {
     margin-bottom: 20px;
 }
+/* Basic Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Body styling */
+body {
+    font-family: 'Press Start 2P', cursive; /* Pixelated font for retro terminal effect */
+    background-color: #0d0d0d; /* Dark background for terminal theme */
+    color: #00FF41; /* Neon green text, classic terminal color */
+    line-height: 1.6;
+    padding: 10px;
+}
+
+/* Header */
+header {
+    background: linear-gradient(90deg, #ff0099, #493240);
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+    box-shadow: 0 0 10px #ff0099;
+}
+
+header h1 {
+    font-size: 2em;
+    letter-spacing: 5px;
+    animation: flicker 3s infinite alternate; /* Flickering effect */
+}
+
+/* Navigation */
+nav ul {
+    list-style: none;
+    text-align: center;
+    margin-top: 15px;
+}
+
+nav ul li {
+    display: inline-block;
+    margin: 0 15px;
+}
+
+nav ul li a {
+    color: #ff0099; /* Neon pink links */
+    text-decoration: none;
+    font-size: 1.2em;
+    transition: color 0.3s;
+}
+
+nav ul li a:hover {
+    color: #00FFFF; /* Glows when hovered */
+}
+
+/* Main Content */
+main {
+    padding: 20px;
+    margin: 0 auto;
+    max-width: 900px;
+    border: 2px solid #00FF41; /* Neon green borders */
+    box-shadow: 0 0 20px #00FF41;
+    background-color: rgba(0, 0, 0, 0.8); /* Slight transparency for cyber effect */
+}
+
+/* Section titles */
+section h2 {
+    font-size: 1.8em;
+    margin-bottom: 15px;
+    color: #ff0099;
+    border-bottom: 1px solid #00FF41;
+    padding-bottom: 5px;
+}
+
+/* Section content */
+section p, section ul {
+    margin-bottom: 20px;
+}
+
+/* Footer */
+footer {
+    text-align: center;
+    padding: 20px;
+    background-color: #ff0099;
+    color: #0d0d0d;
+    font-size: 0.9em;
+    box-shadow: 0 0 10px #ff0099;
+}
+
+/* Custom Animations */
+@keyframes flicker {
+    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
+        opacity: 1;
+    }
+    20%, 24%, 55% {
+        opacity: 0.5;
+    }
+}
+
+/* Links */
+a {
+    color: #00FFFF;
+    text-decoration: none;
+}
+
+a:hover {
+    text-shadow: 0 0 10px #00FFFF; /* Glowing effect */
+}
+
+/* Custom terminal look */
+code {
+    font-family: 'Courier New', Courier, monospace;
+    background-color: #0d0d0d;
+    padding: 5px;
+    border: 1px solid #00FF41;
+    color: #00FFFF;
+    display: block;
+    margin-bottom: 10px;
+}