chore: fixes

css/global.css

@@ -818,14 +818,23 @@ a:hover {
 
 
 
+/* =========================
+ *  1. Layout Anchor
+ = *======================== */
+#websiteContainer {
+position: relative;
+}
+
+/* =========================
+ *  2. Base Banner System
+ = *======================== */
 .left_banner,
 .right_banner {
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
 
-  /* Scale based on viewport but respect 1980px design intent */
-  width: clamp(160px, 18vw, 383px);
+  width: clamp(140px, 12vw, 320px);
   aspect-ratio: 383 / 626;
   height: auto;
 
@@ -836,22 +845,25 @@ a:hover {
   animation: float 6s ease-in-out infinite;
   z-index: 94;
 
-  pointer-events: none; /* prevents blocking clicks */
+  pointer-events: none;
 }
 
-/* LEFT banner (dragon) */
+/* =========================
+ *  3. Positioning (980px layout-aware)
+ = *======================== */
 .left_banner {
-  left: clamp(10px, 2vw, 80px);
+  left: max(10px, calc((100vw - 980px) / 2 - 200px));
   background-image: url("https://www.veltron.net/images/dragon.png");
 }
 
-/* RIGHT banner (digimon) */
 .right_banner {
-  right: clamp(10px, 2vw, 80px);
+  right: max(10px, calc((100vw - 980px) / 2 - 200px));
   background-image: url("https://www.veltron.net/images/digimon.png");
 }
 
-/* Floating animation (if not already defined) */
+/* =========================
+ *  4. Float Animation
+ = *======================== */
 @keyframes float {
   0% {
     transform: translateY(-50%) translateY(0px);
@@ -864,25 +876,40 @@ a:hover {
   }
 }
 
-/* Hide on mobile */
-@media (max-width: 600px) {
+/* =========================
+ *  5. Tablet Optimization (1280×720, iPads)
+ = *======================== */
+@media (max-width: 1100px) {
+  .left_banner,
+  .right_banner {
+    width: 220px;
+    opacity: 0.75;
+  }
+
+  .left_banner {
+    left: 10px;
+  }
+
+  .right_banner {
+    right: 10px;
+  }
+}
+
+/* =========================
+ *  6. Mobile Hide (safe collapse)
+ = *======================== */
+@media (max-width: 900px) {
   .decor.left_banner,
   .decor.right_banner {
     display: none !important;
   }
 }
 
-/* Extra safety: very small screens */
+/* =========================
+ *  7. Extra Small Devices
+ = *======================== */
 @media (max-width: 400px) {
   .decor {
     display: none !important;
   }
 }
-
-/* Ultra-wide scaling (keeps proportion on big monitors) */
-@media (min-width: 2000px) {
-  .left_banner,
-  .right_banner {
-    width: 420px;
-  }
-}