improved cookie stuff

css/global.css

@@ -90,32 +90,6 @@ body[data-theme="spooky"] footer {
     background-color: #f9ac59;
 }
 
-body[data-theme="light"] #cookie-consent {
-    background-color: #9d9ea1;
-}
-
-body[data-theme="dark"] #cookie-consent {
-    background-color: #080808;
-}
-
-body[data-theme="light"] .cookieButton {
-    background-color: #D8D8D8;
-    border-color: #666; /*  :O  */ 
-}
-
-body[data-theme="dark"] .cookieButton {
-    background-color: #202020;    
-    border-color: #474747;    
-}
-
-body[data-theme="light"] .cookieButton span:not(.fas) {
-    color: black;
-}
-
-body[data-theme="dark"] .cookieButton span:not(.fas) {
-    color: white;
-}
-
 body[data-theme="light"] h1 {
     color: black;
 }

css/index.css

@@ -80,12 +80,6 @@ header {
     margin-left: 10px;
 }
 
-@media (max-width: 600px) {
-    #options {
-        right: 0;
-    }
-}
-
 #themebtn {
     display: flex;
     justify-content: center;
@@ -334,6 +328,14 @@ body[data-theme="light"] footer a:hover {
     }
 }
 
+#consentButtonWrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    margin-left: 25px;
+}
+
 #cookie-consent {
     position: fixed;
     bottom: 0;
@@ -360,6 +362,7 @@ body[data-theme="light"] footer a:hover {
     align-items: center;
     justify-content: center;
     height: 25px;
+    min-width: 60px;
     border-radius: 30px;
     padding: 10px 15px;
     margin: 10px 5px;
@@ -368,17 +371,54 @@ body[data-theme="light"] footer a:hover {
     border-width: 3px;
 }
 
-.cookieButton .fa-check {
-    color: #3d813d !important;
+body[data-theme="light"] #cookie-consent {
+    background-color: #9d9ea1;
+}
+
+body[data-theme="dark"] #cookie-consent {
+    background-color: #080808;
+}
+
+body[data-theme="light"] .cookieButton.g {
+    background-color: #6ddd6d;
+    border-color: #499649; /*  :O  */
+}
+
+body[data-theme="light"] .cookieButton.r {
+    background-color: #d67272;
+    border-color: #b63535;
 }
 
-.cookieButton .fa-times {
-    color: #a14545 !important;
+body[data-theme="dark"] .cookieButton.g {
+    background-color: #306430;
+    border-color: #1a3d1a; /*  :O  */
+}
+
+body[data-theme="dark"] .cookieButton.r {
+    background-color: #6b3535;
+    border-color: #221010;
+}
+
+body[data-theme="light"] .cookieButton span:not(.fas) {
+    color: black;
+}
+
+body[data-theme="dark"] .cookieButton span:not(.fas) {
+    color: white;
+}
+
+.cookieButton.g {
+    background-color: #3d813d;
+}
+
+.cookieButton.r {
+    background-color: #a14545;
 }
 
 @media (max-width: 768px) {
     #cookie-consent {
-        flex-direction: column;
+        flex-direction: row;
+        flex-wrap: wrap;
     }
 }
 
@@ -412,6 +452,10 @@ body[data-theme="light"] footer a:hover {
     main {
         margin: 1rem;
     }
+
+    #options {
+        right: 0;
+    }
 }
 
 @media (max-width: 600px) {

index.html

@@ -185,8 +185,10 @@
                 Please accept the usage of functional cookies to enable these features.
             </p>
         </div>
-        <div id="consent-button" class="img-link cookieButton" onclick="consentGranted();"><span><i class="fas fa-check"></i>&nbsp;Accept</span></div>
-        <div id="deny-button" class="img-link cookieButton" onclick="consentDenied();"><span><i class="fas fa-times"></i>&nbsp;Deny</span></div>
+        <div id="consentButtonWrapper">
+            <div id="consent-button" class="img-link cookieButton g" onclick="consentGranted();"><span>Accept</span></div>
+            <div id="deny-button" class="img-link cookieButton r" onclick="consentDenied();"><span>Deny</span></div>
+        </div>
     </div>
     <footer>
         <div></div>