@mixin paragraph() {
  padding:0;
  padding-bottom: $lineheight;
  margin: 0;
}

:root {
  @include accent-color($color-primary, get-color-light("primary"));
  --text-color:#{$color-font};
  --link-color-hover:#{transparentize($color-font, 0.85)};
  --link-color:#{darken($color-link, 10%)};
}

strong {
	font-weight: $fontweight_bold;
}

em {
  font-style: italic;
  font-weight: $fontweight_base;
}

mark {
  padding: 0.05rem 0.25rem;
  border-radius: 0.1rem;
}

a {
  color: var(--link-color);
  outline-color: $color-link;
  padding: 0.05rem;
  border-radius: 0.1rem;
  text-decoration: underline dashed 1px;
  text-underline-offset: 0.1rem;

  &:visited {
    color: var(--link-color);
  }

  &:hover,
  &:active {
    background-color: var(--link-color-hover);
    text-decoration: none;
  }
}

a:focus-visible, input:focus-visible {
  outline-style: dashed;
  outline-width: 2px;
  outline-offset: 1px;
}

mark {
  background-color: lighten($color-mark, 30%);
  color: inherit;
}

p, ul, ol {
  @include paragraph();
  &:last-child {
    padding-bottom:0;
  }
}

ul, ol {
  list-style: disc;
  ul, ol {
    padding-bottom:0;
    margin:0;
  }
  li {
    margin:0;
    margin-left: $lineheight;
    line-height: $lineheight;
  }

  &.nolist {
    display:inline;
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      display: inline;
      margin: 0;
      padding: 0;
    }
  }
}

::selection, ::-moz-selection {
  @include background-color($color-selection);
}

@mixin newTitle($size, $weight) {
  $lineNumber: ceil($size / 1.5);
  font-size: $size * 1rem;
  line-height: $lineNumber  * $lineheight;
  font-weight: $weight;
}

h1, h2, h3, h4, h5, h6, h7 {
  font-family: $basefont;
  text-align: left;
	font-size: 1em;
	padding:0;
	margin:0;
	font-weight: $fontweight_base;
  padding-bottom: $lineheight;
  a {
    border: none;
  }
}

sup, sub {
  & > a {
    color: $color-link;
    background-color:transparent;
    &:hover, &:focus, &:active {
      color: darken($color-link, 10%);
    }
  }
}

.main-title {
  font-family: $titlefont;
  @include newTitle(3.815, $fontweight_hyper);
}

h1, .title-1 {
  font-family: $titlefont;
  @include newTitle(2.441, $fontweight_hyper);
  color: $color-primary;
}

h2, .title-2 {
  @include newTitle(2.441, $fontweight_big);
}

h3, .title-3 {
  @include newTitle(1.953, $fontweight_bold);
}

h4, .title-4 {
  @include newTitle(1.563, $fontweight_hyper);
}

h5, .title-5 {
  @include newTitle(1.25, $fontweight_bold);
}

h6, .title-6 {
  @include newTitle(1, $fontweight_hyper);
}

hr {
  border: 1px solid rgba(1, 1, 1, 0.15);
  border-bottom: 1px;
  margin: 1.5em;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

.small-text,
small {
  font-size: 0.9em;
}

.time {
  font-style: italic;
  text-align: right;
  width: 100%;
  display: block;
}