diff --git a/css/index.css b/css/index.css
index 3038059..d98950d 100644
--- a/css/index.css
+++ b/css/index.css
@@ -12,26 +12,33 @@ head, script {
 
 body {
   font-family: Arial, sans-serif;
-  background: linear-gradient(135deg, #1c1c2b, #30284d);
-  color: #d4d4dc;
+  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+  color: #e0e0e0;
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  min-height: 100vh;
   margin: 0;
   font-family: "IosevkaTermSlab Nerd Font Mono";
+  padding: 20px;
+  box-sizing: border-box;
 }
 body .container {
   text-align: center;
+  width: 100%;
+  max-width: 1200px;
+  padding: 20px;
 }
 body .container h1 {
   font-size: 7rem;
   margin: 0;
-  padding: 0.5em;
+  padding: 0.5em 0;
   transition: text-shadow 0.3s;
+  word-break: break-word;
+  line-height: 1.1;
 }
 body .container h1:hover {
-  text-shadow: #a498ce 0px 0px 9px;
+  text-shadow: #6fa8a8 0px 0px 9px;
 }
 body .container nav {
   display: block;
@@ -43,30 +50,80 @@ body .container nav ul {
   margin: 0;
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
   gap: 1rem;
   padding: 0.7rem;
 }
 body .container nav ul li a {
   text-decoration: none;
-  color: #d4d4dc;
+  color: #e0e0e0;
   font-size: 1.5rem;
-  transition: color 0.3s;
-  background-color: #2f2f3e;
+  transition: color 0.3s, background-color 0.3s;
+  background-color: #2d2d2d;
   padding: 0.5rem 2rem;
+  display: inline-block;
+  min-width: 120px;
+  text-align: center;
 }
 body .container nav ul li a:hover {
-  color: #a498ce;
-  background-color: #3d3d50;
+  color: #6fa8a8;
+  background-color: #3a3a3a;
 }
 body footer {
   width: 100%;
   text-align: center;
   padding: 1rem;
   background-color: rgba(0, 0, 0, 0);
-  color: #d4d4dc;
+  color: #e0e0e0;
   font-size: 1rem;
   position: fixed;
   bottom: 0;
   left: 0;
   text-shadow: 0 0 3px #000;
 }
+
+@media (max-width: 768px) {
+  body {
+    padding: 100px 10px 10px 10px;
+    align-items: flex-start;
+    padding-bottom: 60px;
+  }
+  body .container {
+    padding: 10px;
+  }
+  body .container h1 {
+    font-size: 3.5rem;
+    padding: 0.2em 0;
+  }
+  body .container nav {
+    padding-top: 20px;
+  }
+  body .container nav ul {
+    gap: 0.5rem;
+  }
+  body .container nav ul li {
+    width: 100%;
+    max-width: 200px;
+  }
+  body .container nav ul li a {
+    font-size: 1.2rem;
+    padding: 0.5rem 1rem;
+    width: 100%;
+  }
+}
+@media (max-width: 480px) {
+  body .container h1 {
+    font-size: 2.5rem;
+  }
+  body .container nav ul {
+    flex-direction: column;
+    align-items: center;
+  }
+  body .container nav ul li {
+    width: 100%;
+    max-width: none;
+  }
+  body .container nav ul li a {
+    font-size: 1.1rem;
+  }
+}
diff --git a/scss/index.scss b/scss/index.scss
index a294e57..fc8cd7b 100644
--- a/scss/index.scss
+++ b/scss/index.scss
@@ -13,11 +13,11 @@ head, script {
 }
 
 // Colors
-$bg-color: linear-gradient(135deg, #1c1c2b, #30284d);
-$text-color: #d4d4dc;
-$link-bg-color: #2f2f3e;
-$link-hover-color: #a498ce;
-$link-hover-bg-color: #3d3d50;
+$bg-color: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+$text-color: #e0e0e0;
+$link-bg-color: #2d2d2d;
+$link-hover-color: #6fa8a8;
+$link-hover-bg-color: #3a3a3a;
 $footer-bg-color: rgba(0, 0, 0, 0);
 
 body {
@@ -27,21 +27,28 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    min-height: 100vh;
     margin: 0;
     font-family: "IosevkaTermSlab Nerd Font Mono";
+    padding: 20px;
+    box-sizing: border-box;
 
     .container {
         text-align: center;
+        width: 100%;
+        max-width: 1200px;
+        padding: 20px;
 
         h1 {
             font-size: 7rem;
             margin: 0;
-            padding: 0.5em;
+            padding: 0.5em 0;
             transition: text-shadow 0.3s;
+            word-break: break-word;
+            line-height: 1.1;
 
             &:hover {
-                text-shadow: #a498ce 0px 0px 9px;
+                text-shadow: #6fa8a8 0px 0px 9px;
             }
         }
 
@@ -55,6 +62,7 @@ body {
                 margin: 0;
                 display: flex;
                 justify-content: center;
+                flex-wrap: wrap;
                 gap: 1rem;
                 padding: 0.7rem;
 
@@ -63,9 +71,12 @@ body {
                         text-decoration: none;
                         color: $text-color;
                         font-size: 1.5rem;
-                        transition: color 0.3s;
+                        transition: color 0.3s, background-color 0.3s;
                         background-color: $link-bg-color;
                         padding: 0.5rem 2rem;
+                        display: inline-block;
+                        min-width: 120px;
+                        text-align: center;
 
                         &:hover {
                             color: $link-hover-color;
@@ -87,6 +98,70 @@ body {
         position: fixed;
         bottom: 0;
         left: 0;
-        text-shadow: 0 0 3px #000; 
+        text-shadow: 0 0 3px #000;
     }
 }
+
+// Mobile styles
+@media (max-width: 768px) {
+    body {
+        padding: 100px 10px 10px 10px;
+        align-items: flex-start;
+        padding-bottom: 60px; // Make space for fixed footer
+
+        .container {
+            padding: 10px;
+
+            h1 {
+                font-size: 3.5rem;
+                padding: 0.2em 0;
+            }
+
+            nav {
+                padding-top: 20px;
+                
+                ul {
+                    gap: 0.5rem;
+                    
+                    li {
+                        width: 100%;
+                        max-width: 200px;
+                        
+                        a {
+                            font-size: 1.2rem;
+                            padding: 0.5rem 1rem;
+                            width: 100%;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Small mobile devices
+@media (max-width: 480px) {
+    body {
+        .container {
+            h1 {
+                font-size: 2.5rem;
+            }
+
+            nav {
+                ul {
+                    flex-direction: column;
+                    align-items: center;
+                    
+                    li {
+                        width: 100%;
+                        max-width: none;
+                        
+                        a {
+                            font-size: 1.1rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file