chore: fixes

css/global.css

@@ -819,38 +819,73 @@ a:hover {
 
 
 
-.left_banner {
+.left_banner,
+.right_banner {
   position: fixed;
+
+  /* keep your original placement */
   top: 250px;
   left: 40px;
 
-  width: clamp(180px, 20vw, 383px);
+  width: clamp(140px, 18vw, 383px);
   height: auto;
   aspect-ratio: 383 / 626;
 
-  background-image: url("https://www.veltron.net/images/dragon.png");
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
 
   animation: float 6s ease-in-out infinite;
   z-index: 94;
+
+  pointer-events: none;
 }
 
+/* right stays same logic */
 .right_banner {
-  position: fixed;
   top: 150px;
   right: 40px;
-
-  width: clamp(180px, 20vw, 383px);
-  height: auto;
-  aspect-ratio: 383 / 626;
-
-  background-image: url("https://www.veltron.net/images/digimon.png");
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-
-  animation: float 6s ease-in-out infinite;
-  z-index: 94;
+  left: auto;
+}
+
+/* =========================
+ *  IMPORTANT: prevent UI overlap on laptops/tablets
+ = *======================== */
+@media (max-width: 1400px) {
+  .left_banner {
+    left: 10px;
+  }
+
+  .right_banner {
+    right: 10px;
+  }
+}
+
+/* =========================
+ *  SAFE ZONE: 1280×720 fix (this is your issue)
+ = *======================== */
+@media (max-width: 1280px) {
+  .left_banner,
+  .right_banner {
+    width: 160px;   /* forces them OUT of UI */
+    opacity: 0.85;
+  }
+
+  .left_banner {
+    top: 200px;
+  }
+
+  .right_banner {
+    top: 120px;
+  }
+}
+
+/* =========================
+ *  Mobile hide
+ = *======================== */
+@media (max-width: 900px) {
+  .decor.left_banner,
+  .decor.right_banner {
+    display: none !important;
+  }
 }