#container {
  display: flex;
  background-color: rgb(240, 240, 240);
  height: 90%;
  width: 100%;

  flex-wrap: wrap;

  justify-content: center;
  align-items: flex-start;

  & > div {
    width: 20% !important;
  }
}

@media screen and (max-width: 768px) {
  #container > div {
    width: 100% !important;
    min-width: 100px !important;
    max-width: 100% !important;
  }
}

* {
  /* smooth scrolling */
  scroll-behavior: smooth;
}

.row-item {
  border: 1px solid rgb(255, 31, 31);
}

.option-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin: 10px;
  width: auto;
}

.buttons > button {
  margin: 10px;
  padding: 10px;
  background-color: #4caf50; /* Green background */
  color: white; /* White text */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  font-size: 16px; /* Larger font size */
}

@keyframes breathe-bg {
  0%,
  100% {
    background-color: #c4c4c4;
  } /* darker */
  50% {
    background-color: #e0e0e0;
  } /* lighter */
}

/* width: 100%; height: auto; cursor: pointer; object-fit: cover; display: block; min-height: 300px; */
.choice-image {
  background: #ccc; /* starting grey */
  object-fit: cover;
  display: block;

  width: 100%;
  height: auto;
  cursor: pointer;
  min-height: 300px; /* minimum height for the image */

  /* breathing effect: */
  animation: breathe-bg 0.5s ease-in-out infinite;

  /* opacity: 0; */
  /* transition: opacity 0.4s; */
}

/* once the file is fully decoded, remove placeholder + animation */
.choice-image.loaded {
  animation: none; /* stop pulsing */
  background: none; /* kill grey layer */
}
body:has(#showReqAsText:checked) .anchor-text-id {
  display: none;
  visibility: hidden;
}

body:has(#showReqAsText:not(:checked)) .anchor-text-title {
  display: none;
  visibility: hidden;
}