body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: black; /* Solid black background */
  overflow: hidden;
  position: relative;
}

.fire-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('assets/fire.gif') center center;
  background-size: cover;
  z-index: -1;
}

.top-half,
.bottom-half {
  z-index: 1;
  position: relative;
  background: rgba(0, 0, 0, 0.8); /* Semi-transparent overlay for readability */
  backdrop-filter: blur(5px);
}

.top-half {
  flex: 1;
  padding-top: 1%;
  padding-left: 1%;
  padding-right: 1%;
  box-sizing: border-box;
  min-height: 45%; /* Ensures top-half is visible */
  max-height: 45%;
}

#chatContainer {
  width: 100%;
  height: calc(100%); /* Adjust container height to exclude 250px */
  overflow: hidden; /* Ensures anything outside bounds is hidden */
  position: relative;
  border-radius: 4px;
  transition: height 0.3s ease; /* Smooth transition when height changes */
}

#chatContainer:hover {
  height: 100%; /* Expand to show the full iframe when hovered */
}

#chatContainer iframe {
  position: absolute;
  top: 0; /* Aligns the top of the iframe with the container */
  left: 0; /* Keeps the sides aligned */
  width: 100%; /* Full width of the container */
  height: calc(100% + 100px); /* Extends the iframe height to render the clipped content */
  border: none; /* Optional: Removes the border around the iframe */
  transition: transform 0.3s ease; /* Smooth transition for the iframe */

}

#chatContainer:hover iframe {
  transform: translateY(-100px); /* Shift the iframe upward to reveal hidden content */
}

.bottom-half {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  box-sizing: border-box;
  min-height: 55%; /* Ensures bottom-half has enough space */
  max-height: 55%;

}

.section {
  background: rgba(0, 0, 0, 0.5); /* Transparent black background */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; /* Text color for better visibility */
  font-size: 1.2em;
  text-align: center;
  min-height: 25%;
}

#section1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#section2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#section3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#section4 {
  display: flex;
  justify-content: center;
  align-items: center;
}

#qrImage {
  max-width: 90%; /* Prevents the image from exceeding section bounds */
  max-height: 90%; /* Maintains aspect ratio within the section */
  border-radius: 10px; /* Optional: Adds rounded corners */
}

/* Media Queries for Responsive Design */
@media (max-aspect-ratio: 4/3) {
  .top-half {
    flex: 2;
  }
  .bottom-half {
    flex: 1;
  }
}

@media (orientation: landscape) {
  .top-half {
    min-height: 45%;
  }
  .bottom-half {
    min-height: 55%;
  }
}