body { 
    background-color: #272c36;
    font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", cursive;
    position:relative;
    
}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
}
.container2 {
  display: flex;
  position:absolute;
  min-height:100%;
  border:1px dotted white;
  margin: 0 auto;
  padding:5px;
}
.text {
    color: #FFFFFF;
    max-width: 600px;
    text-align: center;
}
.image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    padding-top: 80px;
    
}
.tankdiv {
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5px;
}
.AAAAAAAAAAAAAAAAAAAAAAAAAAAAA {
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5px;
}
  .boxes {
        position: relative;
        border: 1px dotted purple;
        background-color: black;
        color: white;
        text-align: center;
        border-radius: 0px;
        width: 500px;
        padding: 5px;
        padding-left: 30px;
        padding-right: 30px;
        margin-top: 0px;
        margin-bottom: 0px;
        /* New Styling for Expansion */
        max-height: 15px;
        /* Initial collapsed height. Adjust based on your content */
        overflow: hidden;
        /* Hide content beyond the max-height */
        transition: max-height 0.5s ease-out;
        /* Smooth transition for height changes */
        cursor: default;
        /* Indicate that the box is clickable */
      }

      /* Hover effect: expands halfway */
      .boxes:hover {
        max-height: 70px;
        /* "Halfway" height. Adjust as needed */
        color: lavender;
      }

      /* Expanded state (active after click) */
      .boxes.expanded {
        max-height: 1500px;
        /* "Full length" height (a large enough value to show all content) */
        overflow: auto;
        /* Allow scrolling if content truly exceeds this large max-height */
        cursor: zoom-out;
        /* Change cursor when expanded */
        transition: 1s ease-in-out;
  }
  
@media
 (min-width: 768px) {
    .container {
        align-items: center;
    }
    .text {
        text-align: center;
    }
    .image {
        max-width: 600px;
    }
}
button {
    all: unset;
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
}