diff --git a/style/index.css b/style/index.css
index 96f9d0b89..ad9d076e3 100644
--- a/style/index.css
+++ b/style/index.css
@@ -21,7 +21,7 @@ time, mark, audio, video {
 	margin: 0;
 	padding: 0;
 	border: 0;
-	font-size: 100%;
+	font-size: 62.5%;
 	font: inherit;
 	vertical-align: baseline;
 }
@@ -51,28 +51,30 @@ table {
 
 /* my css here  */
 
+
 .header {
-    border: 3px solid black;
+    border: .1rem solid black;
     background-color: lightgrey;
 }
 h1 {
-    font-size: xx-large;
+    font-size: 2em;
     color: black;
     margin: 0 0 20px 20px;
 }
 h2 {
-    font-size: x-large;
+    font-size: 2rem;
 }
 h3 {
+    font-size: 1.2rem;
     background-color: white;
-    padding: 10px;
-    border: 2px solid black;
+    padding: 1.5em;
+    border: .01em solid black;
 }
 nav {
     color: black;
-     width: 600px;
+     width: 25%;
     display: flex;
-    margin: 0px 0px 20px 40px;
+    margin: 0 0 1.5em 2.5em;
  }
 nav h3:hover {
     background-color: black;
@@ -83,41 +85,44 @@ nav h3:hover {
     background-color: beige;
 }
 .intro img {
-    width: 800px;
-    height: 500px;
-    margin: 20px 20px 20px 20px;
+    width: 40rem;
+    height: 30em;
+    margin: 1.5em 1.5em 1.5em 1.5em;
 }
 .about-me {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
-    width: 500px;
-    height: 200px;
-    margin: 200px 20px 20px 20px;
+    width: 40rem;
+    height: 20em;
+    margin: 11em 1.5em 1.5em 1.5em;
   }
 .about-me h3 {
-    width: 70px;
+    width: 4rem;
 }
 .about-me h3:hover{
     background-color: black;
     color: white;
 }
 .about-me p {
-    font-size: large;
+    height: auto;
+    width: auto;
+    font-size: 1.5rem;
 }
 .gallery {
-    display flex;
+    display: flex;
     flex-wrap: wrap;
 }
 .gallery img {
-     padding: 20px;
-    width: 400px;
-    height: 400px;
+    margin-left: 4rem;
+    padding: 20px;
+    width: 24rem;
+    height: 25em;
 }
 .footer {
-    padding:20px;
+    padding: 1.5em;
     background-color: lightgrey;
-    border: 3px solid black;
+    border: .1em solid black;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -134,3 +139,46 @@ a {
     color: black;
     text-decoration: none;
 }
+/*Media Queries*/
+
+@media (max-width: 800px) {
+    .header {
+        align-content: center;
+        justify-content: center;
+    }
+.intro {
+    height: auto;
+    flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    }
+}
+@media (max-width:500px) {
+    nav {
+        margin: 0;
+    }
+    .header nav h3 {
+     display: none;
+    }
+    .intro {
+        height: auto;
+        flex-direction: column;
+        align-content: center;
+        justify-content: center;
+        }
+    .intro img {
+        height: 20rem;
+        width: 20rem;
+    }
+    .gallery {
+        margin: 0;
+    }
+    .gallery img {
+        height: 20rem;
+        width: 20rem;
+    }
+    .about-me {
+        width: 20rem;
+        height: 30em;
+    }
+}
\ No newline at end of file