.centered-container > h1 {
  margin-top: 3rem;
  font-family: 'KAIslandSand';
  font-size: 6rem;
  color: var(--main-green);
  font-weight: 100;
}

.answer {
  background-color: #fbdfd9;
  width: 90%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

.question {
  margin: 1rem 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  width: 50%;
  align-items: center;
}

.active {
  display: block;
}

.question::after {
  content: '\002B'; /* Unicode character for "plus" sign (+) */
  font-size: 1.5rem; /* Adjusted for visibility */
  color: #000;
  transition: transform 0.3s ease;
}

/* 
/* Assuming .active class is toggled on the question's parent container or on the question itself */
.container-left.active .question::after, /* If .active is on the container */
.question.active::after {
  /* If .active is directly on the question */
  content: '\2212'; /* Unicode character for "minus" sign (-) */
}

@media (max-width: 550px) {
  .question {
    width: 100%;
    font-size: 0.6rem;
  }

  .paragraph-left {
    font-size: 0.75rem;
  }
}