#content {
  height: 100vh; /* 將高度設定為視口高度 */
  /* overflow: auto; 當內容超出容器時，顯示滾動條 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px; /* 添加間距 */
}

#horizontal_buttons {
  width: 80%;
  display: flex;
  justify-content: center;
  gap: 20px; /* 添加間距 */
}

.block {
  display: block;
  width: 80%;
  height: 20vh;
  color: #000000;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  text-align: center;
  /* padding-top: 5vh; */
  /* padding-bottom: 5vh; */
  font-size: xx-large;
}

.blockHorz {
  display: block;
  width: 80%;
  height: 10vh;
  color: #000000;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  text-align: center;
  /* padding-top: 5vh; */
  /* padding-bottom: 5vh; */
  font-size: x-large;
}
#up_btn.active {
  animation: up_breathe 250ms infinite alternate;
}

@keyframes up_breathe {
  0% {
    background-color: #c7c7c7;
    transform: scale(1);
  }
  100% {
    background-color: #f3cd21;
    transform: scale(1.1);
  }
}

#stop_btn.active {
  animation: stop_breathe 250ms infinite alternate;
}

@keyframes stop_breathe {
  0% {
    background-color: #c7c7c7;
    transform: scale(1);
  }
  100% {
    background-color: #4caf50;
    transform: scale(1.1);
  }
}

#down_btn.active {
  animation: down_breathe 250ms infinite alternate;
}

@keyframes down_breathe {
  0% {
    background-color: #c7c7c7;
    transform: scale(1);
  }
  100% {
    background-color: #e74c3c;
    transform: scale(1.1);
  }
}

#pkg_btn.active {
  animation: pkg_breathe 250ms infinite alternate;
}

@keyframes pkg_breathe {
  0% {
    background-color: #c7c7c7;
    transform: scale(1);
  }
  100% {
    background-color: #c7e039;
    transform: scale(1.1);
  }
}