Update style.css

Author: bernardoyt1093-wq

style.css

@@ -5,72 +5,82 @@
     --nav-bg: #9D86CD;
     --card-bg: #8c98e3;
     --accent: #98BFFF;
-    --secondary: #909ce8;
     --text-color: #ffffff;
     --text-dark: #282828;
-    --transition: 0.5s ease;
 }
 
 [data-theme="light"] {
     --bg-color: #f0f0f0;
     --nav-bg: #909ce8;
     --card-bg: #ffffff;
     --text-color: #282828;
-    --text-dark: #282828;
 }
 
 * {
-    margin: 0; padding: 0; box-sizing: border-box;
-    font-family: 'Alfa Slab One', serif;
-    transition: background var(--transition), color var(--transition);
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Alfa Slab One', cursive;
 }
 
-body { 
-    background-color: var(--bg-color); 
-    color: var(--text-color); 
-    overflow-x: hidden; 
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    transition: background 0.4s, color 0.4s;
 }
 
 .navbar {
     background-color: var(--nav-bg);
-    padding: 1rem 5%; display: flex; justify-content: space-between; align-items: center;
-    position: sticky; top: 0; z-index: 1000;
+    padding: 15px 5%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.navbar ul { display: flex; list-style: none; gap: 15px; align-items: center; }
-
-.navbar a { text-decoration: none; color: var(--text-dark); font-size: 0.8rem; }
-
-.theme-switch {
-    background: var(--text-dark); color: white; border: 2px solid var(--accent);
-    padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 0.7rem;
-    font-family: 'Alfa Slab One', serif;
+.navbar ul {
+    display: flex;
+    list-style: none;
+    gap: 15px;
 }
 
-.hero { text-align: center; padding: 80px 20px; background: linear-gradient(180deg, var(--nav-bg), transparent); }
-
-.hero h1 { font-size: 2.5rem; color: var(--text-dark); margin-bottom: 10px; }
-
-.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
+.navbar a {
+    text-decoration: none;
+    color: var(--text-dark);
+    font-size: 12px;
+}
 
-.card {
-    background-color: var(--card-bg); color: var(--text-dark);
-    padding: 30px; border-radius: 20px; border: 4px solid var(--accent);
-    margin-bottom: 20px;
+.theme-switch {
+    background: var(--text-dark);
+    color: white;
+    border: 2px solid var(--accent);
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-family: 'Alfa Slab One', cursive;
 }
 
-.btn-primary, .btn-lesson {
-    background-color: var(--bg-color); color: var(--accent);
-    padding: 12px 20px; border-radius: 10px; border: none; cursor: pointer;
-    text-decoration: none; display: inline-block; margin-top: 10px;
+.container {
+    max-width: 1000px;
+    margin: 20px auto;
+    padding: 20px;
 }
 
-#codigo-editor { 
-    width: 100%; height: 150px; background: #1a1a1a; color: #4ade80; 
-    padding: 15px; font-family: monospace; border-radius: 10px; margin-top: 15px; font-size: 1rem;
+.card {
+    background-color: var(--card-bg);
+    color: var(--text-dark);
+    padding: 25px;
+    border-radius: 15px;
+    border: 4px solid var(--accent);
 }
 
-#console-output { 
-    background: #000; padding: 15px; border-radius: 10px; margin-top: 10px; 
-    font-family: monospace; color: #fff; min-height: 50px;
+.btn-primary {
+    background: var(--bg-color);
+    color: var(--accent);
+    padding: 10px 20px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    margin-top: 10px;
+    display: inline-block;
+    text-decoration: none;
 }