diff --git a/index.html b/index.html
index 72b560d..669d5c2 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="styles.css" />
     <title>My Personal Web Page</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   </head>
   <body>
     <header>
@@ -16,7 +18,7 @@ <h1>Welcome to My Personal Web Page</h1>
     </header>
     <main>
       <section>
-        <h2>About Me</h2>
+        <h2 id="aboutMe">About Me</h2>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
           diam vel eros aliquam, vitae consequat tellus lacinia. Donec convallis
@@ -24,7 +26,7 @@ <h2>About Me</h2>
         </p>
       </section>
       <section>
-        <h2>Contact Information</h2>
+        <h2 id="contactInfo">Contact Information</h2>
         <p>Email: info@example.com</p>
         <p>Phone: 123-456-7890</p>
       </section>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..bffb508
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,70 @@
+body {
+  color: black;
+  font-size: 16;
+  font-style: normal;
+}
+
+@media (max-width: 600px) {
+  * {
+    text-align: center;
+    font-size: 4vh;
+  }
+}
+
+header {
+  background-color: blue;
+}
+
+@media (max-width: 600px) {
+  h1 {
+    font-size: 1.5rem;
+  }
+}
+
+nav {
+  background-color: lightblue;
+}
+
+@media (max-width: 600px) {
+  nav {
+    font-size: 8vw;
+  }
+}
+
+main {
+  border: #a9a9a9;
+  border-style: solid;
+  border-width: 1px;
+}
+
+@media (min-width: 601px) {
+  main {
+    background-color: bisque;
+  }
+}
+
+section {
+  background-color: bisque;
+}
+
+@media (min-width: 601px) {
+  section {
+    display: inline-block;
+    height: 45%;
+    width: 45%;
+    text-align: center;
+  }
+}
+
+footer {
+  background-color: pink;
+}
+
+@media (max-width: 600px) {
+  footer {
+    height: clamp(14px, 1.5vw, 18px);
+    width: calc(100% / 1.2);
+    padding-left: 14%;
+    padding-right: auto;
+  }
+}
