#table-of-contents {
  padding: 24px;
  padding-bottom: 28px;
  border: 4px solid var(--color);
  margin-top: 20px;
  border-radius: 24px;
  opacity: 0;
  animation: show 125ms forwards;
  animation-delay: 250ms;
}
#table-of-contents ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#table-of-contents li a {
  display: flex;
  gap: 4px;
  color: var(--color);
  width: fit-content;
}
#table-of-contents li svg {
  flex-shrink: 0;
  position: relative;
  top: 3px;
  transition: 250ms;
  transition-timing-function: var(--cubic-bezier);
}
.toc__h3 {
  padding-left: 24px;
}
.toc__h3 + .toc__h2 {
  margin-top: 8px;
}

@media(hover: hover) {
  #table-of-contents li a:hover svg {
    transform: translateX(2px);
    transition: 125ms;
  }
}