From f5a701bdffec4ab9a8ac3f9f48fb4ad40677994d Mon Sep 17 00:00:00 2001
From: Adam Welin <143414967+admwln@users.noreply.github.com>
Date: Wed, 9 Oct 2024 10:48:44 +0200
Subject: [PATCH 01/10] Add about-container class to relevant div

---
 about.html | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)
diff --git a/about.html b/about.html
index 6bf6b6a..248b244 100644
--- a/about.html
+++ b/about.html
@@ -28,13 +28,12 @@
     />
     <link rel="stylesheet" href="./assets/css/style.css" />
     <link rel="stylesheet" href="./assets/css/responsiveness.css" />
-   
-  <style>
-  #footer {
-    display: none;
-  }
-  </style>
 
+    <style>
+      #footer {
+        display: none;
+      }
+    </style>
   </head>
 
   <body>
@@ -66,7 +65,9 @@
       <!--  -->
       <div class="body">
         <div class="container text">
-          <div class="row gy-3 gy-md-4 gy-lg-0 align-items-lg-center">
+          <div
+            class="row gy-3 gy-md-4 gy-lg-0 align-items-lg-center about-container"
+          >
             <div class="col-12 col-lg-6 col-xl-5">
               <img
                 class="img-fluid rounded"
@@ -80,13 +81,23 @@
                 <div class="col-12 col-xl-11">
                   <h2 class="mb-3">Who Are We?</h2>
                   <p class="lead fs-5 text-secondary mb-3">
-                    Tree2Hope is a purpose-driven initiative committed to fostering global reforestation efforts and championing environmental stewardship. Our platform enables eco-conscious individuals and businesses to actively participate in the restoration of our planet's green spaces. 
+                    Tree2Hope is a purpose-driven initiative committed to
+                    fostering global reforestation efforts and championing
+                    environmental stewardship. Our platform enables
+                    eco-conscious individuals and businesses to actively
+                    participate in the restoration of our planet's green spaces.
                   </p>
                   <p class="fs-5 mb-5">
-                    For the low, low price of one dollar, you can choose a specific area in need of ecological attention and help fund the planting of a tree there, having an immediate and tangible effect on the world around you.
+                    For the low, low price of one dollar, you can choose a
+                    specific area in need of ecological attention and help fund
+                    the planting of a tree there, having an immediate and
+                    tangible effect on the world around you.
                   </p>
                   <p class="lead fs-5 text-secondary mb-3">
-                    Join us in our mission to create a sustainable and flourishing ecosystem that supports biodiversity and mitigates the effects of climate change for a brighter, greener future.
+                    Join us in our mission to create a sustainable and
+                    flourishing ecosystem that supports biodiversity and
+                    mitigates the effects of climate change for a brighter,
+                    greener future.
                   </p>
                   <!-- <div class="row gy-4 gy-md-0 gx-xxl-5X">
                     <div class="col-12 col-md-6">

From e3761679c1dfa2532a4a81372f7902a9013c45ee Mon Sep 17 00:00:00 2001
From: Adam Welin <143414967+admwln@users.noreply.github.com>
Date: Wed, 9 Oct 2024 10:52:16 +0200
Subject: [PATCH 02/10] Add radial gradient to background of about-container

---
 assets/css/style.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/assets/css/style.css b/assets/css/style.css
index 7326fb4..7f78d4d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -864,4 +864,21 @@ nav .nav_buttons {
   font-weight: 700;
 }
 
+.about-container {
+  /* Background combining linear and radial gradients */
+  background: radial-gradient(
+    circle at top left,
+    /* Fully transparent at top-left corner */ rgba(245, 245, 220, 0) 0%,
+    /* Slight transparency moving away */ rgba(245, 245, 220, 0.2) 15%,
+    /* Fully opaque */ rgba(245, 245, 220, 1) 30%
+  );
+
+  /* Blur effect */
+  backdrop-filter: blur(15px);
+}
+
+.about-container div {
+  background-color: transparent;
+}
+
 /* You can further style the .content-box class as needed */

From 342a0088dc726aea28adb2713cd15fa4db44609a Mon Sep 17 00:00:00 2001
From: Adam Welin <143414967+admwln@users.noreply.github.com>
Date: Wed, 9 Oct 2024 10:53:55 +0200
Subject: [PATCH 03/10] Improve CSS comments

