:root {
  --monospace-font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro',
    Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --header-font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa,
    Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri,
    source-sans-pro, sans-serif;
  --font-family: system-ui, sans-serif;

  /* https://github.com/navarasu/onedark.nvim/blob/master/lua/onedark/palette.lua */
  --black: #0e1013;
  --bg0: #1f2329;
  --bg1: #282c34;
  --bg2: #30363f;
  --bg3: #323641;
  --bg_d: #181b20;
  --bg_blue: #61afef;
  --bg_yellow: #e8c88c;
  --fg: #a0a8b7;
  --purple: #bf68d9;
  --green: #8ebd6b;
  --orange: #cc9057;
  --blue: #4fa6ed;
  --yellow: #e2b86b;
  --cyan: #48b0bd;
  --red: #e55561;
  --grey: #535965;
  --light_grey: #7a818e;
  --dark_cyan: #266269;
  --dark_red: #8b3434;
  --dark_yellow: #835d1a;
  --dark_purple: #7e3992;
}

@media (prefers-color-scheme: light) {
  :root {
    --black: #101012;
    --bg0: #fafafa;
    --bg1: #f0f0f0;
    --bg2: #e6e6e6;
    --bg3: #dcdcdc;
    --bg_d: #c9c9c9;
    --bg_blue: #68aee8;
    --bg_yellow: #e2c792;
    --fg: #383a42;
    --purple: #a626a4;
    --green: #50a14f;
    --orange: #c18401;
    --blue: #4078f2;
    --yellow: #986801;
    --cyan: #0184bc;
    --red: #e45649;
    --grey: #a0a1a7;
    --light_grey: #818387;
    --dark_cyan: #2b5d63;
    --dark_red: #833b3b;
    --dark_yellow: #7c5c20;
    --dark_purple: #79428a;
  }
}

/* Base style {{{ */
html {
  font-family: var(--font-family);
  font-weight: normal;
  color: var(--fg);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bg0);
}

a:link { color: var(--blue); }
a:visited { color: var(--purple); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--header-font-family);
  color: var(--cyan);
}
/* }}} */

/* Header {{{ */
@media screen and (min-width: 768px) {
  body > header h1 { font-size: 10rem; }
}

body > header {
  text-align: center;
  padding: 3rem 0;
  background: var(--bg2);
}

body > header a::before { content: ''; }
body > header a::after { content: ''; }
body > header a:link,
body > header a:visited,
body > header a:active {
  color: var(--fg);
  text-decoration: none;
}

body > header h1 {
  color: var(--fg);
  font-size: 8rem;
  margin-top: 0;
  margin-bottom: 0;
}
/* }}} */

/* Nav {{{ */
@media screen and (min-width: 800px) {
  nav a { display: inline-block; }
}

@media screen and (max-width: 799px) {
  nav a { display: block; }
}

nav {
  font-size: 2rem;
  background: var(--bg1);
  padding: 0;
  text-align: center;
}

nav a { padding: 0.5rem 1rem; }
nav a.active { text-decoration: underline !important; }
nav a:hover { background: var(--bg2); }
nav a:link,
nav a:visited,
nav a:active {
  color: var(--fg);
  text-decoration: none;
}
/* }}} */

/* Content {{{ */
.content {
  box-sizing: border-box;
  flex-grow: 1;
  margin: 0 1rem 1rem;
  font-size: 1.5rem;
}

.content img {
  max-width: 100%;
  display: block;
  margin: auto;
}

@media screen and (min-width: 768px) {
  .content {
    width: 100%;
    max-width: 960px;
    margin: 0 auto 1rem;
    padding: 0 1rem;
  }
}
/* }}} */

/* Footer {{{ */
.footer {
  width: 100%;
  padding: 1rem 0;
  background: var(--bg2);
  text-align: center;
}

.footer a { display: inline-block };
.footer a:link,
.footer a:visited,
.footer a:active {
  color: #F5F5F5;
  text-decoration: none;
}
/* }}} */

/* Post {{{ */
.post--header h1 { margin-bottom: 0; }
.post--header div { color: var(--light_grey); }
/* }}} */

/* Home Feed {{{ */
.home--feed h1 { margin-bottom: 0; }
.home--feed div { color: var(--light_grey); }
/* }}} */

/* HTML -> Markdown Styling {{{ */
h1::before { color: var(--fg); content: "# "; }
h2::before { color: var(--fg); content: "## "; }
h3::before { color: var(--fg); content: "### "; }
h4::before { color: var(--fg); content: "#### "; }
h5::before { color: var(--fg); content: "##### "; }
h6::before { color: var(--fg); content: "###### "; }

a::before { content: "["; }
a::after { content: "]"; }

li::marker { color: var(--red); }
ul li::marker { content: "- "; }
/* }}} */

/* Code {{{ */
code {
  font-family: var(--monospace-font-family);
  background: var(--bg1);
  white-space: pre;
}

p > code {
  color: var(--purple);
  padding: 0 0.25rem;
}
p > code::before { content: "`"; }
p > code::after { content: "`"; }

pre {
  font-family: var(--monospace-font-family);
  background: var(--bg1);
  overflow-y: hidden;
}
pre > code {
  border-radius: 0;
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
}
/* }}} */

