Upload files to "static"

static/styles.css

@@ -24,13 +24,16 @@ header nav a {
     text-decoration: none;
     padding: 8px 15px;
     display: inline-block;
+    transition: background-color 0.3s ease, border-radius 0.3s ease;
 }
 
 header nav a:hover {
     background-color: #555;
     text-decoration: underline;
+    border-radius: 10px; /* Adds rounded corners on hover */
 }
 
+
 /* Dropdown styles */
 .dropdown {
     position: relative;
@@ -137,6 +140,13 @@ pre {
     text-align: center;
 }
 
+/* Hide ASCII art on smaller screens */
+@media (max-width: 768px) {
+    .ascii-art.no-background {
+        display: none;
+    }
+}
+
 .ascii-image {
     display: block;
     margin: 20px auto;
@@ -175,3 +185,50 @@ pre {
     background-color: #003f7f;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
 }
+
+
+/* Burger menu styles */
+.burger {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    cursor: pointer;
+}
+
+.burger div {
+    width: 25px;
+    height: 3px;
+    background-color: white;
+    transition: transform 0.3s ease;
+}
+
+/* Dropdown menu for small screens */
+.nav-links {
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+}
+
+.nav-links.active {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    text-align: center;
+}
+
+@media (max-width: 768px) {
+    .nav-links {
+        display: none;
+        flex-direction: column;
+        gap: 10px;
+        text-align: center;
+    }
+
+    .burger {
+        display: flex;
+    }
+
+    .nav-links.active {
+        display: flex;
+    }
+}