/*

Resets

*/

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure {

margin: 0;
padding: 0;

}

/*

Basic styling

*/

html {

font-size: 16px;

}

body {

background-color: var(--color-body);
font-family: var(--font);
line-height: 1.5;

}

/*

Accessibility helpers

*/ .visually-hidden {

position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;

}

/*

Text Elements

*/

.content-body {

p,
pre,
blockquote,
dl,
ul,
ol,
figure,
iframe,
table,
.highlight {
  margin-bottom: var(--gap);
}

}

// Links a {

color: var(--color-link);
text-decoration: none;
transition: color 250ms ease;

&:hover,
&:focus {
  color: var(--color-link-hover);
  text-decoration: underline;
}

}

// Lists ul, ol {

margin-left: var(--gap);

ul,
ol {
  margin-bottom: 0;
}

}

dl {

dt + dd {
  margin-bottom: calc(var(--gap) / 2);
}

dt + dd + dt {
  margin-top: calc(var(--gap) / 2);
}

}

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

line-height: 1.2;
font-family: var(--font-headings);

}

h1 {

font-size: 2rem;

}

h2 {

font-size: 1.5rem;

}

h3 {

font-size: 1.25rem;

}

h4 {

font-size: 1rem;

}

h5 {

font-size: 0.875rem;

}

h6 {

font-size: 0.75rem;

}

// Code pre {

max-width: 100%;
overflow-x: auto;

}

// Media img, iframe, video, audio {

max-width: 100%;
border-radius: 3px;
box-shadow: 0 2px 5px var(--color-details);

}

// Tables table {

border: 1px solid var(--color-details-lighter);
border-radius: 3px;
border-collapse: collapse;
color: var(--color-details-darker);
width: 100%;

th,
td {
  border-bottom: 1px solid var(--color-details-lighter);
  padding: calc(var(--gap) / 4);
  text-align: left;
}

th {
  background: var(--color-details-lighter);
}

}

// Quotes

blockquote {

border-left: 4px solid var(--color-details-lighter);
padding-left: calc(var(--gap) / 2);
padding-top: calc(var(--gap) / 4);
padding-bottom: calc(var(--gap) / 4);
font-style: italic;
color: var(--color-details-darker);

> :last-child {
  margin-bottom: 0;
}

}

// Horizontal rule hr {

width: 250px;
height: 3px;
margin: calc(var(--gap) * 2) auto;
background-color: var(--color-details-lighter);
border: none;
border-radius: 3px;

}

// Forms input, input, input, input, input, input, input, input, input, input, input, textarea, button {

-webkit-appearance: none;
-moz-appearance: none;
border: none;
border-radius: 0;
box-shadow: none;
background: var(--color-bg);
padding: 5px;
margin: 0;
font: inherit;

}

input, input, input, input, input, input, input, input, textarea {

border-bottom: 3px dashed var(--color-details-lighter);
transition: border-bottom-color 250ms ease;

&:hover,
&:focus {
  outline: none;
  border-bottom-color: var(--color-link);
}

}

input, input, input, button {

box-shadow: inset 0 0 0 var(--color-details-lighter);
border-bottom: 3px solid var(--color-details-lighter);
color: var(--color-link);
transition-property: color, box-shadow, border-bottom-color;
transition-duration: 250ms;
transition-timing-function: ease;
padding-left: 10px;
padding-right: 10px;

&:hover,
&:focus {
  cursor: pointer;
  box-shadow: inset 0 -2.5em 0 var(--color-link);
  border-bottom-color: var(--color-link-hover);
  color: var(--color-details-lighter);
}

&:active {
  box-shadow: inset 0 -2.5em 0 var(--color-link-hover);
}

}