From a7a79279900e2a967b924364009c7d060896c706 Mon Sep 17 00:00:00 2001
From: MattTheTekie <Mattmason2211@gmail.com>
Date: Sat, 28 Mar 2026 16:54:10 -0400
Subject: [PATCH] chore: fixes

---
 css/global.css | 75 ++++++++++++++++++++++++++++++++++----------------
 1 file changed, 51 insertions(+), 24 deletions(-)

diff --git a/css/global.css b/css/global.css
index 4204b22..fb36489 100644
--- a/css/global.css
+++ b/css/global.css
@@ -818,44 +818,71 @@ a:hover {
 
 
 
-.left_banner {
-  position:fixed;
-  top: 250px;
-  left: 40px;
-  width: 383px;
-  height: 626px;
-  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;
-
-}
-
-
-
-
+.left_banner,
 .right_banner {
-  position:fixed;
-  top: 150px;
-  right: 40px;
-  width: 383px;
-  height: 626px;
-  background-image: url("https://www.veltron.net/images/digimon.png");
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+
+  /* Scale based on viewport but respect 1980px design intent */
+  width: clamp(160px, 18vw, 383px);
+  aspect-ratio: 383 / 626;
+  height: auto;
+
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
+
   animation: float 6s ease-in-out infinite;
   z-index: 94;
 
+  pointer-events: none; /* prevents blocking clicks */
 }
 
+/* LEFT banner (dragon) */
+.left_banner {
+  left: clamp(10px, 2vw, 80px);
+  background-image: url("https://www.veltron.net/images/dragon.png");
+}
 
+/* RIGHT banner (digimon) */
+.right_banner {
+  right: clamp(10px, 2vw, 80px);
+  background-image: url("https://www.veltron.net/images/digimon.png");
+}
 
+/* Floating animation (if not already defined) */
+@keyframes float {
+  0% {
+    transform: translateY(-50%) translateY(0px);
+  }
+  50% {
+    transform: translateY(-50%) translateY(-12px);
+  }
+  100% {
+    transform: translateY(-50%) translateY(0px);
+  }
+}
+
+/* Hide on mobile */
 @media (max-width: 600px) {
   .decor.left_banner,
   .decor.right_banner {
     display: none !important;
   }
 }
+
+/* Extra safety: very small screens */
+@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;
+  }
+}