diff --git a/css/global.css b/css/global.css
index 8f0132d..553958b 100644
--- a/css/global.css
+++ b/css/global.css
@@ -829,7 +829,7 @@ a:hover {
   background-repeat: no-repeat;
 
   animation: float 6s ease-in-out infinite;
-  z-index: 9999; /* make sure it's above everything */
+  z-index: 9999;
   pointer-events: none;
 }
 
@@ -843,51 +843,28 @@ a:hover {
 }
 
 /* =========================
- *  1920 baseline
+ *  TRUE RESPONSIVE SCALE (KEY FIX)
  = *======================== */
-@media (min-width: 1600px) {
-  .left_banner {
-    top: 250px;
-    left: 40px;
-    display: block;
-  }
+:root {
+  --s: calc(100vw / 1920);
+}
 
-  .right_banner {
-    top: 150px;
-    right: 40px;
-    display: block;
-  }
+/* clamp so it doesn't get too small or too huge */
+.left_banner,
+.right_banner {
+  transform: scale(clamp(0.55, var(--s), 2.2));
+  transform-origin: top left;
 }
 
 /* =========================
- *  smaller screens (still visible but scaled down)
+ *  POSITION ALSO SCALES
  = *======================== */
-@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;
-  }
+.left_banner {
+  top: calc(250px * var(--s));
+  left: calc(40px * var(--s));
 }
 
-/* =========================
- *  very small screens
- = *======================== */
-@media (max-width: 768px) {
-  .left_banner,
-  .right_banner {
-    display: none;
-  }
+.right_banner {
+  top: calc(150px * var(--s));
+  right: calc(40px * var(--s));
 }