Fix responsiveness issues

src/pages/index.astro

@@ -74,13 +74,6 @@ import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
             </article>
 
             <div>
-                <a
-                    href="https://www.credly.com/badges/f85e1445-5fad-4954-90ce-78632749e1a7/public_url"
-                    target="_blank"
-                    rel="noreferrer"
-                >
-                    <Image src={googleCS} alt="Google Cybersecurity Badge" />
-                </a>
                 <a
                     href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url"
                     target="_blank"
@@ -112,6 +105,13 @@ import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
                         alt="Meta Front-End Developer Badge"
                     />
                 </a>
+                <a
+                    href="https://www.credly.com/badges/f85e1445-5fad-4954-90ce-78632749e1a7/public_url"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <Image src={googleCS} alt="Google Cybersecurity Badge" />
+                </a>
             </div>
         </section>
     </mdui-card>

src/styles/global.css

@@ -23,12 +23,12 @@ body {
     margin: 0;
 
     background: radial-gradient(
-            circle 1200px at -25vw -20vh,
+            circle 75vw at -25vw -20vh,
             var(--circle-color),
             transparent
         ),
         radial-gradient(
-            circle 1000px at 130vw 130vh,
+            circle 80vw at 150vw 130vh,
             var(--circle-color),
             transparent
         );

src/styles/index.css

@@ -43,24 +43,19 @@ section {
         font-size: 1.3em;
     }
 
-    &#certificates {
+    &#certificates div {
-        & div {
+        flex-wrap: wrap;
-            padding-top: 1em;
-            width: 100%;
-            overflow: scroll;
-            justify-content: start;
-        }
 
         & a {
             min-width: 200px;
-            width: 15%;
+            width: 25%;
         }
     }
 
-    &#about #stats {
+    &#about #stats div {
         flex-wrap: wrap;
         & img {
-            width: 45%;
+            max-width: 350px;
             min-width: 300px;
         }
     }

src/styles/topBar.css

@@ -5,6 +5,10 @@ mdui-top-app-bar {
     background: transparent;
     box-shadow: none;
 
+    @media (max-width: 1150px) {
+        backdrop-filter: blur(5px);
+    }
+
     & mdui-icon {
         border: 2px solid rgb(var(--primary));
         width: 1.5em;