html {
  scroll-behavior: smooth;
  padding: 0 15px;
}
body {
  font-family: Heliotrope;
  color: $dark;
  background: $light;
}
details {
  margin-left: 3.5%;
}
summary {
  padding: 0 10px;
  a {
    color: $dark;
  }
  a:visited {
    color: $dark;
  }
}
summary:hover {
  cursor: pointer;
  background-color: #ddd;
  border-radius: 7px;
}
.admonition {
  margin: 15px -12px;
  padding: 5px 10px;
  border: 2px solid;
  border-radius: 7px;
  p {
    margin: 0;
  }

  &.note {
    border-color: #b3d1f3;
    background-color: #e5f1ff;
  }
  &.tip {
    border-color: #b3f3d1;
    background-color: #e5fff1;
  }
  &.warn {
    border-color: #f3d1b3;
    background-color: #fff0ce;
  }
  &.err {
    border-color: #f3b3b3;
    background-color: #ffe5e5;
  }
}
blockquote {
  margin: 15px -19px;
  padding: 0 15px;
  border-left: 3px solid $dark;
  border-radius: 7px;
  color: $dark;
  background: #f7f7f7;
  p {
    margin: 0;
  }
}
hr {
  margin: 15px 0;
  border: 1px solid $dark;
}
code {
  background: $button-background;
  border-radius: 3px;
  padding: 0 4px;
}
pre {
  margin: 15px -12px;
  border: 2px solid unset;
  border-radius: 7px;
}
code,
pre {
  font-size: 16px;
  font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  color: $dark;
}
input {
  font-family: inherit;
  text-align: center;
  width: 100%;
  height: 35px;
  box-sizing: border-box;
  box-shadow: 0 1px 1px rgba(12, 13, 14, 0.15), inset 0 1px 0 0 #fff;
  transition: 0.15s ease-out;
}
input[type="text"] {
  font-size: inherit;
  color: $dark;
  text-decoration: italic;
  border: 1px solid #9fa6ad;
  border-radius: 3px;
}
input[type="text"]:focus {
}
.wrapper {
  max-width: 600px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 30px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -moz-hyphens: auto;
  hyphens: auto;
  text-align: left;
}

.content {
  h2,
  p,
  li,
  td {
    a {
      color: $dark;
      text-decoration: none;
      background-image: linear-gradient(
        120deg,
        $gradient-right 0%,
        $gradient-left 100%
      );
      background-repeat: no-repeat;
      background-size: 0 0;
      background-position: 100% 21%;
      transition: 0.15s ease-out;
      &:hover {
        background-size: 100% 100%;
        color: $light;
        &:after {
          color: $gradient-right;
        }
      }
      &::after {
        position: relative;
        content: "\FEFF°";
        margin-left: 0.1em;
        font-size: 90%;
        top: -0.1em;
        color: $light-highlight;
        font-feature-settings: "caps";
        font-variant-numeric: normal;
      }
    }
  }
  .anchor-tag {
    font-size: 70%;
    position: relative;
    bottom: 2.6px;
    background-size: 100% 0;
    background-position: 0 150%;
    &::after {
      content: "";
    }
  }
  .footnote-ref {
    background-size: 100% 1.5px;
    background-position: 0 90%;
    &::after {
      content: "";
    }
    &:hover {
      background-size: 100% 100%;
      color: #fff;
    }
  }
  .footnote-backref {
    background-size: 100% 1.5px;
    background-position: 0 90%;
    &::after {
      content: "";
    }
    &:hover {
      background-size: 100% 100%;
      color: #fff;
    }
  }
  .highlight {
    code {
      padding: 0px !important;
    }
    pre {
      overflow: auto;
      border-radius: 5px;
      padding: 12px;
      background: $button-background !important;
    }
    a {
      background-image: none;
      &::after {
        content: "";
      }
    }
  }
}

.button {
  font-family: inherit;
  font-style: normal !important;
  text-decoration: none !important;
  height: 25px;
  box-shadow: 0 1px 1px rgba(12, 13, 14, 0.15), inset 0 1px 0 0 #fff;
  display: inline-block;
  color: $dark;
  text-shadow: 0 1px 0 #fff;
  background-color: #e4e6e8;
  border: 1px solid #9fa6ad;
  border-radius: 3px;
  padding: 0px 4px 4px;
}

footer {
  padding: 20px 0 20px 0;
  text-align: center;
  line-height: 30px;
  margin-top: auto;
  margin-bottom: 25px;
  a {
    color: $dark;
  }
  a:visited {
    color: $dark;
  }
  .ring {
    font-size: 20px;
  }
  .boring_stuff {
    font-style: italic;
  }
}

@media (max-width: 55em) {
  html {
    max-width: 650px;
  }
}