// ============================================================================= // Base // =============================================================================

// Document // =============================================================================

*, *::before, *::after {

box-sizing: border-box;

}

html {

font-size: $base-font-size;

}

body {

margin: 0 auto;
font-family: $base-font-family;
-webkit-font-smoothing: antialiased;
font-weight: $base-font-weight;
line-height: $base-line-height;
color: $base-font-color;
background: $body-background;

}

// Typography // =============================================================================

p {

margin: 0;
font-weight: $base-font-weight;

}

b, strong {

font-weight: $base-font-weight-bold;

}

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

margin: 0;
line-height: 1.5;
text-rendering: optimizeLegibility;

}

h1 {

font-size: $base-font-size * 1.6;
font-weight: 400;
letter-spacing: -.03em;
color: $article-header-title-color;

}

h2 {

font-size: $base-font-size * 1.5;
font-weight: 400;

}

h3 {

font-size: $base-font-size * 1.3;
font-weight: 500;

}

h4 {

font-size: $base-font-size * 1.1;
font-weight: 500;

}

h5 {

font-size: $base-font-size * 1.17;
font-weight: 500;

}

h6 {

font-size: $base-font-size;

}

@include breakpoint(small) {

h1 {
  font-size: $base-font-size * 1.5;
}
h2 {
  font-size: $base-font-size * 1.35;
}
h3 {
  font-size: $base-font-size * 1.25;
}

}

a {

color: $base-accent-color;
text-decoration: underline;
transition: color $base-transition-speed linear;
&:hover,
&:active {
  color: $base-accent-highlighted-color;
}
&:focus {
  color: $base-accent-highlighted-color;
  outline: none;
}

}

ul, ol {

padding-left: 40px;
margin: 0;

}

abbr {

cursor: help;
border-bottom: 1px dotted $base-border-color;

}

blockquote {

padding: 0 0 4px 15px;
margin: 0 0 0 -20px;
font-family: $sans-serif;
font-size: 20px;
font-style: italic;
line-height: 1.6;
color: $gray-light;
border-left: 3px solid $gray-dark;

}

// Other // =============================================================================

hr {

margin: 0;
border-top: 0;
border-right: 0;
border-bottom: 1px solid $base-border-color;
border-left: 0;

}

img {

display: block;
max-width: 100%;
margin: 0;

}

::selection {

color: $white;
background-color: $gray-darkest;

}