/* One Dark Theme {{{ */
:root {
  --code-primary: var(--fg);
  --code-secondary: var(--blue);
  --code-background: var(--black);
  --code-lineno-background: var(--bg0);
  --code-selected: var(--bg3);
  --code-operator: var(--fg);
  --code-keyword: var(--purple);
  --code-namespace: var(--yellow);
  --code-comment: var(--grey);
  --code-scoped: var(--yellow);
  --code-numeric: var(--orange);
  --code-string: var(--green);
}

.highlight {
  color: var(--code-primary);
  margin: 0;
}

.highlight > code { color: var(--code-secondary); }

.highlight .hll { background-color: var(--code-selected); }

.highlight .lineno {
  background-color: var(--code-lineno-background);
  color: var(--code-secondary);
}

/* $code-- Generics $code-- */
.highlight .ge { font-style: italic; } /* emph */
.highlight .gs { font-weight: bold; } /* strong */

/* $code-- Operators $code-- */
.highlight .o { color: var(--code-operator); } /* Operator */
.highlight .ow { color: var(--code-operator); } /* Word */

/* $code-- Comments $code-- */
.highlight .c { color: var(--code-comment); font-style: italic; } /* Comment */
.highlight .cm { color: var(--code-comment); font-style: italic; } /* Multi-line */
.highlight .cp { color: var(--code-comment); font-style: italic; } /* Preproc */
.highlight .c1 { color: var(--code-comment); font-style: italic; } /* Single */
.highlight .cs { color: var(--code-comment); font-style: italic; } /* Special */

/* $code-- Names $code-- */
.highlight .n { color: var(--code-primary); } /* Name */
.highlight .py { color: var(--code-primary); } /* Property */
.highlight .nl { color: var(--code-primary); } /* Label */
.highlight .ni { color: var(--code-primary); } /* Entity */
.highlight .nb { color: var(--code-primary); } /* Builtin */ /* shell commands */
.highlight .bp { color: var(--code-primary); } /* Builtin.Pseudo */
.highlight .nf { color: var(--code-secondary); } /* Function */
.highlight .na { color: var(--code-secondary); } /* Attribute */
.highlight .nx { color: var(--code-secondary); } /* Other */
.highlight .nc { color: var(--code-namespace); } /* Class */
.highlight .nn { color: var(--code-namespace); } /* Namespace */
.highlight .no { color: var(--code-scoped); } /* Constant */
.highlight .ne { color: var(--code-scoped); } /* Exception */
.highlight .nd { color: var(--code-operator); } /* Decorator */
.highlight .nt { color: var(--code-operator); } /* Tag */

/* $code-- Keywords $code-- */
.highlight .kn { color: var(--code-operator); } /* Namespace */
.highlight .k { color: var(--code-keyword); } /* Keyword */
.highlight .kc { color: var(--code-keyword); } /* Constant */
.highlight .kd { color: var(--code-keyword); } /* Declaration */
.highlight .kp { color: var(--code-keyword); } /* Pseudo */
.highlight .kr { color: var(--code-keyword); } /* Reserved */
.highlight .kt { color: var(--code-namespace); } /* Type */

/* $code-- Variables $code-- */
.highlight .nv { color: var(--code-scoped); } /* Variable */
.highlight .vc { color: var(--code-scoped); } /* Class */
.highlight .vg { color: var(--code-scoped); } /* Global */
.highlight .vi { color: var(--code-scoped); } /* Instance */

/* $code-- Numerals $code-- */
.highlight .m { color: var(--code-numeric); } /* Number */
.highlight .il { color: var(--code-numeric); } /* Long */
.highlight .mf { color: var(--code-numeric); } /* Float */
.highlight .mh { color: var(--code-numeric); } /* Hex */
.highlight .mi { color: var(--code-numeric); } /* Integer */
.highlight .mo { color: var(--code-numeric); } /* Oct */

/* $code-- Strings $code-- */
.highlight .s { color: var(--code-string); } /* String */
.highlight .sr { color: var(--code-string); } /* Regex */
.highlight .sb { color: var(--code-string); } /* Backtick */
.highlight .s2 { color: var(--code-string); } /* Double */
.highlight .sh { color: var(--code-string); } /* Heredoc */
.highlight .sx { color: var(--code-string); } /* Other */
.highlight .s1 { color: var(--code-string); } /* Single */
.highlight .ss { color: var(--code-string); } /* Symbol */
.highlight .se { color: var(--code-numeric); } /* Escape */
.highlight .si { color: var(--code-numeric); } /* Interpol */
.highlight .sc { color: var(--code-primary); } /* Char */
.highlight .sd { color: var(--code-comment); } /* Doc */

/* $code-- Other Literals $code-- */
.highlight .l { color: var(--code-numeric); } /* Literal */
.highlight .ld { color: var(--code-string); } /* Date */

/* $code-- Typographic Elements $code-- */
.highlight .p { color: var(--code-primary); } /* Punctuation */
.highlight .w { color: var(--code-primary); } /* Whitespace */ /* shouldn't this have a background-color instead ? */

/* $code-- Others $code-- */
.highlight .err { color: var(--code-scoped); } /* Error */
.highlight .gp { color: var(--code-namespace); } /* shell prompt */

/* $code-- Style $code-- */
.highlight .gi { color: var(--code-string); } /* inserted */
.highlight .gd { color: var(--code-scoped); } /* deleted */
.highlight .gh { color: var(--code-primary); font-weight: bold; } /* heading */
.highlight .gu { color: var(--code-operator); font-weight: bold; } /* subheading */
/* }}} */