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

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

// html, body {
// 	font-family: $basefont;
// 	text-align: left;
//   font-size:  $fontsize;
// 	line-height: $lineheight;
// 	color: getFontColor();
//   font-weight: $fontweight_base;
// }

strong {
	font-weight: $fontweight_bold;
}

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

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

img {
  border-style: none;
  article & {
    max-width:100%;
    height: auto;
  }
}

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%);
    }
  }
}

h1, .title-1, .main-title,
.page-title {
  font-family: $titlefont;
  @include newTitle(3, $fontweight_hyper);
  color: $color-primary;
  letter-spacing: -3px;
  font-style: italic;
}

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: 0px 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;
}