body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("/images/clouds.jpg");
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.8;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
}
#draggableBox {
    width: 700px;
    height: 415px;
    background-color: #e3f8c7;
    /* text-align center; -- Remove this here, it's for the overall box content, not the header directly */
    font-family: helvetica;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px; /* Keep this 0px if the header is to sit flush at the top */
    padding-bottom: 10px;
    border-radius: 40px; /* Keep this */

    position: absolute;
    top: 200px;
    left: 30%;
    z-index: 100;
    /* Add this if you want to use flexbox for vertical centering within the entire draggable box */
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    align-items: center; /* Centers children horizontally within flex container */
}

#boxHeader {
    /* Remove explicit width if you want it to match parent's content width */
    /* width: 100%; */ /* This will make it fill the parent's *content area*.
                        Since draggableBox has 10px padding on left/right,
                        this will make boxHeader 680px wide. */
    width: 700px; /* If you intend for it to be the full width of the draggableBox (including its padding area) */
    height: 30px;
    padding: 10px;
    cursor: move;
    background-color: #616d50;
    color: #fff;
    font-family: helvetica;
    font-size: 20px;
    position: relative; /* Keep this if you need it for dragging or child positioning */

    /* IMPORTANT: Match the border-radius of the parent #draggableBox for the top corners.
       Also, since it's now meant to span the *full width* of the parent (including rounded corners),
       you should apply the border-radius to the boxHeader, *not* just a fixed pixel value
       that doesn't account for the parent's overall shape.

       A common way to achieve this is to make the header span the full width,
       and let the parent's `overflow: hidden;` handle the rounding.
       However, if the header *itself* needs the rounding, use the same value.
    */
    border-radius: 40px 40px 0 0; /* Use 40px to match the parent's top radius */

    /* Centering content within header */
    line-height: 50px; /* Vertical centering for text if height is fixed at 50px */
}