@keyframes highlightChartSection {
  from {
    background: none;
    scale: 1;
  }
  50% {
    background: var(--surface-2);
    scale: 1.025;
  }
  to {
    scale: 1;
    background: none;
  }
}
body {
  display: flex;
  flex-flow: column nowrap;
  gap: 2rem;
  padding: 0;
}

header {
  padding: 0 1rem;
}

section .photo-frame {
  align-self: center;
  rotate: 5deg;
  scale: 0.85;
}
section.ethic {
  max-width: 1100px;
  display: flex;
  flex-flow: column nowrap;
  gap: 0.75rem;
  padding: 0 1rem;
}
section.ethic p {
  width: 100%;
}
section.chart {
  max-width: 1100px;
  display: flex;
  flex-flow: column nowrap;
  gap: 4rem;
}
section.chart .table-of-contents-dropdown {
  display: flex;
  flex-flow: column nowrap;
  padding: 1.75rem 1.5rem 1.5rem 2rem;
  gap: 1.5rem;
  background: var(--primary);
  overflow: hidden;
  border-radius: 2rem;
  margin: 0 1rem;
  max-height: 5rem;
  transition: max-height 0.5s ease;
}
section.chart .table-of-contents-dropdown.active {
  max-height: 950px;
  transition: max-height 0.5s ease;
}
section.chart .table-of-contents-dropdown.active .table-of-contents-dropdown__title img {
  rotate: 180deg;
  height: 100%;
}
section.chart .table-of-contents-dropdown__title {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  cursor: pointer;
}
section.chart .table-of-contents-dropdown__title h3 {
  width: 100%;
  color: var(--surface-1);
  padding-left: none;
}
section.chart .table-of-contents-dropdown__title img {
  rotate: 0deg;
  transition: rotate 0.25s ease;
  transform-origin: center center;
}
section.chart .table-of-contents-dropdown__contents {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
}
section.chart .table-of-contents-dropdown__contents li {
  display: list-item;
  list-style-position: inside;
  list-style-type: decimal-leading-zero;
  color: var(--surface-1);
  font-weight: 400;
  font-size: 1.25rem;
  padding: 0.75rem;
  border-radius: 20px;
  border: none;
  background: none;
  transition: background 0.2s ease;
  cursor: pointer;
}
section.chart .table-of-contents-dropdown__contents li:hover {
  background: var(--on-surface-1);
}
section.chart .table-of-contents-dropdown__contents li:active {
  background: var(--on-surface-2);
}
section.chart .table-of-contents-dropdown__contents li p {
  display: inline;
  color: var(--surface-1);
  text-align: start;
}
section.chart .table-of-contents-dropdown__contents li p strong {
  font-weight: 400;
}
section.chart ol {
  display: flex;
  flex-flow: column nowrap;
  gap: 4rem;
}
section.chart ol > li {
  display: list-item;
  list-style-position: inside;
  list-style-type: decimal-leading-zero;
  font-family: "Outfit";
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--primary);
  gap: 0.75rem;
  border-radius: 1.5rem;
  padding: 1rem;
}
section.chart ol > li.highlight-chart-section {
  animation: highlightChartSection 1.2s ease;
}
section.chart ol > li h3 {
  display: inline-block;
  margin-bottom: 1rem;
}
section.chart ol > li p {
  margin-bottom: 0.75rem;
}
section.chart ol > li p:last-of-type {
  margin-bottom: 0;
}
section.chart ol > li > ul {
  padding-left: 2rem;
  list-style: disc;
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
  font-size: 1.25rem;
}
section.chart ol > li > ul li {
  font-weight: 300;
}
section.chart ol > li > ul li ul {
  margin-top: 0.5rem;
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
  list-style-type: square;
  padding-left: 2rem;
}
section.chart ol > li > ul {
  margin-bottom: 1rem;
}
section.chart .photo-frame {
  rotate: -5deg;
}

@media screen and (min-width: 954px) {
  section.chart .table-of-contents-dropdown {
    padding: 2rem;
    gap: 2rem;
    max-height: 6.25rem;
  }
  section.chart .table-of-contents-dropdown__title h3 {
    padding-left: 1.5rem;
  }
  section.chart .table-of-contents-dropdown__contents {
    gap: 0.25rem;
  }
  section.chart .table-of-contents-dropdown__contents li {
    padding: 0.75rem 1rem;
  }
  section.chart ol {
    gap: 4rem;
  }
  section.chart ol > li {
    font-size: 1.375rem;
  }
  section.chart ol > li > ul {
    padding-left: 4rem;
    font-size: 1.5rem;
  }
  section.chart ol > li > ul li ul {
    padding-left: 4rem;
  }
}/*# sourceMappingURL=ethic.css.map */