html {

font-family: $font-main;
font-size: $small-font-size;
@media (min-width: $screen-medium) {
  font-size: $base-font-size;
}

// Optimise text for legibility
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;

}

body {

background-color: $color-background;
color: $color-text;
letter-spacing: $base-letter-spacing;
line-height: $base-line-height;
padding: 2rem 1.5rem;

}

p {

margin: 0 0 1rem;

}

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

color: $color-text-dark;
font-family: $font-headings;
font-weight: bold;
letter-spacing: $heading-letter-spacing;
line-height: $heading-line-height;
margin-bottom: .5rem;
margin-top: 0;

}

h1 {

font-size: 2rem;

}

h2 {

font-size: 1.6rem;

}

h3 {

font-size: 1.2rem;

}

ol + h1, ol + h2, ol + h3, p + h1, p + h2, p + h3, ul + h1, ul + h2, ul + h3 {

margin-top: 1.5rem;

}

//————————— // Emphasis //————————— em, strong {

padding-left: .1em;
padding-right: .1em;

}

em {

color: $color-text-light;

}

strong {

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

}

//————————— // Lists //————————— ol, ul {

margin-bottom: 1rem;
margin-top: 0;
padding-left: 1.5em;

}

.body li {

margin-bottom: .25rem;

}

ul ul {

margin-bottom: .5rem;
margin-top: .25rem;

}

//————————— // Code //————————— code, pre {

font-family: $font-mono;

}

code {

background-color: $color-grey-lightest;
border-radius: .15em;
color: $color-mono;
font-size: 90%;
font-style: normal;
font-weight: normal;
padding: .15em .3em;

@media (max-width: $screen-small) {
  word-break: break-word;
}

}

pre {

display: block;
font-size: .875rem;
line-height: 1.4;
margin: 0 0 1rem;
overflow-x: auto;
white-space: pre;
word-wrap: normal;

}

pre code {

background-color: transparent;
color: inherit;
padding: 0;

}

.highlight {

padding: 1rem 1.25rem;

}

.highlight pre {

font-size: .875rem;
margin-bottom: 0;

}

//————————— // Links //————————— a {

color: $color-link;
font-weight: inherit;
line-weight: inherit;
text-decoration: none;
-webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;

}

a:hover {

color: $color-link-hover;

}

h1 a {

border-bottom: 0;

}

.body a, .footer a {

border-bottom: 1px solid $color-link-underline;

}

.body a:hover, .footer a:hover {

border-bottom-color: $color-link-hover;

}

//————————— // Other elements //————————— abbr {

background-color: $color-grey-lighter;
border-radius: 3px;
color: $color-text;
display: inline-block;
font-size: 13px;
font-weight: bold;
padding: 3px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
text-transform: uppercase;

}

blockquote {

border-left: .5rem solid $color-grey-lighter;
color: $color-text-lighter;
margin: 0 2rem 1rem -2rem;
padding: 0 0 0 1.5rem;

}

blockquote p:last-child {

margin-bottom: 0;

}

hr {

background-color: $color-grey-lighter;
border: 0;
height: 1px;
margin: 2rem auto;
width: 100px;

}

figure, img {

border-radius: .25rem;
display: block;
margin: 0 auto 1rem;

}

figure > figcaption {

color: $color-text-lighter;
font-size: .85rem;
margin-top: -.5rem;
text-align: center;

}

figcaption > a {

color: $color-text-light;

}

figcaption > a:hover {

color: $color-text;

}