Made cookie popup work for most browsers

Signed-off-by: rodude123 <rodude123@gmail.com>

src/blog/css/main.css

@@ -32,6 +32,7 @@
     height: 100%;
     background-color: rgba(0, 0, 0, 0.4); /* Background color for the entire screen */
     box-sizing: border-box; /* Include padding and border in the element's total width and height */
+    z-index: 9999999;
 }
 
 .modal-container.hidden {
@@ -43,9 +44,8 @@
     right: 0;
     bottom: 0;
     width: 40%;
-    max-width: 550px;
     height: auto;
-    max-height: 70vh;
+    max-height: 90dvh;
     overflow: auto;
     margin: 1.25em;
     padding: 1.25em;
@@ -61,6 +61,15 @@
     box-shadow: 0 6px 4px 0 var(--mutedBlack);
 }
 
+.modal-content .flexRow {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 1em;
+    flex-wrap: wrap;
+}
+
 /**** Media Queries *****/
 
 @media screen and (max-width: 90em) {
@@ -90,6 +99,12 @@
         width: 100%;
     }
 
+    /*** Cookie popup ***/
+    .modal-content .flexRow {
+        width: 50%;
+        flex-direction: column;
+    }
+
     /*** Large Post for Home and Category ***/
     section.largePost {
         padding: 1em;
@@ -188,6 +203,18 @@
 
 @media screen and (max-width: 55em) {
 
+    /*** Cookie Popup ***/
+    .modal {
+        width: 90%;
+    }
+
+    .modal-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
     /*** Large Post for Home and Category ***/
     .banner {
         max-width: 75%;
@@ -206,6 +233,18 @@
 
 }
 
+@media screen and (max-height: 38em) and (orientation: landscape) {
+    /*** cookie popup ***/
+    .modal {
+        width: 90%;
+    }
+
+    .modal-content .flexRow {
+        flex-direction: row;
+        flex-wrap: nowrap;
+    }
+}
+
 @media screen and (max-width: 30em) {
 
     /***** Individual Blog Posts ***/

src/blog/index.html

@@ -76,7 +76,6 @@
     <div class="modal">
         <div class="modal-content">
             <h2><i class="fas fa-cookie-bite"></i> Hey I use cookies btw</h2>
-            <!-- cookie info text and 2 links disagree and agree, clicking disagree should redirect to google.co.uk  -->
             <p>Just to let you know, I use cookies to give you the best experience on my blog. By clicking agree
                 I'll assume that you are happy with it. <a href="/blog/policy/cookie" class="link">Read more</a>
             </p>