body{
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .container{
    padding: 100px 20px 60px; /* plenty of top space so the bar + title breathe */
    box-sizing: border-box;
    border: 3px solid var(--slime-dark);
    /* Keep the top border, but remove the side and bottom borders for now
       border-top: 3px solid var(--slime-dark);
       border-left: none;
       border-right: none;
       border-bottom: none;
    */
    
    /* Round the corners */
    border-radius: 12px; 
    
    /* Ensure the container is constrained to prevent full-width stretching */
    max-width: 80%; /* Or whatever width suits your design */
    margin: 0 auto; /* Center the container */   
  }

  /* Constrain title block so the bar doesn't span full browser: it spans the title area.
     If you prefer the bar to go full-bleed across the page, change .title-wrap width to 100%. */
  .title-wrap{
    position: relative;
    width: min(1100px, 92%); /* title area width */
    margin: 0 auto;
    padding-top: 40px; /* extra gap so title sits below the bar */
    box-sizing: border-box;
  }

  /* The top bar that spans the entire .title-wrap */
  .top-bar {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: 0;
    height: 175px; /* Set a height that works well with your image */
    border-radius: 19px;
    
    /* --- IMAGE SLIME PROPERTIES --- */
    background-image: url('../images/slime.png');
    background-size: 100% 100%; /* Stretch image to cover the full width and height */
    background-repeat: no-repeat;
    background-position: center bottom; /* Ensure the oozy bottom is visible */
    
    /* We can still add a slight shadow and animation for movement */
    box-shadow: 0 4px 15px rgba(10,40,10,0.8);
    z-index: 0;
    animation: wobble 4s infinite ease-in-out;
  }

  /* main title */
  .slime-title{
    display: inline-block;
    position: relative;
    z-index: 2; /* above the bar */
    padding: 12px 10px; /* slightly more padding top/bottom */
    font-size: 4rem;
    font-weight: 800;
    line-height: 0.95;
    color: var(--slime-mid);
    text-shadow:
      0 0 10px rgba(14,50,14,0.9),
      0 0 22px rgba(14,50,14,0.55);
    margin: 0;
    padding: 12px 10px;
  }

  /* rounded accent under the bar (center) to look like a bubble/dent */
  .title-accent{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 28px; /* just between bar and title */
    width: 44px;
    height: 22px;
    border-radius: 0 0 20px 20px;
    background: var(--slime-mid);
    z-index: 1;
    opacity: 0.05;
    filter: blur(.6px);
  }

  /* slime-like oozing drips */
.drip {
  position: absolute;
  width: 18px;
  height: 44px;
  background: var(--slime-mid);
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; /* irregular blob shape */
  top: 100px; /* slightly lower for more separation */
  z-index: 1;
  animation: drip 3s infinite ease-in-out, squish 1.5s infinite alternate;
  filter: blur(.5px);
}
  /* tweak drip positions if needed */
  .drip.d1 { left: 14%; animation-delay: 0.15s; }
  .drip.d2 { left: 50%; animation-delay: 0.7s; }
  .drip.d3 { left: 86%; animation-delay: 0.35s; }

  @keyframes drip{
    0%   { transform: translateY(0); opacity: 1; }
    80%  { transform: translateY(56px); opacity: 1; }
    100% { transform: translateY(86px); opacity: 0; }
  }

  /* Slight side-to-side wobble to mimic slime movement */
  @keyframes wobble {
    0%   { transform: translateX(0) scaleY(1); }
    25%  { transform: translateX(2px) scaleY(0.98); }
    50%  { transform: translateX(-2px) scaleY(1.02); }
    75%  { transform: translateX(1px) scaleY(0.99); }
    100% { transform: translateX(0) scaleY(1); }
  }    

  h2{
    margin-top: 64px;
    font-size: 2rem;
    color: #b5ffb5;
    font-weight: 700;
  }

  p{
    max-width: 780px;
    margin: 18px auto 0;
    color: #cfeecd;
    font-size: 1rem;
  }

  /* responsive */
  @media (max-width: 720px){
    .slime-title { font-size: 2.2rem; }
    .top-bar { top: 6px; height: 14px; border-radius: 8px; }
    .title-accent { top: 18px; width: 30px; height: 14px; }
    .container { padding-top: 60px; }
    .drip { display: none; } /* hide drips on small screens for cleanliness */
  }