From ca44cd3aad58f9d0ebc71d3ff1ff4396375d473c Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Mon, 17 Oct 2022 23:04:57 -0400
Subject: [PATCH] Spacing css

---
 src/layouts/partials/clipboard-modal.html |  2 +-
 src/static/css/spacing.css                | 96 ++++++++++++++++++++---
 2 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/src/layouts/partials/clipboard-modal.html b/src/layouts/partials/clipboard-modal.html
index 7bd0d38..af39899 100644
--- a/src/layouts/partials/clipboard-modal.html
+++ b/src/layouts/partials/clipboard-modal.html
@@ -8,7 +8,7 @@
 
           </div>
           <div class="col-lg-9 col-md-9 col-sm-12 col-12 modal-message">
-            <h4 class="modal-head"><i class="icon-tea-checkmark"></i><br id="mobile-break"> Copied to clipboard, enjoy!</h4>
+            <h4 class="modal-head"><i class="icon-tea-checkmark"></i> <br id="mobile-break"> Copied to clipboard, enjoy!</h4>
             <p class="lead">But wait... using tea without authenticating is like buying a video game without the DLC.</p>
             <p class="modal-text">By authenticating your GitHub, you'll be eligible for a variety of exciting rewards, including minted NFT certificates. Your authentication number is directly tied to the rarity of your certificate, so be sure to take a sip while it's hot!</p>
             <button class="detail-btn-large" id="modal-cta"><i class="icon-enter-arrow"></i>AUTHENTICATE WITH TEA</button>
diff --git a/src/static/css/spacing.css b/src/static/css/spacing.css
index a86f1a7..37da0c9 100644
--- a/src/static/css/spacing.css
+++ b/src/static/css/spacing.css
@@ -2,19 +2,97 @@
 
 /* Height spacers */
 
+@media only screen and (min-width: 1200px) {
 
+  .three-boxes{
+    padding-top: 12.556vw;
+    padding-bottom: 12.556vw;
+  }
+
+  .two-boxes{
+    padding-top: 8.371vw;
+    padding-bottom: 8.371vw;
+  }
+
+  .one-box{
+    padding-top: 4.185vw;
+    padding-bottom: 4.185vw;
+  }
 
-.three-boxes{
-  padding-top: 12.556vw;
-  padding-bottom: 12.556vw;
 }
 
-.two-boxes{
-  padding-top: 8.371vw;
-  padding-bottom: 8.371vw;
+@media only screen and (min-width: 992px) and (max-width: 1200px) {
+
+  .three-boxes{
+    padding-top: 15vw;
+    padding-bottom: 15vw;
+  }
+
+  .two-boxes{
+    padding-top: 10vw;
+    padding-bottom: 10vw;
+  }
+
+  .one-box{
+    padding-top: 5vw;
+    padding-bottom: 5vw;
+  }
+
 }
 
-.one-box{
-  padding-top: 4.185vw;
-  padding-bottom: 4.185vw;
+@media only screen and (min-width: 768px) and (max-width: 992px) {
+
+  .three-boxes{
+    padding-top: 15.423vw;
+    padding-bottom: 15.423vw;
+  }
+
+  .two-boxes{
+    padding-top: 10.282vw;
+    padding-bottom: 10.282vw;
+  }
+
+  .one-box{
+    padding-top: 5.141vw;
+    padding-bottom: 5.141vw;
+  }
+
+}
+
+@media only screen and (min-width: 576px) and (max-width: 768px) {
+
+  .three-boxes{
+    padding-top: 20.313vw;
+    padding-bottom: 20.313vw;
+  }
+
+  .two-boxes{
+    padding-top: 13.542vw;
+    padding-bottom: 13.542vw;
+  }
+
+  .one-box{
+    padding-top: 6.771vw;
+    padding-bottom: 6.771vw;
+  }
+
+}
+
+@media only screen and (max-width: 576px) {
+
+  .three-boxes{
+    padding-top: 29.167vw;
+    padding-bottom: 29.167vw;
+  }
+
+  .two-boxes{
+    padding-top: 19.444vw;
+    padding-bottom: 19.444vw;
+  }
+
+  .one-box{
+    padding-top: 9.722vw;
+    padding-bottom: 9.722vw;
+  }
+
 }