:root {
  --color-bg: #e6e6e6;
  --color-dist-bg: #fff;
  --color-text: #000;
  --color-active-top: rgb(186, 186, 186);
  --color-active-bottom: rgb(208, 208, 208);
  --color-active-text: #121212;
}

[data-theme="dark"] {
  --color-bg: #121212;
  --color-dist-bg: #434343;
  --color-text: #ebebeb;
  --color-active-top: rgb(49, 49, 49);
  --color-active-bottom: rgb(140, 140, 140);
  --color-active-text: #fff;
}

.accordion-wrapper {
  height: 100%;
  padding-top: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-dist-bg);
  gap: 2rem;
}

.accordion-wrapper h1 {
  font-size: 4rem;
}

.accordion {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.3rem;
  margin-bottom: 2rem;
}

.accordion_item {
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.accordion_btn {
  position: relative;
  cursor: pointer;
  background: var(--color-bg);
  padding: 1rem;
  border: none;
  width: 100%;
  text-align: left;
  font-weight: 600;
  font-size: 1.3rem;
  border-radius: 1rem;
  transition:
    background 0.3s,
    border-radius 0.3s ease;
  -webkit-text-fill-color: var(--color-text) !important;
  color: var(--color-active-text) !important;
}

.accordion_item.active .accordion_btn {
  background: var(--color-active-top);
  border-radius: 1rem 1rem 0 0;
}

.accordion_item.active {
  color: var(--color-active-text);
}

.accordion_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--color-active-bottom);
  border-radius: 0 0 1rem 1rem;
}

.accordion_inner {
  padding: 1rem;
  gap: 1rem;
  display: flex;
  flex-direction: column;
}

.accordion_inner ul {
  padding-left: 1.5rem;
}

.accordion_inner a {
  color: var(--color-active-text);
}

/* plus sign */
.accordion_btn::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 1.5rem;
  color: #555;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

/* X rotate*/
.accordion_item.active .accordion_btn::after {
  transform: translateY(-50%) rotate(45deg);
  color: #000;
}