Update style.css

compatibility

Author: quasi-0

style.css

@@ -30,6 +30,8 @@ header {
     padding: 2.5rem 3rem;
     text-align: center;
     max-width: 420px;
+    width: 90%;
+    box-sizing: border-box;
 }
 
 h1 {
@@ -41,10 +43,9 @@ h1 {
     display: inline-block;
     background: #ffb300;
     color: #000;
-    border-radius: 6px;
-    padding: 0.2em 0.7em;
-    font-size: 0.95em;
-    margin-bottom: 1em;
+    padding: 5px 10px;
+    margin: 1rem;
+    border-radius: 8px;
     font-weight: bold;
     letter-spacing: 1px;
 }
@@ -76,13 +77,6 @@ h1 {
     margin-top: 1.5em;
 }
 
-.footer {
-    text-align: center;
-    font-size: 0.9em;
-    color: #777;
-    margin: 3rem 0;
-}
-
 .nav {
     display: flex;
     background: #2a2a2a;
@@ -146,3 +140,50 @@ h1 {
     font-size: 0.85em;
     margin-top: 4px;
 }
+
+/* ========== FOOTER ========== */
+.footer {
+    text-align: center;
+    font-size: 0.9em;
+    color: #777;
+    margin: 3rem 0;
+}
+
+/* ========== RESPONSIVE ========== */
+@media (max-width: 768px) {
+    body {
+        justify-content: flex-start;
+        padding: 1rem;
+    }
+
+    header {
+        font-size: 20px;
+        padding: 10px;
+    }
+
+    .container {
+        padding: 2rem;
+    }
+
+    .nav {
+        flex-direction: column;
+    }
+
+    .nav button {
+        width: 100%;
+    }
+}
+
+@media (max-width: 480px) {
+    h1 {
+        font-size: 1.5rem;
+    }
+
+    .amazing {
+        font-size: 1rem;
+    }
+
+    .card a {
+        font-size: 1em;
+    }
+}