.toc {
  border: 1px solid rgba(0,0,0,.05);
  margin: 1.5em 0;
  padding: 1em;
  background-color: #fff;
}

.toc summary {
  font-weight: bold;
  opacity: .9;
}

.toc summary:hover {
  opacity: 1;
}

.toc summary:hover {
  cursor: pointer;
}

.toc summary .hide {
  display: none;
}

.toc[open] summary .hide {
  display: inline;
}

.toc summary .show {
  display: inline;
}

.toc[open] summary .show {
  display: none;
}

.toc ul {
  margin: 1em 0 0 0;
  list-style-type: none;
}

.toc .item-h3 {
  margin-left: .5em;
}

.toc .item-h4 {
  margin-left: 1.5em;
}

.toc .item-h5 {
  margin-left: 2.5em;
}

.toc .item-h6 {
  margin-left: 3.5em;
}

.toc .item-h3::before,
.toc .item-h4::before,
.toc .item-h5::before,
.toc .item-h6::before {
  content: "\22A2";
  margin-right: .5em;
  color: #ccc;
}

@-webkit-keyframes downarrow {
  0% {
    -webkit-transform: translateY(0);
    opacity: 0.3;
  }

  100% {
    -webkit-transform: translateY(.2em);
    opacity: 1;
  }
}

@keyframes downarrow {
  0% {
    transform: translateY(0);
    opacity: 0.3;
  }

  100% {
    transform: translateY(.2em);
    opacity: 1;
  }
}

.toc a::after {
  content: '\2193';
  display: inline-block;
  margin-left: .66em;
  transform-origin: 50% 50%;
  -webkit-animation: downarrow 0.6s infinite alternate ease-in-out;
  animation: downarrow 0.6s infinite alternate ease-in-out;
  visibility: hidden;
}

.toc a:hover::after {
  visibility: visible;
}