From 22e9b0f1e55f8146bd2c790e3c88366695745213 Mon Sep 17 00:00:00 2001
From: Roxaski <145111435+Roxaski@users.noreply.github.com>
Date: Wed, 14 Feb 2024 14:59:08 +0000
Subject: [PATCH] improvements to media query's

---
 index.html |  2 +-
 style.css  | 26 ++++++++++++++++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 024d9f4..150e312 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,7 @@ <h1>Coffee Cup Café</h1>
                 <h1>What a better way to espresso yourself...</h1>
                 <h2>Than with the freshest coffee around, start your day the right way</h2>
                 <div role="button" class="btn">
-                    <a href="./pages/menu.html">grab coffee</a>
+                    <a href="./pages/menu.html">grab some</a>
                 </div>
             </div>
             <div class="img-container">
diff --git a/style.css b/style.css
index c957607..6d49ceb 100644
--- a/style.css
+++ b/style.css
@@ -157,9 +157,10 @@ nav.active .hamburger-menu .bars::after {
     color: var(--clr-white);
     text-align: center;
     text-decoration: none;
-    text-transform: capitalize;
+    text-transform: uppercase;
     letter-spacing: .5px;
-    font-size: clamp(1rem, 3vw, 1.1rem);
+    font-size: clamp(1rem, 3vw, 1rem);
+    font-weight: 400;
     padding: 10px 15px;
     -webkit-tap-highlight-color: transparent;
 }
@@ -173,8 +174,7 @@ nav.active .hamburger-menu .bars::after {
     position: absolute;
     bottom: 0;
     right: 0;
-    width: 535px;
-    max-width: 100%;
+    max-width: 535px;
     opacity: 75%;
     color: var(--clr-grey);
 }
@@ -221,7 +221,16 @@ nav.active .hamburger-menu .bars::after {
     .btn:hover {
         background-color: none;
     }
-
+}
+@media screen and (max-width: 500px) {
+    .img-container img {
+        max-width: 225px;
+    }
+}
+@media screen and (max-width: 345px) {
+    .img-container img {
+        max-width: 175px;
+    }
 }
 @media screen and (max-width: 1180px) and (orientation: landscape) {
     nav.active .links {
@@ -266,7 +275,12 @@ nav.active .hamburger-menu .bars::after {
         width: 55%;
     }
     .img-container img {
-        max-width: 45%;
+        max-width: 375px;
+    }
+}
+@media screen and (max-width: 725px) {
+    .img-container img {
+        max-width: 275px;
     }
 }
 @media screen and (max-width: 655px) and (orientation: landscape) {