$margin-bottom: $spacing * 4 / 5;

html {

color: $text-color;
background-color: $background-color;
font-family: $font-family;
font-size: $font-size;
font-weight: $font-weight-normal;
font-synthesis: none;
font-feature-settings: 'kern';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

body {

margin: 0;
padding: 0;
min-width: $min-body-width;
color: $text-color;
background-color: $background-color;

}

h1, h2, h3, h4, h5, h6, ul, ol, p, blockquote, pre {

margin: 0;
padding: 0;

}

h1, h2, h3, h4, h5, h6 {

color: $text-bright-color;

}

h1 {

font-weight: 700;
font-size: $font-size * 2.25;
margin-bottom: $spacing / 1.5;

}

h2 {

font-weight: 600;
font-size: $font-size * 2;
margin-bottom: $spacing / 1.75;

}

h3 {

font-weight: 500;
font-size: $font-size * 1.75;
margin-bottom: $spacing / 2;

}

h4 {

font-weight: 400;
font-size: $font-size * 1.5;
margin-bottom: $spacing / 2.25;

}

h5 {

font-weight: 400;
font-size: $font-size * 1.25;
margin-bottom: $spacing / 2.5;

}

h6 {

font-weight: 400;
font-size: $font-size * 1;
margin-bottom: $spacing / 2.75;

}

hr {

border: none;
border-bottom: 1px solid $border-color;
margin-top: $spacing * 1.5;
margin-bottom: $spacing * 1.5;

}

strong, b {

font-weight: $font-weight-bold;
color: $text-bright-color;

}

p {

margin: 0;
padding: 0;
margin-bottom: $margin-bottom;
line-height: $font-size * 2.25;

}

}

em {

font-family: $font-family-italic;

}

section {

margin-top: $spacing * 2;
@media screen and (max-width: $medium-breakpoint - 1) {
  margin-top: $spacing;
}

}

blockquote {

position: relative;
padding-left: $spacing / 1.25;
margin-bottom: $spacing * 2 / 3;
font-style: italic;
font-family: $font-family-italic;
letter-spacing: 0.5px;

&:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 9px;
  width: 3px;
  border-radius: 1px;
  background-color: $quote-border-color;
}

p {
  &:first-child::first-letter {
    font-size: 1.5 * $font-size;
  }

  margin-bottom: 0px;

  > code::first-letter {
    font-size: inherit;
  }
}

}

ul {

padding-left: $spacing * 2 / 3;

li {
  margin-bottom: $margin-bottom / 1.5;
  line-height: $font-size * 1.5;

  p {
    margin: 0;
    line-height: initial;
  }
}

ol, ul {
  margin-top: $margin-bottom / 1.5;
}

}

ol {

padding-left: 26px;

li {
  margin-bottom: $margin-bottom / 1.5;
  line-height: $font-size * 1.5;

  p {
    margin: 0;
    line-height: initial;
  }
}

ol, ul {
  margin-top: $margin-bottom / 1.5;
}

}

pre {

padding: $spacing / 3 $spacing / 2;
font-family: $font-monospace;
font-size: $font-size - 3;
font-variant-ligatures: common-ligatures;
line-height: round(($font-size - 2) * 1.6);
background-color: $code-background-color;
margin-bottom: $spacing / 2;
border-radius: 4px;

code {
  background-color: transparent;
  padding: 0;
  color: $text-color;
}

}

code {

padding: ($spacing / 10) round($spacing / 4);
border-radius: 4px;
background-color: $code-background-color;
font-family: $font-monospace;
color: $accent-color;
word-break: keep-all;
word-wrap: break-word;
line-height: $font-size * 1.75;

}

table {

width: 100%;
border-collapse: collapse;
margin-bottom: $margin-bottom;

td, th {
  border: 1px solid $border-color;
}

td {
  padding: ($spacing / 2.5) ($spacing / 1.5);
}

th {
  color: $text-bright-color;
  font-weight: $font-weight-bold;
  padding: ($spacing / 2) ($spacing / 1.5);
}

}

a {

position: relative;
text-decoration: none;
color: $link-color;

&:hover {
  > * {
    color: $accent-color !important;
  }
}

&:visited {
  color: $link-visited-color;
}

}

::selection {

background-color: rgba($accent-color, 0.2)
// background-color: #b6c253;

}