.content-area {
  width: 98%;
  height: 100%;

  color: rgb(27, 54, 81);

  display: flex;
  flex-direction: column;
  align-items: center;

  border: 3px solid blue;
}

.dropdown-list {
  width: 80%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  /* background-color: rgb(244, 211, 161); */
  /* border: 3px solid var(--nav-back); */
  border: 3px solid green;
  z-index: 1000;
}

.dropdown-list details {
  margin: 0;
  padding: 0;
}

.dropdown-list summary {
  height: 80px;
  display: block;
  padding: clamp(4px, 0.6vmin, 10px)
           clamp(8px, 1.2vmin, 20px);

  font-size: clamp(14px, 3vmin, 30px);
  /* color: var(--nav-back); */

  cursor: pointer;
  white-space: nowrap;
}

/* het standaard driehoekje van <summary> weghalen */
.dropdown-list summary::marker {
  content: "";
}

/* .dropdown-list .answer {
  padding: clamp(8px, 1vmin, 16px)
           clamp(12px, 1.5vmin, 24px);

  font-size: clamp(12px, 2vmin, 20px);
  line-height: 1.4;

  color: var(--nav-back);
  background-color: rgb(255, 230, 195);

  white-space: normal;
} */

.dropdown-list details {
  position: relative;
}


.dropdown-list .answer {
  position: absolute;
  top: 80px;
  left: 0;
  z-index: 100;

  width: min(500px, 90vw);
  padding: 1rem;

  background: white;
  border: 1px solid #bbb;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}