@import '@strudel.cycles/react/dist/style.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  display: block;
  content: ' ';
  margin-top: -70px;
  height: 70px;
  visibility: hidden;
  pointer-events: none;
  position: relative;
}

h1:hover .icon-link,
h2:hover .icon-link,
h3:hover .icon-link,
h4:hover .icon-link,
h5:hover .icon-link,
h6:hover .icon-link,
.icon.icon-link:hover {
  visibility: visible;
}
.icon.icon-link {
  background-image: url(./link.svg);
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  visibility: hidden;
  margin-left: -20px;
  width: 20px;
  margin-top: 8px;
}

#table-of-contents {
  display: none;
}

#table-of-contents + ul {
  position: fixed;
  right: 0;
  top: 64px;
  padding: 12px 0;
  overflow: auto;
  height: calc(100vh - 64px);
  width: 33%;
  margin: 2px;
  padding-left: 8px;
  ul {
    padding-left: 8px;
  }
  li {
    list-style: none;
    margin: 2px;
    p {
      margin: 0;
    }
    a {
      text-decoration: none;
    }
  }
}

@media only screen and (max-width: 1120px) {
  #table-of-contents + ul {
    display: none;
  }
}