fix: safari and cross-browser flex support

css/styles.css

@@ -12,6 +12,7 @@ header {
   margin: 0;
   position: sticky;
   top: 0;
+  display: -webkit-flex;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -19,7 +20,9 @@ header {
   z-index: 10; /* Adjust the z-index as needed */
 }
 main {
+  -webkit-flex: 1;
   flex: 1;
+  display: -webkit-flex;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
@@ -27,8 +30,11 @@ main {
   padding: 20px;
 }
 .flex-column {
+  -webkit-flex: 100%;
   flex: 100%;
+  -webkit-flex-direction: row;
   flex-direction: column;
+  display: -webkit-flex;
   display: flex;
   align-items: center;
   color: var(--text-color);
@@ -39,24 +45,32 @@ main {
   border-bottom: 3px solid rgb(230, 230, 230);
 }
 .flex-row {
+  -webkit-flex: 100%;
   flex: 100%;
+  -webkit-flex-direction: row;
   flex-direction: row;
+  display: -webkit-flex;
   display: flex;
   color: var(--text-color);
   margin: 10px;
   text-align: center;
   border-radius: 5px;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   justify-content: space-evenly;
 }
 .flex-container {
   margin: 10px;
   padding: 20px;
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
+  -webkit-flex-direction: column;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
+  -webkit-flex: 1 1 0;
   flex: 1 1 0;
 }
 .bg-one {
@@ -70,8 +84,11 @@ footer {
   background-color: gray;
   text-align: center;
   padding: 1rem;
+  -webkit-flex: 1;
   flex: 1;
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   justify-content: space-evenly;
 }
@@ -127,7 +144,9 @@ a:hover:not(nav a) {
   box-sizing: border-box;
   color: #121212;
   cursor: pointer;
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex: 0 0 auto;
   flex: 0 0 auto;
   font-family: Inter, sans-serif;
   font-size: 1.2rem;
@@ -157,7 +176,9 @@ a:hover:not(nav a) {
   box-sizing: border-box;
   color: white;
   cursor: pointer;
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex: 0 0 auto;
   flex: 0 0 auto;
   font-family: Inter, sans-serif;
   font-size: 1.2rem;
@@ -237,10 +258,13 @@ a:hover:not(nav a) {
 /* Menu */
 .menu {
   margin: 0 auto;
+  display: -webkit-flex;
   display: flex;
   justify-content: center;
   align-content: center;
+  -webkit-flex-direction: row;
   flex-direction: row;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   width: 100%;
   z-index: 100;
@@ -248,10 +272,13 @@ a:hover:not(nav a) {
 
 nav {
   background: black;
+  display: -webkit-flex;
   display: flex;
   align-content: space-around;
   justify-content: center;
+  -webkit-flex: 1;
   flex: 1;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   width: 100%;
   z-index: 100;
@@ -261,7 +288,9 @@ nav ul {
   padding: 0;
   margin: 0;
   list-style: none;
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   justify-content: center;
   align-content: center;
@@ -269,10 +298,12 @@ nav ul {
 }
 
 nav ul li {
+  display: -webkit-flex;
   display: flex;
 }
 
 nav a {
+  display: -webkit-flex;
   display: flex;
   padding: 0 10px;
   color: #fff;
@@ -301,7 +332,9 @@ nav ul ul {
 
 /* Display Dropdowns on Hover */
 nav ul li:hover > ul {
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-direction: column;
   flex-direction: column;
   justify-content: center;
   align-content: center;
@@ -310,6 +343,7 @@ nav ul li:hover > ul {
 
 /* First Tier Dropdown */
 nav ul ul li {
+  display: -webkit-flex;
   display: flex;
   width: 100%;
   float: none;
@@ -335,6 +369,7 @@ input[type="checkbox"] {
 }
 
 .menu-items {
+  display: -webkit-flex;
   display: flex;
 }
 
@@ -343,6 +378,7 @@ input[type="checkbox"] {
 }
 
 input:checked + .drop + .menu-items {
+  display: -webkit-flex;
   display: flex;
 }
 
@@ -350,6 +386,7 @@ input:checked + .drop + .menu-items {
   position: fixed;
   bottom: 20px;
   right: 20px;
+  display: -webkit-flex;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -379,6 +416,7 @@ input:checked + .drop + .menu-items {
   /* Display All Items in Full-width Column */
 
   nav ul li {
+    display: -webkit-flex;
     display: flex;
     width: 100%;
     text-align: center;
@@ -397,6 +435,7 @@ input:checked + .drop + .menu-items {
   }
   .drop {
     cursor: pointer;
+    display: -webkit-flex;
     display: flex;
     justify-content: center;
     align-content: center;
@@ -412,6 +451,7 @@ input:checked + .drop + .menu-items {
   }
 
   input:checked + .drop + .menu-items {
+    display: -webkit-flex;
     display: flex;
   }
 }