chore: fixes

css/global.css

@@ -817,41 +817,77 @@ a:hover {
 }
 
 
-:root {
-  /* scale based on 1920 reference */
-  --scale: clamp(0.6, 100vw / 1920, 2);
-}
-
-/* =========================
- *  BASE BANNERS
- = *======================== */
 .left_banner,
 .right_banner {
   position: fixed;
 
-  width: calc(383px * var(--scale));
-  height: calc(626px * var(--scale));
+  width: 383px;
+  height: 626px;
 
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
 
   animation: float 6s ease-in-out infinite;
-  z-index: 94;
+  z-index: 9999; /* make sure it's above everything */
   pointer-events: none;
 }
 
 /* images */
 .left_banner {
   background-image: url("https://www.veltron.net/images/dragon.png");
-
-  top: calc(250px * var(--scale));
-  left: calc(40px * var(--scale));
 }
 
 .right_banner {
   background-image: url("https://www.veltron.net/images/digimon.png");
-
-  top: calc(150px * var(--scale));
-  right: calc(40px * var(--scale));
+}
+
+/* =========================
+ *  1920 baseline
+ = *======================== */
+@media (min-width: 1600px) {
+  .left_banner {
+    top: 250px;
+    left: 40px;
+    display: block;
+  }
+
+  .right_banner {
+    top: 150px;
+    right: 40px;
+    display: block;
+  }
+}
+
+/* =========================
+ *  smaller screens (still visible but scaled down)
+ = *======================== */
+@media (max-width: 1599px) {
+  .left_banner,
+  .right_banner {
+    width: 220px;
+    height: 360px;
+  }
+
+  .left_banner {
+    top: 180px;
+    left: 10px;
+    display: block;
+  }
+
+  .right_banner {
+    top: 120px;
+    right: 10px;
+    display: block;
+  }
+}
+
+/* =========================
+ *  very small screens
+ = *======================== */
+@media (max-width: 768px) {
+  .left_banner,
+  .right_banner {
+    display: none;
+  }
 }