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

$font_size: 1.05rem;

$backdrop: #080808;
$background: #242424;
$text: #f7f7f7;
$links: #6C939F;
$footer: darken($text, 40%);
$meta: #AA4A39;
$header: #9AC361;

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;
    color: $footer;
}

pre > code {
    overflow-wrap: normal;
    white-space: pre;
    color: $text;
}

pre {
    background-color: $background !important;
    margin-left: 2.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    line-height: 1.25rem;
}

pre::before {
    display: block;
    content: "```";
    color: $footer;
}
pre::after {
    display: block;
    content: "```";
    color: $footer;
}

.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;
}

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;
    }
}

small {
    font-size: 100%;
    color: $footer;
}

.meta {
    color: $meta;
}

.reading-time {
  float: right;
}

hr {
    border: none;
    border-top: 2px dashed $footer;
}