From 9d8c6f9d81a324bd610f64d8ae9ee60d1880403e Mon Sep 17 00:00:00 2001
From: Joshua Kim <107587636+JPKim1@users.noreply.github.com>
Date: Thu, 3 Aug 2023 15:49:41 -0600
Subject: [PATCH] Update style.css

---
 style.css | 100 ++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 86 insertions(+), 14 deletions(-)

diff --git a/style.css b/style.css
index c199b311..1aea1dad 100644
--- a/style.css
+++ b/style.css
@@ -2,6 +2,8 @@
 
 body {
   font-family: "Lato", sans-serif;
+  margin: 0;
+  padding: 0;
 }
 
 h2 {
@@ -31,7 +33,8 @@ section.alternate-background {
 }
 
 main img {
-  width: 100px;
+  width: 100%;
+  height: auto;
 }
 
 /* ---  Groups & Items --- */
@@ -42,7 +45,6 @@ main img {
 }
 
 .item {
-  flex: 1;
   margin: 10px;
 }
 
@@ -54,28 +56,35 @@ main img {
 
 header {
   background-color: #ff385c;
-  padding: 20px 20px 0 20px;
-  text-align: center;
+  padding: 20px;
 }
 
 .logo {
   font-family: "Pangolin", cursive;
   font-size: 72px;
   color: #fff;
+  flex: 1;
+}
+
+header nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex: 1;
+  justify-content: center; /* Center the navigation items for mobile view */
 }
 
 header nav ul li {
-  list-style-type: none;
+  margin-left: 20px;
 }
 
-header nav ul li a {
-  color: #fff;
-  text-decoration: none;
-  padding: 0 20px 0 0;
+header nav ul li:first-child {
+  margin-left: 0;
 }
 
-header nav ul li a:hover {
-  color: #bdbdbd;
+header nav ul li a {
+  color: #fff;
   text-decoration: none;
 }
 
@@ -92,7 +101,7 @@ form label {
 form select,
 form input {
   margin-bottom: 20px;
-  width: 180px;
+  width: 100%;
 }
 
 form button {
@@ -108,12 +117,75 @@ form button {
 
 footer {
   background-color: #ff385c;
+  text-align: center;
 }
 
 footer p {
   color: #fff;
-  text-align: center;
   padding: 20px;
+  margin: 0;
 }
 
-/* -------  Media Query ------- */
+/* -------  Media Queries ------- */
+
+@media screen and (min-width: 768px) {
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  header nav {
+    margin-top: 10px;
+  }
+
+  #stay form {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  #about {
+    display: flex;
+    align-items: center;
+  }
+
+  #about img {
+    flex: 1;
+    max-width: 400px;
+    margin-right: 20px;
+  }
+
+  #about p {
+    flex: 2;
+  }
+
+  #ideas img {
+    width: 100%;
+  }
+
+  #ideas h3 {
+    text-align: center;
+  }
+
+  #ideas {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 20px;
+    align-items: center;
+  }
+
+  #host {
+    display: flex;
+    align-items: center;
+  }
+
+  #host img {
+    flex: 1;
+    max-width: 400px;
+    margin-right: 20px;
+  }
+
+  #host p {
+    flex: 2;
+  }
+}