diff --git a/style/index.css b/style/index.css
index a67b5c8d1..cb2bbbcba 100644
--- a/style/index.css
+++ b/style/index.css
@@ -3,18 +3,23 @@
 * {
     font-family: 'Pangolin', cursive;
 }
-
+body {
+    max-width: 975px;
+    margin: 0 auto;
+    background-color: #d6d4e0;
+}
 /* Nav Stuff */
 nav {
       display: flex;
       flex-direction: column;
-      background-color: grey;
+      background-color: #d6d4e0;
       height: 120px;
   }
 nav h1 {
     text-transform: uppercase;
     padding: 20px;
     font-size: 30px;
+    animation: title 5s infinite;
 }
 nav .links {
     margin-left: 40px;
@@ -23,21 +28,27 @@ nav .links {
 nav .links a {
     padding: 10px 50px;
     border: 2px solid black;
-    background-color: tomato;
+    background-color: #622569;
     text-decoration: none;
     color: white;
+    transition: ease-in .1s;
+}
+nav .links a:hover {
+    color: black;
+    background-color: white;
 }
-
   /* Header Section */
 header {
      display: flex;
      flex-direction: row;
-     background-color: teal;
+     background-color: #5b9aa0;
+     border-top-left-radius: 10px;
+     border-top-right-radius: 10px;
  }
 
  header img {
      width: 50%;
-     margin: 10px;
+     margin: 20px;
      border-radius: 10px;
  }
 
@@ -48,26 +59,35 @@ header {
      flex-direction: column;
      justify-content: space-evenly;
  }
+
  header .about-me h2 {
      font-size: 25px;
  }
  header .about-me p {
      line-height: 1.7em;
  }
+
  header .about-me button {
     padding: 10px;
     border: 2px solid black;
-    background-color: tomato;
+    background-color: #622569;
     color: white;
     font-size: 16px;
      width: 200px;
+     transition: ease-in .1s;
  }
+ header .about-me button:hover {
+    color: black;
+    background-color: white;
+}
  /* image section */
  .gallery-projects {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
-     background-color: teal;
+     background-color: #5b9aa0;
+     border-bottom-left-radius: 10px;
+     border-bottom-right-radius: 10px;
  }
 
  .gallery-projects div {
@@ -75,12 +95,19 @@ header {
      margin: 10px 10px;
  }
  .gallery-projects div p {
-    padding-top: 20px;
+     transition: ease-in .1s;
+     padding-top: 20px;
  }
  .gallery-projects div img {
      border-radius: 10px;
+     transition: ease-in .1s;
+ }
+ .gallery-projects div img:hover {
+    transform: scale(1.05);
+ }
+ .gallery-projects div:hover p {
+    color: white;
  }
-
  .desc {
      text-align: center;
  }
@@ -89,7 +116,7 @@ header {
 footer {
      display: flex;
      flex-direction: column;
-     background-color:grey;
+     background-color:#d6d4e0;
      align-items: center;
      /* height: 150px; */
  }
@@ -100,11 +127,15 @@ footer {
  footer button {
     padding: 10px;
     border: 2px solid black;
-    background-color: tomato;
+    background-color: #622569;
     color: white;
     font-size: 16px;
     width: 200px;
  }
+ footer button:hover {
+    color: black;
+    background-color: white;
+}
  footer ul {
      display: flex;
      justify-content: space-evenly;
@@ -118,4 +149,83 @@ footer {
  footer ul li a {
      font-size: 25px;
      color: white;
- }
\ No newline at end of file
+     transition: ease-in .1s;
+ }
+ footer ul li a:hover {
+    color: #622569;
+}
+/* animations */
+@keyframes title {
+    0%   {color:#d6d4e0;}
+    25%  {color:#a2b9bc;}
+    50%  {color:#878f99;}
+    75%  {color:#6b5b95;}
+    100% {color:#622569;}
+  }
+
+ /* tablet media queries */
+
+ @media (max-width: 800px) {
+    nav {
+        background-color: #d6d4e0;
+
+    }
+
+    nav .links a {
+        padding: 10px 25px;
+    }
+
+    header .about-me button {
+        padding: 10px;
+        border: 2px solid black;
+        background-color: #622569;
+        color: white;
+        font-size: 16px;
+         width: 150px;
+     }
+}
+
+/* mobile media queries */
+
+@media (max-width:500px) {
+    nav .links {
+        margin-left: 0px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+    }
+
+    nav .links a {
+        padding: 10px 15px;
+    }
+
+    header {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    header img {
+        width: 85%;
+        margin: 10px;
+        margin-top: 20px;
+    }
+
+    header .about-me {
+        margin: 20px;
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    header .about-me h2 {
+        margin-bottom: 15px;
+    }
+
+    header .about-me p {
+        margin-top: 15px;
+        text-align: center;
+    }
+
+
+}
\ No newline at end of file