From b02dd9f49a0620ab7514385215369f953ca37af9 Mon Sep 17 00:00:00 2001
From: Milindi_Kodikara <milindikodikara@gmail.com>
Date: Mon, 21 Oct 2024 16:39:04 +1100
Subject: [PATCH] Fix duality stacking

---
 index.css  | 24 +++++++++++++++---------
 index.html |  4 ++--
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/index.css b/index.css
index 86eee2f..6869be4 100644
--- a/index.css
+++ b/index.css
@@ -16,7 +16,7 @@ body {
 }
 
 h1 {
-    font-size: 3em;
+    font-size: 1em;
     font-family: 'Montserrat', sans-serif;
 }
 
@@ -32,7 +32,7 @@ header {
     height: 60px;
     width: inherit;
     top: 0;
-    font-size: 1.2em;
+    font-size: 1em;
     color: #191501;
     position: fixed;
     z-index: 200;
@@ -125,7 +125,7 @@ nav a:hover {
     text-align: center;
     font-family: 'Abhaya Libre', serif;
     letter-spacing: 0.25em;
-    font-size: 1.5em;
+    font-size: 1em;
 }
 
 .keywords {
@@ -153,7 +153,7 @@ nav a:hover {
     font-family: 'Montserrat', sans-serif;
     /*letter-spacing: 0.1em;*/
     font-weight: bold;
-    font-size: 2em;
+    font-size: 1.5em;
     color: #F0F0F0;
 }
 
@@ -162,14 +162,14 @@ nav a:hover {
     margin-right: 25%;
     text-align: center;
     font-family: 'Montserrat', sans-serif;
-    font-size: 3em;
+    font-size: 1em;
     color: #000;
 }
 
 .home-read-more {
     font-family: 'Abhaya Libre', serif;
     letter-spacing: 0.25em;
-    font-size: 1.5em;
+    font-size: 1em;
     margin: 50px;
 }
 
@@ -193,6 +193,7 @@ nav a:hover {
 
 .duality-img {
     object-fit: contain;
+    flex-shrink: 0;
     width: 80%;
     height: 80%;
 }
@@ -242,7 +243,7 @@ nav a:hover {
 }
 
 .duality-desc {
-    font-size: 2em;
+    font-size: 1em;
     color: #fff
 }
 
@@ -261,7 +262,7 @@ nav a:hover {
 }
 
 .duality-big-desc {
-    font-size: 1.5em;
+    font-size: 1em;
     color: #fff
 }
 
@@ -291,13 +292,18 @@ nav a:hover {
     }
 
     .home-about-description, .keywords {
-        font-size: 24px;
+        font-size: 16px;
     }
 
     .home-page-about, .duality-card {
         padding-top: 50px;
         padding-bottom: 50px;
     }
+
+    .duality-img {
+        min-width: 50%;
+        width: 80vw;
+    }
 }
 
 @media (max-width: 1500px) {
diff --git a/index.html b/index.html
index 1767f52..955b5e5 100644
--- a/index.html
+++ b/index.html
@@ -208,7 +208,7 @@
                 <div>
                     <div class="home-sections-headings colours-dark-background duality-heading">Tea</div>
                     <span class="duality-big-desc">Matcha is the talk of the town!</span>
-                    <div data-include="tea_origin_world_map"></div>
+                    <div class="duality-img" data-include="tea_origin_world_map"></div>
                 </div>
             </div>
         </div>
@@ -217,7 +217,7 @@
                 <div>
                     <div class="home-sections-headings colours-red-background duality-heading">Coffee</div>
                     <span class="duality-big-desc">Espresso rules the coffee communities ⚡️</span>
-                    <div data-include="coffee_origin_world_map"></div>
+                    <div class="duality-img" data-include="coffee_origin_world_map"></div>
                 </div>
             </div>
         </div>