@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap&subset=latin-ext');

$font_size: 1rem;

$backdrop: #080808;
$background: #242424;
$text: #f7f7f7;
$links: #8acdea;
$footer: darken($text, 40%);
$meta: #93423E;
$header: #bde4a7;

html, body {
    background-color: $backdrop;
    color: $text;
    font-family: 'IBM Plex Mono', monospace;
    font-size: $font_size;
}

pre, code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: $font_size;
}

pre {
    background-color: $background !important;
    margin-left: 2rem;
    overflow-x: auto;
    overflow-y: hidden;
}

pre code {
    overflow-wrap: normal;
    white-space: pre;
}

.container {
    background-color: $background;
    padding: 1rem 1.5rem;
    margin: 1rem auto;
    max-width: 900px;
}

a, a:hover {
    color: $links;
}

nav a {
    font-weight: normal;
}

h1, h2, h3, h4, h5 {
    font-size: $font_size;
    font-weight: normal;
    color: $header;
    margin: 0.67rem 0;
}

h1 {
    
    padding-bottom: 0.67rem;
    border-bottom: 2px dashed $header;

    &::before {
        content: "# ";
    }
}

h2::before {
    content: "## "
}

h3::before {
    content: "### "
}

h4::before {
    content: "#### "
}

h5::before {
    content: "##### "
}

b,
strong {
  font-weight: bold;
}

em {
    font-style: normal;
    color: $background;
    background-color: $text;
}

blockquote *::before {
    content: "> ";
}

img {
    max-width: 100%;
}

ol {
    list-style-position: outside;
}

ul {
    list-style-type: "* ";
    list-style-position: outside;
}

header {
    margin-bottom: 1.5rem;
}

footer {
    color: $footer;
    border-top: 2px dashed $footer;
    margin-top: 1.5rem;

    em {
        background-color: $background;
        color: $text;
    }
}

.meta {
    color: $meta;
}