Run CSS Autoprefixer on the styleshit

assets/css/style.css

@@ -1,3 +1,10 @@
+/*
+* Prefixed by:
+* PostCSS: v7.0.29,
+* Autoprefixer: v9.7.6
+* Browsers: last 4 version
+*/
+
 @font-face {
   font-family: "Clockopia";
   src: url("../fonts/Clockopia.ttf") format("truetype");
@@ -11,6 +18,8 @@
 body {
   margin: 0;
   padding: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
   height: 100vh;
   overflow: hidden;
@@ -23,10 +32,19 @@ body {
 .navbar {
 	width: 140px;
 	background-color: #3c1a4d;
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
-	flex-direction: column;
+	-webkit-box-orient: vertical;
-	justify-content: flex-start;
+	-webkit-box-direction: normal;
-	align-items: center;
+	    -ms-flex-direction: column;
+	        flex-direction: column;
+	-webkit-box-pack: start;
+	    -ms-flex-pack: start;
+	        justify-content: flex-start;
+	-webkit-box-align: center;
+	    -ms-flex-align: center;
+	        align-items: center;
 	padding-top: 2rem;
 	padding-bottom: 2rem;
 	position: fixed;
@@ -55,6 +73,8 @@ body {
 	text-align: center;
 	padding: 0.75rem 0;
 	position: relative;
+	-webkit-transition: background 0.2s ease, color 0.2s ease;
+	-o-transition: background 0.2s ease, color 0.2s ease;
 	transition: background 0.2s ease, color 0.2s ease;
 }
 
@@ -68,6 +88,8 @@ body {
 	width: 100%;
 	height: 1px;
 	background-color: rgba(255, 255, 255, 0.25);
+	-webkit-transition: background-color 0.2s ease;
+	-o-transition: background-color 0.2s ease;
 	transition: background-color 0.2s ease;
 }
 
@@ -107,11 +129,21 @@ a {
     color: #447fc6;
 }
 
+::-moz-selection {
+	color: #000000;
+	background: #a57ae9
+}
+
 ::selection {
 	color: #000000;
 	background: #a57ae9
 }
 
+a::-moz-selection {
+	color: #000;
+	background: #447fc6
+}
+
 a::selection {
 	color: #000;
 	background: #447fc6
@@ -124,10 +156,18 @@ a:not(:has(img)):hover {
 
 /* === MAIN CONTENT === */
 .content {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  align-items: center;
+  -webkit-box-align: center;
-  justify-content: center;
+      -ms-flex-align: center;
-  flex: 1;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
   padding: 0 10% 0 10%;
   gap: 5%;
   z-index: 10;
@@ -136,10 +176,18 @@ a:not(:has(img)):hover {
 
 /* === LEFT SIDE (UZI IMAGE) === */
 .left {
-  flex: 1;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  justify-content: center;
+  -webkit-box-pack: center;
-  align-items: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 
 .uzi {
@@ -151,10 +199,19 @@ a:not(:has(img)):hover {
 
 /* === MIDDLE SECTION (TEXT + BADGES) === */
 .middle {
-  flex: 1;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  flex-direction: column;
+  -webkit-box-orient: vertical;
-  justify-content: center;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   text-align: left;
   z-index: 10;
 }
@@ -174,8 +231,11 @@ a:not(:has(img)):hover {
 }
 
 .buttons {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
   gap: 6px;
   margin-top: 1.5rem;
 }
@@ -184,7 +244,11 @@ a:not(:has(img)):hover {
   width: 88px;
   height: 31px;
   border: none;
-  image-rendering: pixelated;
+  -ms-interpolation-mode: nearest-neighbor;
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: -moz-crisp-edges;
+      image-rendering: -o-pixelated;
+      image-rendering: pixelated;
 }
 
 /* === BACKGROUND CANVAS === */
@@ -196,7 +260,7 @@ a:not(:has(img)):hover {
 	height: 100%;
 	background: #0e0016;
 	z-index: -9999;
-	pointer-events: none; /* allow clicks above */
+	pointer-events: none;
 }
 
 .clouds {
@@ -206,38 +270,52 @@ a:not(:has(img)):hover {
 	width: 100%;
 	height: auto;
 	z-index: -5;
-	pointer-events: none; /* allow clicks above */
+	pointer-events: none;
 }
 
 .clouds img {
 	width: 100%;
 	height: auto;
 	display: block;
-	opacity: 0.5; /* soften the layer */
+	opacity: 0.5;
-	filter: blur(1px);
+	-webkit-filter: blur(1px);
+	        filter: blur(1px);
 }
 
 @media (max-width: 900px) {
   body {
-    flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
   }
 
   .navbar {
     position: relative;
     width: 100%;
     height: auto;
-    flex-direction: row;
+    -webkit-box-orient: horizontal;
-    justify-content: center;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
     padding: 0.5rem 0;
   }
 
   .navbar ul {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
     gap: 1rem;
   }
 
   .content {
-    flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
     padding: 2rem;
     text-align: center;
   }