chore: fixes

css/global.css

@@ -817,6 +817,9 @@ a:hover {
 }
 
 
+/* =========================
+ *  BASE (1920 DESIGN)
+ = *======================== */
 .left_banner,
 .right_banner {
   position: fixed;
@@ -836,35 +839,64 @@ a:hover {
 /* images */
 .left_banner {
   background-image: url("https://www.veltron.net/images/dragon.png");
+  top: 250px;
+  left: 40px;
 }
 
 .right_banner {
   background-image: url("https://www.veltron.net/images/digimon.png");
+  top: 150px;
+  right: 40px;
 }
 
 /* =========================
- *  TRUE RESPONSIVE SCALE (KEY FIX)
+ *  SMALL LAPTOPS (1200–1600)
  = *======================== */
-:root {
+@media (max-width: 1600px) {
-  --s: calc(100vw / 1920);
+  .left_banner,
-}
+  .right_banner {
+    width: 260px;
+    height: 425px;
+  }
 
-/* clamp so it doesn't get too small or too huge */
+  .left_banner {
-.left_banner,
+    top: 180px;
-.right_banner {
+    left: 10px;
-  transform: scale(clamp(0.55, var(--s), 2.2));
+  }
-  transform-origin: top left;
+
+  .right_banner {
+    top: 120px;
+    right: 10px;
+  }
 }
 
 /* =========================
- *  POSITION ALSO SCALES
+ *  4K ONLY (make slightly bigger, NOT scaled math)
  = *======================== */
-.left_banner {
+@media (min-width: 3000px) {
-  top: calc(250px * var(--s));
+  .left_banner,
-  left: calc(40px * var(--s));
+  .right_banner {
+    width: 520px;
+    height: 850px;
+  }
+
+  .left_banner {
+    top: 320px;
+    left: 80px;
+  }
+
+  .right_banner {
+    top: 200px;
+    right: 80px;
+  }
 }
 
-.right_banner {
+/* =========================
-  top: calc(150px * var(--s));
+ *  MOBILE
-  right: calc(40px * var(--s));
+ = *======================== */
+@media (max-width: 768px) {
+  .left_banner,
+  .right_banner {
+    display: none !important;
+  }
 }