---
 assets/css/style.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 7f78d4d..8552322 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -865,7 +865,7 @@ nav .nav_buttons {
 }
 
 .about-container {
-  /* Background combining linear and radial gradients */
+  /* Radial gradient background */
   background: radial-gradient(
     circle at top left,
     /* Fully transparent at top-left corner */ rgba(245, 245, 220, 0) 0%,
@@ -877,6 +877,7 @@ nav .nav_buttons {
   backdrop-filter: blur(15px);
 }
 
+/* Ensure the background is visible through child elements */
 .about-container div {
   background-color: transparent;
 }

From 9828a9d6382e05e4b4467033648c012e51d192b3 Mon Sep 17 00:00:00 2001
From: Adam Welin <143414967+admwln@users.noreply.github.com>
Date: Wed, 9 Oct 2024 14:36:54 +0200
Subject: [PATCH 04/10] Darken background of About block

---
 assets/css/style.css | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 8552322..53ab454 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -868,18 +868,29 @@ nav .nav_buttons {
   /* Radial gradient background */
   background: radial-gradient(
     circle at top left,
-    /* Fully transparent at top-left corner */ rgba(245, 245, 220, 0) 0%,
-    /* Slight transparency moving away */ rgba(245, 245, 220, 0.2) 15%,
-    /* Fully opaque */ rgba(245, 245, 220, 1) 30%
+    /* Fully transparent at top-left corner */ rgba(36, 30, 30, 0) 0%,
+    rgba(36, 30, 30, 0.2) 15%,
+    rgba(36, 30, 30, 0.45) 30%,
+    /* Fully opaque */ rgba(36, 30, 30, 1) 55%,
+    rgba(36, 30, 30, 1) 100%
   );
 
   /* Blur effect */
   backdrop-filter: blur(15px);
 }
 
-/* Ensure the background is visible through child elements */
 .about-container div {
+  text-align: left;
+  /* Ensure the background is visible */
   background-color: transparent;
+  color: rgb(187, 187, 187);
+  font-weight: 300;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.about-container p:nth-of-type(2) {
+  font-weight: 600;
 }
 
 /* You can further style the .content-box class as needed */

From b0bebd04183910157387be240bd5e13ef3dcd5cc Mon Sep 17 00:00:00 2001
From: Adam Welin <143414967+admwln@users.noreply.github.com>
Date: Wed, 9 Oct 2024 14:37:32 +0200
Subject: [PATCH 05/10] Remove superfluous bootstrap classes

---
 about.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/about.html b/about.html
index 248b244..1ae7a9b 100644
--- a/about.html
+++ b/about.html
@@ -80,7 +80,7 @@
               <div class="row justify-content-xl-center">
                 <div class="col-12 col-xl-11">
                   <h2 class="mb-3">Who Are We?</h2>
-                  <p class="lead fs-5 text-secondary mb-3">
+                  <p class="fs-5 mb-3">
                     Tree2Hope is a purpose-driven initiative committed to
                     fostering global reforestation efforts and championing
                     environmental stewardship. Our platform enables
@@ -93,7 +93,7 @@ <h2 class="mb-3">Who Are We?</h2>
                     the planting of a tree there, having an immediate and
                     tangible effect on the world around you.
                   </p>
-                  <p class="lead fs-5 text-secondary mb-3">
+                  <p class="fs-5 mb-3">
                     Join us in our mission to create a sustainable and
                     flourishing ecosystem that supports biodiversity and
                     mitigates the effects of climate change for a brighter,

From b60f50752afa5a422ee96983f77dcb8905595d57 Mon Sep 17 00:00:00 2001
From: Adam Welin <143414967+admwln@users.noreply.github.com>
Date: Wed, 9 Oct 2024 15:34:49 +0200
Subject: [PATCH 06/10] Expand transparency of gradient

---
 assets/css/style.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 53ab454..7c650a5 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -870,9 +870,9 @@ nav .nav_buttons {
     circle at top left,
     /* Fully transparent at top-left corner */ rgba(36, 30, 30, 0) 0%,
     rgba(36, 30, 30, 0.2) 15%,
-    rgba(36, 30, 30, 0.45) 30%,
-    /* Fully opaque */ rgba(36, 30, 30, 1) 55%,
-    rgba(36, 30, 30, 1) 100%
+    rgba(36, 30, 30, 0.45) 45%,
+    rgba(36, 30, 30, 0.55) 85%,
+    /* Fully opaque */ rgba(36, 30, 30, 1) 100%
   );
 
   /* Blur effect */

From 05bf003c0f0b25232bae94fa73b7c49dd2645c65 Mon Sep 17 00:00:00 2001
From: Adam Welin <143414967+admwln@users.noreply.github.com>
Date: Wed, 9 Oct 2024 15:36:03 +0200
Subject: [PATCH 07/10] Add body bg color to fix transparency issue on mobile

---
 about.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/about.html b/about.html
index 1ae7a9b..bf48174 100644
--- a/about.html
+++ b/about.html
@@ -30,6 +30,9 @@
     <link rel="stylesheet" href="./assets/css/responsiveness.css" />
 
     <style>
+      body {
+        background-color: rgba(36, 30, 30);
+      }
       #footer {
         display: none;
       }

From a744df4b344139199dd9790db3908a15a5f5fe83 Mon Sep 17 00:00:00 2001
From: Adam Welin <143414967+admwln@users.noreply.github.com>
Date: Wed, 9 Oct 2024 15:59:26 +0200
Subject: [PATCH 08/10] Move body bg color to responsiveness.css

---
 about.html | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/about.html b/about.html
index bf48174..1ae7a9b 100644
--- a/about.html
+++ b/about.html
@@ -30,9 +30,6 @@
     <link rel="stylesheet" href="./assets/css/responsiveness.css" />
 
     <style>
-      body {
-        background-color: rgba(36, 30, 30);
-      }
       #footer {
         display: none;
       }

From 76370a60aadf83c097caf56fb4ba17fe2aceb376 Mon Sep 17 00:00:00 2001
From: Adam Welin <143414967+admwln@users.noreply.github.com>
Date: Wed, 9 Oct 2024 16:00:17 +0200
Subject: [PATCH 09/10] Tweak gradient, font size and header font family

---
 assets/css/style.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 7c650a5..0f6fd9d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -869,9 +869,7 @@ nav .nav_buttons {
   background: radial-gradient(
     circle at top left,
     /* Fully transparent at top-left corner */ rgba(36, 30, 30, 0) 0%,
-    rgba(36, 30, 30, 0.2) 15%,
-    rgba(36, 30, 30, 0.45) 45%,
-    rgba(36, 30, 30, 0.55) 85%,
+    rgba(36, 30, 30, 0.25) 85%,
     /* Fully opaque */ rgba(36, 30, 30, 1) 100%
   );
 
@@ -884,13 +882,18 @@ nav .nav_buttons {
   /* Ensure the background is visible */
   background-color: transparent;
   color: rgb(187, 187, 187);
+  font-size: 16px;
   font-weight: 300;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
 
+.about-container h2 {
+  font-family: "Poppins", sans-serif;
+}
+
 .about-container p:nth-of-type(2) {
-  font-weight: 600;
+  font-weight: 400;
 }
 
 /* You can further style the .content-box class as needed */

From 0bd1b1bcda9ab545e2d97866a2cf960471ca692e Mon Sep 17 00:00:00 2001
From: Adam Welin <143414967+admwln@users.noreply.github.com>
Date: Wed, 9 Oct 2024 16:01:01 +0200
Subject: [PATCH 10/10] Add body bg color to fix transparency issue on mobile

---
 assets/css/responsiveness.css | 647 +++++++++++++++++-----------------
 1 file changed, 323 insertions(+), 324 deletions(-)

diff --git a/assets/css/responsiveness.css b/assets/css/responsiveness.css
index 6c90eef..82009b3 100644
--- a/assets/css/responsiveness.css
+++ b/assets/css/responsiveness.css
@@ -1,368 +1,367 @@
 /*........................... Responsivness...........................*/
 @media only screen and (min-width: 650px) and (max-width: 900px) {
-    .upper_part .links a {
-        text-decoration: none;
-        letter-spacing: 0.5px;
-        font-family: "Poppins", sans-serif;
-        color: rgb(160, 160, 160);
-        font-size: 12px;
-        position: relative;
-        transition: 0.2s;
-    }
-
-    .upper_part .links a:hover {
-        color: white;
-    }
-
-    .upper_part {
-        padding-bottom: 1rem;
-    }
-
-    .links {
-        display: flex;
-        gap: 2rem;
-    }
+  .upper_part .links a {
+    text-decoration: none;
+    letter-spacing: 0.5px;
+    font-family: "Poppins", sans-serif;
+    color: rgb(160, 160, 160);
+    font-size: 12px;
+    position: relative;
+    transition: 0.2s;
+  }
+
+  .upper_part .links a:hover {
+    color: white;
+  }
+
+  .upper_part {
+    padding-bottom: 1rem;
+  }
+
+  .links {
+    display: flex;
+    gap: 2rem;
+  }
 }
 
 @media only screen and (min-width: 600px) and (max-width: 650px) {
-    .upper_part .links a {
-        text-decoration: none;
-        letter-spacing: 0.5px;
-        font-family: "Poppins", sans-serif;
-        color: rgb(160, 160, 160);
-        font-size: 8px;
-        position: relative;
-        transition: 0.2s;
-    }
-
-    .upper_part .links a:hover {
-        color: white;
-    }
-
-    .socialmediaName {
-        font-size: 8px;
-    }
+  .upper_part .links a {
+    text-decoration: none;
+    letter-spacing: 0.5px;
+    font-family: "Poppins", sans-serif;
+    color: rgb(160, 160, 160);
+    font-size: 8px;
+    position: relative;
+    transition: 0.2s;
+  }
+
+  .upper_part .links a:hover {
+    color: white;
+  }
+
+  .socialmediaName {
+    font-size: 8px;
+  }
 }
 
 @media only screen and (min-width: 500px) and (max-width: 600px) {
-    .upper_part .links a {
-        text-decoration: none;
-        letter-spacing: 0.5px;
-        font-family: "Poppins", sans-serif;
-        color: rgb(160, 160, 160);
-        font-size: 8px;
-        position: relative;
-        transition: 0.2s;
-    }
-
-    .upper_part .links a:hover {
-        color: white;
-    }
-
-    .socialmediaName {
-        font-size: 8px;
-    }
+  .upper_part .links a {
+    text-decoration: none;
+    letter-spacing: 0.5px;
+    font-family: "Poppins", sans-serif;
+    color: rgb(160, 160, 160);
+    font-size: 8px;
+    position: relative;
+    transition: 0.2s;
+  }
+
+  .upper_part .links a:hover {
+    color: white;
+  }
+
+  .socialmediaName {
+    font-size: 8px;
+  }
 }
 
 @media only screen and (min-width: 400px) and (max-width: 500px) {
-    .upper_part .links a {
-        text-decoration: none;
-        letter-spacing: 0.5px;
-        font-family: "Poppins", sans-serif;
-        color: rgb(160, 160, 160);
-        font-size: 10px;
-        position: relative;
-        transition: 0.2s;
-    }
-
-    .upper_part {
-        height: auto;
-    }
-
-    .links {
-        display: flex;
-        flex-wrap: wrap;
-        height: auto;
-        gap: 1.25rem;
-    }
-
-    .upper_part .links a:hover {
-        color: white;
-    }
-
-    .socialmediaTextWrapper {
-        display: none;
-    }
-
-    .links .column {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        gap: 7px;
-        width: 140px;
-    }
-
-    .footer {
-        background-color: #141414;
-        box-sizing: border-box;
-        border-top: 1px solid black;
-        color: rgb(160, 160, 160);
-        font-family: "Poppins", sans-serif;
-        width: 100%;
-        padding: 0.5rem 2rem;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-    }
-
-    .quickLinkTextWrapper {
-        display: flex;
-        /* justify-content: center; */
-        /* padding-left: 10rem; */
-        align-items: center;
-        /* gap: 3rem; */
-        width: 100%;
-    }
-
-    .upper_part {
-        padding-bottom: 12px;
-    }
-
-    
-
-    .social_medias{
-        padding-top: 20px;
-        gap: 20px;
-    }
-
-    .imgWrapper{
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-    .imgWrapper i {
-        margin-right: 0px;
-    }
+  .upper_part .links a {
+    text-decoration: none;
+    letter-spacing: 0.5px;
+    font-family: "Poppins", sans-serif;
+    color: rgb(160, 160, 160);
+    font-size: 10px;
+    position: relative;
+    transition: 0.2s;
+  }
+
+  .upper_part {
+    height: auto;
+  }
+
+  .links {
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+    gap: 1.25rem;
+  }
+
+  .upper_part .links a:hover {
+    color: white;
+  }
+
+  .socialmediaTextWrapper {
+    display: none;
+  }
+
+  .links .column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 7px;
+    width: 140px;
+  }
+
+  .footer {
+    background-color: #141414;
+    box-sizing: border-box;
+    border-top: 1px solid black;
+    color: rgb(160, 160, 160);
+    font-family: "Poppins", sans-serif;
+    width: 100%;
+    padding: 0.5rem 2rem;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .quickLinkTextWrapper {
+    display: flex;
+    /* justify-content: center; */
+    /* padding-left: 10rem; */
+    align-items: center;
+    /* gap: 3rem; */
+    width: 100%;
+  }
+
+  .upper_part {
+    padding-bottom: 12px;
+  }
+
+  .social_medias {
+    padding-top: 20px;
+    gap: 20px;
+  }
+
+  .imgWrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .imgWrapper i {
+    margin-right: 0px;
+  }
 }
 
 @media only screen and (min-width: 400px) and (max-width: 440px) {
-    .socialmediaName{
-        font-size: 10px;
-    }
-    .social_medias{
-        gap: 20px;
-    }
+  .socialmediaName {
+    font-size: 10px;
+  }
+  .social_medias {
+    gap: 20px;
+  }
 }
 
 @media only screen and (min-width: 300px) and (max-width: 399px) {
-    .upper_part .links a {
-        text-decoration: none;
-        letter-spacing: 0.5px;
-        font-family: "Poppins", sans-serif;
-        color: rgb(160, 160, 160);
-        font-size: 15px;
-        position: relative;
-        transition: 0.2s;
-    }
-
-    .upper_part {
-        height: auto;
-    }
-
-    .links {
-        display: flex;
-        flex-wrap: wrap;
-        height: auto;
-        gap: 1.25rem;
-    }
-
-    .upper_part .links a:hover {
-        color: white;
-    }
-
-    .socialmediaTextWrapper {
-        display: none;
-    }
-
-    .links .column {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        gap: 7px;
-        width: 200px;
-    }
-
-    .footer {
-        background-color: #141414;
-        box-sizing: border-box;
-        border-top: 1px solid black;
-        color: rgb(160, 160, 160);
-        font-family: "Poppins", sans-serif;
-        width: 100%;
-        padding: 0.5rem 2rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-    }
-
-    .quickLinkTextWrapper {
-        display: flex;
-        /* justify-content: center; */
-        /* padding-left: 10rem; */
-        align-items: center;
-        /* gap: 3rem; */
-        width: 100%;
-    }
-
-    .socialmediaName{
-        font-size: 10px;
-    }
-
-    .social_medias{
-        padding-top: 20px;
-        gap: 15px;
-    }
-
-    .imgWrapper{
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-    .imgWrapper i {
-        margin-right: 0px;
-    }
+  .upper_part .links a {
+    text-decoration: none;
+    letter-spacing: 0.5px;
+    font-family: "Poppins", sans-serif;
+    color: rgb(160, 160, 160);
+    font-size: 15px;
+    position: relative;
+    transition: 0.2s;
+  }
+
+  .upper_part {
+    height: auto;
+  }
+
+  .links {
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+    gap: 1.25rem;
+  }
+
+  .upper_part .links a:hover {
+    color: white;
+  }
+
+  .socialmediaTextWrapper {
+    display: none;
+  }
+
+  .links .column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 7px;
+    width: 200px;
+  }
+
+  .footer {
+    background-color: #141414;
+    box-sizing: border-box;
+    border-top: 1px solid black;
+    color: rgb(160, 160, 160);
+    font-family: "Poppins", sans-serif;
+    width: 100%;
+    padding: 0.5rem 2rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .quickLinkTextWrapper {
+    display: flex;
+    /* justify-content: center; */
+    /* padding-left: 10rem; */
+    align-items: center;
+    /* gap: 3rem; */
+    width: 100%;
+  }
+
+  .socialmediaName {
+    font-size: 10px;
+  }
+
+  .social_medias {
+    padding-top: 20px;
+    gap: 15px;
+  }
+
+  .imgWrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .imgWrapper i {
+    margin-right: 0px;
+  }
 }
 
 @media only screen and (min-width: 250px) and (max-width: 299px) {
-    .upper_part .links a {
-        text-decoration: none;
-        letter-spacing: 0.5px;
-        font-family: "Poppins", sans-serif;
-        color: rgb(160, 160, 160);
-        font-size: 15px;
-        position: relative;
-        transition: 0.2s;
-    }
-
-    .upper_part {
-        height: auto;
-    }
-
-    .links {
-        display: flex;
-        flex-wrap: wrap;
-        height: auto;
-        gap: 1.25rem;
-    }
-
-    .upper_part .links a:hover {
-        color: white;
-    }
-
-    .upper_part {
-        padding-bottom: 12px;
-    }
-
-    .socialmediaTextWrapper {
-        display: none;
-    }
-
-    .links .column {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        gap: 7px;
-        width: 200px;
-    }
-
-    .footer {
-        background-color: #141414;
-        box-sizing: border-box;
-        border-top: 1px solid black;
-        color: rgb(160, 160, 160);
-        font-family: "Poppins", sans-serif;
-        width: 100%;
-        padding: 0.5rem 2rem;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-    }
-
-    .quickLinkTextWrapper {
-        display: flex;
-        /* justify-content: center; */
-        /* padding-left: 10rem; */
-        align-items: center;
-        /* gap: 3rem; */
-        width: 100%;
-    }
-    
+  .upper_part .links a {
+    text-decoration: none;
+    letter-spacing: 0.5px;
+    font-family: "Poppins", sans-serif;
+    color: rgb(160, 160, 160);
+    font-size: 15px;
+    position: relative;
+    transition: 0.2s;
+  }
+
+  .upper_part {
+    height: auto;
+  }
+
+  .links {
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+    gap: 1.25rem;
+  }
+
+  .upper_part .links a:hover {
+    color: white;
+  }
+
+  .upper_part {
+    padding-bottom: 12px;
+  }
+
+  .socialmediaTextWrapper {
+    display: none;
+  }
+
+  .links .column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 7px;
+    width: 200px;
+  }
+
+  .footer {
+    background-color: #141414;
+    box-sizing: border-box;
+    border-top: 1px solid black;
+    color: rgb(160, 160, 160);
+    font-family: "Poppins", sans-serif;
+    width: 100%;
+    padding: 0.5rem 2rem;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .quickLinkTextWrapper {
+    display: flex;
+    /* justify-content: center; */
+    /* padding-left: 10rem; */
+    align-items: center;
+    /* gap: 3rem; */
+    width: 100%;
+  }
 }
 
 .MenuBar {
-    display: none;
+  display: none;
 }
 
 @media (max-width: 1272px) {
-
-    nav .nav_buttons {
-        width: 45%;
-    }
+  nav .nav_buttons {
+    width: 45%;
+  }
 }
 
 @media (max-width: 995px) {
-    #nav-text {
-        display: none;
-    }
+  #nav-text {
+    display: none;
+  }
 
-    .MenuBar {
-        display: contents;
-    }
+  .MenuBar {
+    display: contents;
+  }
 }
 
 @media (max-width: 412px) {
-    .Video {
-        margin: 2em auto;
-        width: 100%;
-        height: 40vh;
-    }
+  body {
+    /* Neccessary to match bg color of About block on narrow screens */
+    background-color: rgba(36, 30, 30);
+  }
+  .Video {
+    margin: 2em auto;
+    width: 100%;
+    height: 40vh;
+  }
 }
 
 @media (max-width: 395px) {
-    .image_container {
-        padding: 0;
-    }
+  .image_container {
+    padding: 0;
+  }
 }
 
 @media (max-width: 377px) {
-    .image_container {
-        padding: 0;
-    }
-
+  .image_container {
+    padding: 0;
+  }
 }
 
 @media (max-width: 285px) {
-    .image_container {
-        padding: 0;
-    }
-
-    .locations {
-        margin: 0;
-    }
-
-    .locations .country_images {
-        background-position: center;
-        background-size: cover;
-        width: 72%;
-    }
+  .image_container {
+    padding: 0;
+  }
+
+  .locations {
+    margin: 0;
+  }
+
+  .locations .country_images {
+    background-position: center;
+    background-size: cover;
+    width: 72%;
+  }
 }
 
-@media (max-width: 375px){
-    .logo img{
-        width:130px;
-    }
-}
\ No newline at end of file
+@media (max-width: 375px) {
+  .logo img {
+    width: 130px;
+  }
+}
