diff --git a/assets/more-icon.png b/assets/more-icon.png
new file mode 100644
index 0000000..27401e8
Binary files /dev/null and b/assets/more-icon.png differ
diff --git a/index.html b/index.html
index 72b560d..ff62c23 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,11 @@
My Personal Web Page
+
+
+
+
+
@@ -12,6 +17,7 @@ Welcome to My Personal Web Page
About
Contact
+ 
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..0cb235e
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,97 @@
+html {
+ font-family: Helvetica, sans-serif;
+ font-size: 14px;
+}
+
+nav ul {
+ list-style-type: none;
+}
+
+nav ul li a {
+ text-decoration: none;
+ color: #000;
+ }
+
+ nav ul li {
+ margin-right: 10px;
+ font-size: 1.25rem;
+ margin-bottom: 10px;
+ }
+
+
+
+@media (min-width: 601px) {
+
+ header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ nav ul {
+ display: flex;
+ align-items: center;
+ list-style-type: none;
+ }
+
+ #more-icon {
+ display: none;
+ }
+ }
+
+
+ @media (min-width: 541px) and (max-width: 600px) {
+
+ html {
+ font-size: 12px;
+ }
+
+ /* center-align the header */
+ header {
+ text-align: center;
+ }
+
+
+ /* stack the navigation vertically */
+ nav ul {
+ display: flex;
+ flex-direction: column;
+ }
+
+
+ #more-icon {
+ display: none;
+ }
+ }
+
+
+ @media (max-width: 540px) {
+
+ html {
+ font-size: 12px;
+ }
+
+ header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ nav ul {
+ display: none; /* Hide all nav items initially */
+ }
+
+ #more-icon {
+ height: 36px;
+ width: 36px;
+ }
+ }
+
+
+h2 {
+ font-size: clamp(1.5rem, 1.5vw, 1.75rem);
+}
+
+p {
+ font-size: clamp(1.25rem, 1.5vw, 1.5rem);
+}