/* 1. Adjusted blur for smaller bubble proportions */

body {
  /* 1. Ensure the body covers 100% of the visible viewport height */
  min-height: 100vh;
  
  /* 2. Remove default margin gaps around the edge of the page */
  margin: 0;
  
  /* 3. Apply the gradient */
  background: linear-gradient(135deg,  #353c3d, #3e4d4f, #ec4899);
  
  /* 4. Optional: Prevent the gradient from repeating if the page content grows */
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#grad1 {
  height: 125px;
  background-image: linear-gradient(to right, #353c3d, #ec4899);
  font-size: 40px;
  font-weight: bold;
  font-family: Arial, Verdana, sans-serif;
  color: #D4AF37;
  background-repeat: no-repeat;
  overflow: hidden;
}

#regions1 {
position: absolute;
margin-top: 10px;
margin-left: 10px;
width: 175px;
z-index: 4;
font-family: Arial, Verdana, sans-serif;
font-size: 16px;
font-weight: bold;
}

#regions2 {
position: absolute;
margin-top: 250px;
margin-left: 10px;
width: 175px;
z-index: 4;
font-family: Arial, Verdana, sans-serif;
font-size: 16px;
font-weight: bold;
}

fieldset {
padding: 10px;
border-radius: 8px;
}

.white2 {
padding: 10px;
height: 96%;
border:1px solid #FFFFFF;
background: #222;
}

.space {
  padding: 15px;
}

/* 1. Locks the background canvas cleanly */
.plasma-viewport {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(135deg,  #353c3d, #3e4d4f, #ec4899);
}

/* 2. UPDATED: The matrix layer must process on white and blend with multiply */
.plasma-filter-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;       /* MUST be white so contrast() doesn't create white boxes */
  filter: contrast(30);   /* Sharpening engine */
  mix-blend-mode: multiply; /* NEW: Drops out the white background entirely, keeping ONLY the bubbles */
}

/* Keep your .bubble classes and animations exactly the same as before! */
.bubble {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  will-change: transform;
}

/* 2. Scaled-down bubble sizes with distinct starting coordinates */
.bubble-blue {
  width: 180px;
  height: 180px;
  top: 15%;
  left: 10%;
  background: radial-gradient(circle, #00d2ff 0%, #0066ff 100%);
  animation: float-wide-1 22s infinite ease-in-out;
}

.bubble-purple {
  width: 220px;
  height: 220px;
  bottom: 20%;
  right: 15%;
  background: radial-gradient(circle, #9d4edd 0%, #3c096c 100%);
  animation: float-wide-2 28s infinite ease-in-out;
}

.bubble-pink {
  width: 160px;
  height: 160px;
  top: 40%;
  right: 25%;
  background: radial-gradient(circle, #ff007f 0%, #7000ff 100%);
  animation: float-wide-3 20s infinite ease-in-out;
}

.bubble-orange {
  width: 140px;
  height: 140px;
  bottom: 15%;
  left: 20%;
  background: radial-gradient(circle, #ff9e00 0%, #ff6d00 100%);
  animation: float-wide-4 24s infinite ease-in-out;
}

/* 3. Wide-travel animation paths to guarantee cross-screen collisions */
@keyframes float-wide-1 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(40vw, 30vh, 0); }
  66%      { transform: translate3d(20vw, 60vh, 0); }
}

@keyframes float-wide-2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(-35vw, -40vh, 0); }
  66%      { transform: translate3d(-15vw, -10vh, 0); }
}

@keyframes float-wide-3 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  55%      { transform: translate3d(-50vw, 20vh, 0); }
}

@keyframes float-wide-4 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(45vw, -50vh, 0); }
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}