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

$font_size: 0.96rem;
$line-height: 1.5rem;

$backdrop: #0D0221;
$background: #0D0221;
$text: #ffffff;
$links: #F6019D;
$footer: #540D6E;
$meta: $text;
$header: #2DE2E6;
$highlight: #F8FFA3;

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

.important {
  background-color: $highlight;
  color: $background;
  width: 100%;
  display: block;
  padding: 1rem;
  text-align: center;
}

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

.privacy-notice {
    border-top: 2px dashed $footer;
    margin-top: 1.5rem;

    .buymeacoffee {
        background-color: #FF6C11;
        color: #fff;
        text-decoration: none;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
}

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;
    font-weight: bold;
}

.reading-time {
  float: right;
}

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

code {
    color: #ecba42;
}

code::before,
code::after {
    content: "`";
}

pre > code::before,
pre > code::after {
    content: "";
}

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

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

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

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

table td::before,
table th::before {
    content: " | ";
    color: $footer;
    font-weight: normal;
}

.flex-columns {
    display: flex; 
    flex-direction: row;
}

.flex-column {
    &#popular_posts {
        order: 1;
    }
    &#recent_posts {
        order: 2;
    }
}