@font-face {
    font-family: 'League Spartan';
    src: url('../fonts/LeagueSpartanVariable.woff2') format("woff2-variations");
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    src: url('../fonts/fa-solid-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: block;
}

@font-face {
  font-family: 'Hack';
  src: url('../fonts/hack-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Hack';
  src: url('../fonts/hack-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Hack';
  src: url('../fonts/hack-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Hack';
  src: url('../fonts/hack-bolditalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
}

/* NORD THEME COLORS */
/*
 * https://nordtheme.com
 * Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
 * Copyright (c) 2016-present Sven Greb <development@svengreb.de>
 * License: MIT
 */

:root {
  /* Used for dark accents, on the nord website, but not in the package?? */
  --nord-dark: #292e39;

  /* Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.  */
  --nord0: #2e3440;

  /* Used as a lighter background color for UI elements like status bars.  */
  --nord1: #3b4252;

  /* Used as line highlighting in the editor.  In the UI scope it may be used as selection- and highlight color.  */
  --nord2: #434c5e;

  /* Used for comments, invisibles, indent- and wrap guide marker.  In the UI scope used as pseudoclass color for disabled elements.  */
  --nord3: #4c566a;

  /* Main color for text, variables, constants and attributes.  In the UI scope used as semi-light background depending on the theme shading design.  */
  --nord4: #d8dee9;

  /* Used as a lighter background color for UI elements like status bars.  Used as semi-light background depending on the theme shading design.  */
  --nord5: #e5e9f0;

  /* Used for punctuations, carets and structuring characters like curly- and square brackets.  In the UI scope used as background, selection- and highlight color depending on the theme shading design.  */
  --nord6: #eceff4;

  /* Used for classes, types and documentation tags.  */
  --nord7: #8fbcbb;

  /* Represents the accent color of the color palette.  Main color for primary UI elements and methods/functions.
  Can be used for
    - Markup quotes
    - Markup link URLs */
  --nord8: #88c0d0;

  /* Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and punctuations like (semi)colons,commas and braces.  */
  --nord9: #81a1c1;

  /* Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).  */
  --nord10: #5e81ac;

  /* Used for errors, git/diff deletion and linter marker.  */
  --nord11: #bf616a;

  /* Used for annotations.  */
  --nord12: #d08770;

  /* Used for escape characters, regular expressions and markup entities.  In the UI scope used for warnings and git/diff renamings. */
  --nord13: #ebcb8b;

  /* Main color for strings and attribute values. In the UI scope used for git/diff additions and success visualizations. */
  --nord14: #a3be8c;

  /* Used for numbers. */
  --nord15: #b48ead;

  --box-shadow: rgba(15, 17, 21, 0.2) 0px 3px 6px 0px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: var(--nord0);
        --foreground: var(--nord4);
        --link-color: var(--nord8);
        --title-underline: var(--nord2);
        --special-box: var(--nord1);
        --footnote-box-back: var(--nord7);
        --footnote-box-fore: var(--nord0);
        --footnote-box-link: var(--nord3);
        --blockquote: var(--nord9);
        --code-bg: var(--nord-dark);
        --inline-code-bg: var(--nord-dark);
        --post-meta: var(--nord15);
        --header-color: var(--nord13);
        --summary-filter: brightness(70%);
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --background: var(--nord4);
        --foreground: var(--nord0);
        --link-color: var(--nord10);
        --title-underline: var(--nord2);
        --special-box: var(--nord5);
        --footnote-box-back: var(--nord7);
        --footnote-box-fore: var(--nord1);
        --footnote-box-link: var(--nord3);
        --blockquote: var(--nord9);
        --code-bg: var(--nord2);
        --inline-code-bg: var(--nord8);
        --post-meta: var(--nord11);
        --header-color: var(--nord12);
        --summary-filter: brightness(140%);
    }
}

/* Style the page */
html {
    font-family: 'League Spartan', sans-serif;
    font-size: 14pt;
    min-height: 100%;
}


body {
    color: var(--foreground);
    background-color: var(--background);
    padding: 0 30px;
    display: flex;
    min-height: calc(100vh - 30px);
    flex-direction: column;
}

main {
    max-width: calc(1000px - (30px * 2));
    margin: auto;
    flex: 1;
}

body>hr {
    width: 100%;
}

footer {
    width: 60%;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

footer svg {
    width: 2em;
    height: auto;
}

h2{
  margin-top: 2em;
}

h3, h4{
    margin-top: 1em;
}

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

h1.main-title {
    font-size: 2.5em;
    border-bottom: 1px solid var(--title-underline);
    padding-bottom: 0.25em;
}
p.original-url {
    background-color: var(--special-box);
    padding: 0.75em;
    border-radius: 3px;
    box-shadow: var(--box-shadow);
}

div.footnote-box {
    background-color: var(--footnote-box-back);
    color: var(--footnote-box-fore);
    padding: 0.75em;
    margin: 0.3em 0;
    border-radius: 3px;
    box-shadow: var(--box-shadow);
}

div.footnote-box a {
    color: var(--footnote-box-link);
}

blockquote{
  border-left: 5px solid var(--blockquote);
  padding: 0 1.5em;
  margin: 0.5em 1.5em;
}

blockquote,figure,.katex-html {
    overflow: auto hidden;
}

code {
    overflow-wrap: anywhere;
    font-size: 11pt;
}

.highlight {
    overflow-x: auto;
    border-radius: 3px;
    padding: 0 0.75em;
    box-shadow: var(--box-shadow);
    background: var(--code-bg);
}

/* 
 Adding line height helps with the latex 
 font from being cramped
*/
p{
  line-height: 1.4em;
}

code, pre{
  font-family: 'Hack', monospace;
}

pre{
  font-size: 0.9em;
}

h2 code, li code, p code{
  color: var(--foreground);
  background: var(--inline-code-bg);
  padding: 3px;
  border-radius: 3px;
  font-size: 0.75em;
  font-size: 0.75em;
}

li.post-list-item {
    list-style: none;
}

div.post-info {
    overflow: auto;
}

div.post-info > div {
    display: inline;
    padding-right: 2em;
    color: var(--post-meta);
    white-space: nowrap;
}

div.post-info > div:last-child {
    /* Don't pad the last one */
    padding-right: initial;
}

div.post-tags a {
    color: var(--post-meta);
}

div.post-author::before {
    content: "\0000a0";
    color: var(--foreground);
    font-family: 'Font Awesome 6 Free';
}

div.post-date::before {
    content: "\0000a0";
    color: var(--foreground);
    font-family: 'Font Awesome 6 Free';
}

div.post-tags::before {
    content: "\0000a0";
    color: var(--foreground);
    font-family: 'Font Awesome 6 Free';
}

div.post-list-entry a {
    text-decoration: none;
}

div.post-list-entry blockquote {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    filter: var(--summary-filter);
}

div.post-list-entry {
    margin-bottom: 2em;
}

header {
    display: block;
    padding-bottom: 0;
    margin-bottom: 0;
}

header nav a {
    text-decoration: none;
    font-size: 16pt;
    color: var(--header-color);
}

nav .nav-right a {
    padding-right: 0.7em;
}

nav .nav-right a:last-child {
    padding-right: 0;
}

header nav .nav-left {
    font-weight: bold;
}

header nav {
    display: flex;
    justify-content: space-between;
    margin-top: 2em;
}