:root {
  --containerBgColor: #a60311;
  --containerLightBgColor: #c00212;
  --containerDarkerBgColor: #730202;
  --containerTextColor: #f2c49b;
  --containerSecondaryTextColor: #f2ba52;
  --containerThirdTextColor: #f2a74b;
  --BgColor: #f87e7e;
  --Brown: #a65f37;
  --DarkAccent: #261610;
  --defaultPadding: 1rem;
  --defaultRaduius: 8px;
  --defaultGap: 1rem;
  --defaultBiggerGap: 3rem;
  --defaultBoxShadow: 0 3px 10px 1px #000000;
  --bs-accordion-active-color: var(--containerTextColor) !important;
}

section.qa {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--defaultPadding);
}
section.qa h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--containerSecondaryTextColor);
  margin-bottom: 1rem;
  text-align: center;
}
a {
  color: var(--containerBgColor);
  text-decoration: underline;
  /* text-decoration-color: var(--containerSecondaryTextColor); */
}

section.qa div.accordion {
  margin-bottom: 4rem;
  border-radius: var(--defaultRaduius);
  box-shadow: var(--defaultBoxShadow);
}

.accordion-button {
  width: 100%;
  font-size: 2rem;
  padding: var(--defaultPadding);
  text-align: left;
  background-color: var(--containerDarkerBgColor);
  border: none;
  color: var(--containerTextColor);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: 0.7s ease-in-out;
  /* font-weight: 700; */
  font-style: italic;
}

div.accordion-item button.first{
  border-top-left-radius: var(--defaultRaduius);
  border-top-right-radius: var(--defaultRaduius);
}
div.accordion-item button.last{
  border-bottom-left-radius: var(--defaultRaduius);
  border-bottom-right-radius: var(--defaultRaduius);
}
div.accordion-item button.show{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.accordion-button i {
  font-size: 1.5rem;
  color: var(--containerTextColor);
  transition: 0.7s ease-in-out;
}

.accordion-button i.down {
  transform: rotate(180deg);
}

.accordion-button i.up {
  transform: rotate(360deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.7s ease-out;
  background-color: var(--containerTextColor);
  /* padding: var(--defaultPadding); */
}

.accordion-content.last {
  border-bottom-left-radius: var(--defaultRaduius);
  border-bottom-right-radius: var(--defaultRaduius);

}

.accordion-item:target .accordion-content {
  max-height: 110%;
}

.accordion-content p {
  padding: var(--defaultPadding);
  color: var(--containerDarkerBgColor);
  font-size: 1.5rem;
  text-align: center;
  z-index: 2;
}

@media screen and (min-width: 1024px) {
  section.qa div.accordion {
    width: 50%;
  }
}