html {
  scroll-behavior: smooth;
}

#content-toc {
  flex: 1;
  position: sticky;
  top: 12.5rem;
  width: 38rem;
  height: 60vh;
  padding: 0 2rem;
  overflow-x: hidden;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#content-toc::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.section-nav li.active > a {
  font-weight: 700;
}

.section-nav {
  padding-left: 0;
  border-left: 1px solid #efefef;
}
.section-nav a {
  font-family: 'Inter';
  font-size: 0.9rem;
  text-decoration: none;
  display: block;
  padding: .25rem 0;
  color: #636363;
  transition: all 50ms ease-in-out;
}
#back-top {
  font-style: italic;
  font-size: .9rem;
  display: block;
  position: sticky;
  margin-top: 1rem;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 0;
  color: var(--panel-text);
  background-color: var(--panel-bg);
  text-decoration: none;
}
#back-top:hover {
  font-weight: 800;
}

.section-nav a:hover,
.section-nav a:focus {
  color: black;
}

* {
  box-sizing: border-box;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  margin-left: 1rem;
}
.book-work-nav {
  margin-left: .1rem;
}

h1 {
  font-weight: 300;
}

section {
  padding-bottom: 20rem;
}

.sub-menu {
  display: block;
  margin-left: 20px;
}

.toggle-submenu {
  color: #333333 !important;
}

.arrow {
  display: inline-block;
  font-size: .75rem;
  margin-left: .5rem;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.arrow-rotated {
  transform: rotate(-90deg) !important;
}

.sub-menu-active .sub-menu {
  display: none;
}

.sub-menu-active .arrow {
  transform: rotate(180deg);
}