/**

* Reset some basic elements
*/

body {

margin: 0;
padding: 0;

}

h1, h2, h3, h4, h5, h6, p, hr, dl, dd, ol, ul {

margin: $spacing-unit 0;
padding: 0;

}

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

font-weight: $base-font-weight;
font-family: $header-font-stack;
margin-top: $spacing-unit*2;

}

pre, code, blockquote, figure, table {

margin: $spacing-unit*2 0;
padding: 0;

}

/**

* Basic styling
*/

body {

font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-stack;
color: $text-color;
background-color: $background-color;
display: flex;
min-height: 100vh;
flex-direction: column;

}

h1 {

text-align: center;
line-height: 1.1;
font-family: $header-font-stack;
margin: 1em 0 0.4em 0;

}

p {

margin: 1em 0;

}

img {

max-width: 100%;
vertical-align: middle;

}

figure {

& > img {
    display: block;
    margin-left: 50%;
    transform:translateX(-50%);
}

> figcaption {
    text-align: center; 
    font-size: $small-font-size;
    color: $text-color-light;
}

}

/**

*/ ul, ol {

margin-left: $spacing-unit;

}

li {

> ul, > ol {
    margin-bottom: 0;
}

}

ol {

li {
    list-style-type: none;
    counter-increment: list;
    position: relative;
    margin-left: 1.2em;
}

li:before {
    font-weight: bold;
    content: counter(list) ".";
    position: absolute;
    left: -2.5em;
    width: 2em;
    text-align: right;
    color: $brand-color;
}

.li01:before { content: '1.' }
.li02:before { content: '2.' }
.li03:before { content: '3.' }
.li04:before { content: '4.' }
.li05:before { content: '5.' }
.li06:before { content: '6.' }
.li07:before { content: '7.' }
.li08:before { content: '8.' }
.li09:before { content: '9.' }
.li10:before { content: '10.' }
.li11:before { content: '11.' }
.li12:before { content: '12.' }
.li13:before { content: '13.' }
.li14:before { content: '14.' }
.li15:before { content: '15.' }
.li16:before { content: '16.' }
.li17:before { content: '17.' }
.li18:before { content: '18.' }
.li19:before { content: '19.' }
.li20:before { content: '20.' }
.li21:before { content: '21.' }
.li22:before { content: '22.' }
.li23:before { content: '23.' }
.li24:before { content: '24.' }
.li25:before { content: '25.' }
.li26:before { content: '26.' }
.li27:before { content: '27.' }
.li28:before { content: '28.' }
.li29:before { content: '29.' }
.li30:before { content: '30.' }
.li31:before { content: '31.' }

}

ul {

li {
    color: $text-color;
    list-style-type: none;
}

li:before {
    content: '\2022 '; // Unicode bullet symbol 
    color: $brand-color;
    padding-right: 0.5em;
}

}

/**

*/ a {

color: $brand-color;
text-decoration: none;
font-weight: bold;

&:visited {
    color: darken($brand-color, 15%);
}

&:hover {
    color: $text-color;
    text-decoration: underline;
}

}

/**
 * Blockquotes
 */

blockquote {

color: $grey-color-dark;
border-left: 4px solid $brand-color;
padding-left: $spacing-unit;
font-size: $base-font-size * 1.125;
letter-spacing: -1px;
font-style: italic;

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

}

/**
 * Code formatting
 */

pre, code {

font-size: $base-font-size * 0.9375;
border: 1px solid $grey-color-light;
border-radius: 3px;
background-color: #eef;

}

code {

padding: 1px 5px;

}

pre {

padding: 8px 12px;
overflow-x: auto;

> code {
    border: 0;
    padding-right: 0;
    padding-left: 0;
}

}

/**
 * Tables
 */

table {

width: 100%;
text-align: $table-text-align;
color: $text-color-light;
border-collapse: collapse;
border: 1px solid $grey-color-light;
font-size: $small-font-size;
tr {
    &:nth-child(even) {
    background-color: lighten($grey-color-light, 6%);
    }
}
th, td {
    padding: ($spacing-unit / 3) ($spacing-unit / 2);
}
th {
    background-color: lighten($grey-color-light, 3%);
    border: 1px solid darken($grey-color-light, 4%);
    border-bottom-color: darken($grey-color-light, 12%);
    font-size: $smaller-font-size;
}
td {
    border: 1px solid $grey-color-light;
}
caption {
    font-size: $small-font-size;
    caption-side: bottom;
}

}

/**

*/ %clearfix:after {

content: "";
display: table;
clear: both;

}

.invert-text {

color: $background-color;

}