diff --git a/css/index.css b/css/index.css
index f4c281d..cd4b66b 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,36 +1,72 @@
-body {
+* {
+  all: unset;
   margin: 0;
   padding: 0;
+  border: 0;
+  box-sizing: border-box;
+}
+
+title, script {
+  display: none;
+}
+
+body {
   font-family: Arial, sans-serif;
-  background: linear-gradient(135deg, #2c2c54, #40407a);
-  color: #ffffff;
+  background: linear-gradient(135deg, #1c1c2b, #30284d);
+  color: #d4d4dc;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
+  margin: 0;
+  font-family: "IosevkaTermSlab NerdFont Mono";
 }
-
-.container {
+body .container {
   text-align: center;
 }
-.container h1 {
-  font-size: 4rem;
+body .container h1 {
+  font-size: 7rem;
   margin: 0;
   padding: 0.5em;
+  transition: text-shadow 0.3s;
 }
-.container nav ul {
+body .container h1:hover {
+  text-shadow: #a498ce 0px 0px 9px;
+}
+body .container nav {
+  display: block;
+  padding: 0.2rem;
+}
+body .container nav ul {
   list-style: none;
   padding: 0;
+  margin: 0;
   display: flex;
   justify-content: center;
-  gap: 1.5rem;
+  gap: 1rem;
+  padding: 0.7rem;
 }
-.container nav ul li a {
+body .container nav ul li a {
   text-decoration: none;
-  color: #ffffff;
-  font-size: 1.2rem;
+  color: #d4d4dc;
+  font-size: 1.5rem;
   transition: color 0.3s;
+  background-color: #2f2f3e;
+  padding: 0.5rem 2rem;
 }
-.container nav ul li a:hover {
-  color: #a29bfe;
+body .container nav ul li a:hover {
+  color: #a498ce;
+  background-color: #3d3d50;
+}
+body footer {
+  width: 100%;
+  text-align: center;
+  padding: 1rem;
+  background-color: rgba(0, 0, 0, 0);
+  color: #d4d4dc;
+  font-size: 1rem;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  text-shadow: 0 0 3px #000;
 }
diff --git a/html/index.html b/html/index.html
index 6e6c099..94d0c4f 100644
--- a/html/index.html
+++ b/html/index.html
@@ -11,12 +11,15 @@
         <h1>candifloss.cc</h1>
         <nav>
             <ul>
-                <li><a href="#about">about</a></li>
-                <li><a href="#coding-projects">coding projects</a></li>
-                <li><a href="#art">art</a></li>
-                <li><a href="#articles">articles</a></li>
+                <li><a href="https://git.candifloss.cc/candifloss" title="Git repos">code</a></li>
+                <li><a href="#art" title="Art works">art</a></li>
+                <li><a href="#articles" title="Wiki and how to-s">articles</a></li>
+                <li><a href="#about" title="About me">about</a></li>
             </ul>
         </nav>
     </div>
+    <footer>
+        <p>&copy; 2024 candifloss.cc. All rights reserved.</p>
+    </footer>    
 </body>
 </html>
diff --git a/scss/index.scss b/scss/index.scss
index c779291..2ef6416 100644
--- a/scss/index.scss
+++ b/scss/index.scss
@@ -1,10 +1,26 @@
-$bg-color: linear-gradient(135deg, #2c2c54, #40407a);
-$text-color: #ffffff;
-$link-hover-color: #a29bfe;
-
-body {
+// Reset all default styles
+* {
+    all: unset;
     margin: 0;
     padding: 0;
+    border: 0;
+    box-sizing: border-box;
+}
+
+// This is sometimes required on some browsers.
+title, script {
+    display: none;
+}
+
+// Colors
+$bg-color: linear-gradient(135deg, #1c1c2b, #30284d);
+$text-color: #d4d4dc;
+$link-bg-color: #2f2f3e;
+$link-hover-color: #a498ce;
+$link-hover-bg-color: #3d3d50;
+$footer-bg-color: rgba(0, 0, 0, 0);
+
+body {
     font-family: Arial, sans-serif;
     background: $bg-color;
     color: $text-color;
@@ -12,37 +28,65 @@ body {
     justify-content: center;
     align-items: center;
     height: 100vh;
-}
+    margin: 0;
+    font-family: "IosevkaTermSlab NerdFont Mono";
 
-.container {
-    text-align: center;
+    .container {
+        text-align: center;
 
-    h1 {
-        font-size: 4rem;
-        margin: 0;
-        padding: 0.5em;
-    }
+        h1 {
+            font-size: 7rem;
+            margin: 0;
+            padding: 0.5em;
+            transition: text-shadow 0.3s;
 
-    nav {
-        ul {
-            list-style: none;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            gap: 1.5rem;
+            &:hover {
+                text-shadow: #a498ce 0px 0px 9px;
+            }
+        }
 
-            li {
-                a {
-                    text-decoration: none;
-                    color: $text-color;
-                    font-size: 1.2rem;
-                    transition: color 0.3s;
+        nav {
+            display: block;
+            padding: 0.2rem;
 
-                    &:hover {
-                        color: $link-hover-color;
+            ul {
+                list-style: none;
+                padding: 0;
+                margin: 0;
+                display: flex;
+                justify-content: center;
+                gap: 1rem;
+                padding: 0.7rem;
+
+                li {
+                    a {
+                        text-decoration: none;
+                        color: $text-color;
+                        font-size: 1.5rem;
+                        transition: color 0.3s;
+                        background-color: $link-bg-color;
+                        padding: 0.5rem 2rem;
+
+                        &:hover {
+                            color: $link-hover-color;
+                            background-color: $link-hover-bg-color;
+                        }
                     }
                 }
             }
         }
     }
+
+    footer {
+        width: 100%;
+        text-align: center;
+        padding: 1rem;
+        background-color: $footer-bg-color;
+        color: $text-color;
+        font-size: 1rem;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        text-shadow: 0 0 3px #000; 
+    }
 }