:root {
  --font-color: oklch(37.2% 0.044 257.287deg);
  --heading-color: oklch(20.8% 0.042 265.755deg);
  --link-color: oklch(39.1% 0.09 240.876deg);
  --hover-color: oklch(44.3% 0.11 240.79deg);
  --opacity: 0.75;
  --first: oklch(54.6% 0.245 262.881deg);
  --dark-gray: oklch(37.1% 0 0deg);
  --medium-gray: oklch(55.6% 0 0deg);
  --light-gray: oklch(92.2% 0 0deg);
  --viewport-bg: oklch(96.8% 0.007 247.896deg);
  --bg: oklch(55.4% 0.046 257.417deg);
  --light-bg: oklch(92.9% 0.013 255.508deg);
  --input-bg: transparent;
  --border: 0.063rem solid oklch(27.9% 0.041 260.031deg);
  --table-hover: oklch(27.9% 0.041 260.031deg);
  --button-color: oklch(95.1% 0.026 236.824deg);
  --button-bg: oklch(39.1% 0.09 240.876deg);
  --button-bg-hover: oklch(50% 0.134 242.749deg);
  --error: oklch(51.4% 0.222 16.935deg);
  --alert: oklch(76.9% 0.188 70.08deg);
  --success: oklch(52.7% 0.154 150.069deg);
  --form-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.26);
  --form-focus-box-shadow: inset 0 1px 1px rgba(#000, 0.5);
  --filter-shadow: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

[data-theme=dark] {
  --font-color: oklch(96.8% 0.007 247.896deg);
  --heading-color: oklch(96.8% 0.007 247.896deg);
  --link-color: oklch(58.8% 0.158 241.966deg);
  --hover-color: oklch(74.6% 0.16 232.661deg);
  --viewport-bg: oklch(27.9% 0.041 260.031deg);
  --input-bg: oklch(92.9% 0.013 255.508deg);
  --border: 0.063rem solid oklch(92.9% 0.013 255.508deg);
  --form-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.26);
  --form-focus-box-shadow: inset 0 1px 1px rgba(#000, 0.5);
  --filter-shadow: drop-shadow(0px 0px 10px rgba(200, 200, 200, 0.5));
}

.dropdown-menu {
  display: none;
}

/* Class to show the menu */
.open-menu {
  display: block;
}

.dropdown-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dropdown {
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: rgba(39, 44, 49, 0.06) 8px 8px 10px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
  transition: all 0.5s ease;
}

.dropdown-header {
  color: oklch(42.4% 0.199 265.638deg);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-header:hover {
  cursor: pointer;
}

.dropdown-header.open {
  background-color: var(--first);
  color: #fff;
}

.dropdown-menu {
  transition: max-height 0.3s ease;
  padding: 0.3s ease;
  padding: 15px 20px;
}

.dropdown-menu pre {
  margin-bottom: 2rem;
  line-height: 1.7;
}

.arrow {
  width: 25px;
  height: 25px;
  fill: oklch(42.4% 0.199 265.638deg);
  transition: transform 0.3s ease-in-out, fill 0.3s ease-in-out, filter 0.2s ease-in-out;
  transform-origin: center;
}

.dropdown-header.open .arrow {
  fill: #fff;
}

.dropdown-header.open .arrow {
  fill: #fff;
  transform: rotate(180deg);
}

@media only screen and (min-width: 700px) {
  .dropdown-header:hover {
    transition: all 0.7s ease;
    transform: translate3D(0, -1px, 0) scale(1.02);
  }
}
@media only screen and (min-width: 900px) {
  .dropdown-menu.open-menu {
    padding: 18px 2rem;
  }
  .dropdown-menu p {
    font-size: 1.1398963731rem;
  }
}