/* four.css */


body {
  background: linear-gradient(to bottom, #b7f4b7, #6de0f0);
}

#button-container{
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 60px); /* Adjust height considering the header */
  padding: 20px; /* Add padding for smaller screens */
}

#button-container-high {
  display: flex;
  order: 1;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

#button-container-middle {
  display: flex;
  order: 2;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

#button-container-low {
  display: flex;
  order: 3;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

/* Buttons */
.button {
  width: 80px;
  height: 80px;
  background: linear-gradient(to bottom, #fff5cb, #fbe977);
  border-radius: 50%;
  box-shadow: 0 4px 6px #033b5e;
  transition: transform 0.2s ease-out;
  transform: perspective(500px) translateZ(0);
  cursor: pointer;
}

.button:active {
  transform: perspective(500px) scale(1.1);
}

/* Assign predefined colors */
.button:nth-child(1) { background-color: blue; }
.button:nth-child(2) { background-color: #4cafba; }
.button:nth-child(3) { background-color: #fc8e35; }
.button:nth-child(4) { background-color: #ffd9c0; }
.button:nth-child(5) { background-color: #73fb45; }

/* Add media query for smaller screens */
@media screen and (max-height: 600px) {
  #button-container {
    gap: 10px; /* Reduce gap between containers */
    height: calc(100vh - 40px); /* Slightly reduce height */
  }
  
  .button {
    width: 60px; /* Reduce button size */
    height: 60px;
  }
}

/* Add media query for very small screens */
@media screen and (max-height: 400px) {
  #button-container {
    gap: 5px;
  }
  
  .button {
    width: 50px;
    height: 50px;
  }
}