diff --git a/index.html b/index.html
index 72b560d..84acfd1 100644
--- a/index.html
+++ b/index.html
@@ -2,15 +2,17 @@
 <html>
   <head>
     <title>My Personal Web Page</title>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
     <header>
       <h1>Welcome to My Personal Web Page</h1>
       <nav>
         <ul>
-          <li><a href="#">Home</a></li>
-          <li><a href="#">About</a></li>
-          <li><a href="#">Contact</a></li>
+          <li><a href="#" class="nav-text">Home</a></li>
+          <li><a href="#" class="nav-text">About</a></li>
+          <li><a href="#" class="nav-text">Contact</a></li>
         </ul>
       </nav>
     </header>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..11aa226
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,121 @@
+@media (min-width: 1008px) {
+body {
+    background-color: rgb(209, 197, 187);
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+ul {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    padding-inline-start: 0;
+    font-size:1.5em;
+}
+
+a.nav-text {
+    text-decoration: none;
+    color: black;
+    font-weight: 100;
+    padding: 10px 10px 10px 0;
+    text-align: left;
+}
+
+main {
+    background-color: white;
+    display: flex;
+    flex-direction: row;
+
+}
+
+section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 50%;
+    margin: 25px;
+}
+
+p {
+    text-wrap: wrap;
+    padding: 5px 5px 5px 0;
+    font-size: 20px;
+}
+
+h2 {
+    font-size: 35px;
+}
+
+footer {
+    text-align: center;
+}
+
+footer > p {
+    font-size: 15px;
+}
+}
+
+@media (max-width: 640px) {
+    body {
+        background-color: rgb(209, 197, 187);
+        font-family: Arial, Helvetica, sans-serif;
+    }
+    
+    header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        margin: 5px;
+    }
+    
+    ul {
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        padding-inline-start: 0;
+        margin-top: 0;
+    }
+  
+    a.nav-text {
+        text-decoration: none;
+        color: black;
+        font-weight: 100;
+        padding: 10px;
+        font-size: 20px;
+    }
+
+    li {
+        margin: 5px;
+    }
+
+    main {
+        background-color: white;
+        display: flex;
+        flex-direction: column;
+        padding: 15px;
+    }
+
+    p {
+        text-wrap: wrap;
+        padding: 5px 5px 5px 0;
+        font-size: 20px;
+    }
+ 
+    h2 {
+        font-size: 25px;
+    }
+
+    footer {
+        text-align: center;
+    }
+    
+    footer > p {
+        font-size: 15px;
+    } 
+}
\ No newline at end of file
