*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --main-font: 'Inria Sans', sans-serif;
    --code-font: 'Fira Code', monospace;
    --primary-start: rgb(0, 140, 255);
    --primary-end: rgb(255, 81, 255);
    --background-color: rgb(0, 0, 0)
}

body {
    background-color: var(--background-color);

    font-family: var(--main-font);

    color: white;

    margin: 0;
}

a {
    color: rgb(0, 140, 255);
}

hr {
    background: linear-gradient(to right, var(--primary-start), var(--primary-end));
    border: 0;
    height: 1px;
}

header {
    text-align: center;
}

header h1 {
    font-family: var(--code-font);
    font-size: 60pt;

    background: linear-gradient(to right, var(--primary-start), var(--primary-end));
    background-clip: text;
}

@media screen and (max-width: 768px) {
    header h1 {
        font-size: 30pt;
    }
}

#header-padding {
    white-space: pre;
}


#header-text {
    color: transparent;
}

article {
    margin-left: auto;
    margin-right: auto;
    max-width: 60rem;
}



.post-list {
    margin-left: auto;
    margin-right: auto;
    display: grid;

    font-size: 26pt;

    gap: 5px;
}

@media screen and (max-width: 768px) {
    .post-list {
        font-size: 20pt;
    }
}

.post-list li {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.date {
    font-size: 14pt;
    color: rgb(150, 150, 150);
}

article .date {
    font-size: 20pt;
}

@media screen and (max-width: 768px) {
    .date {
        font-size: 1pt;
    }
}

.post-list li:hover {
    background: linear-gradient(to right, var(--primary-start), var(--primary-end));
    background-clip: text;
}

.post-list li:hover * {
    color: transparent;
}


.post-list a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.socials {
    display: grid;
    grid-auto-flow: column;
    text-align: center;
    list-style: none;
}

.socials li a {
    display: block;
    color: white;
    font-size: 4em;
}
@media screen and (max-width: 768px) {
    .socials li a {
        font-size: 2em;
    }
}


.socials li:hover {
    background: linear-gradient(to right, var(--primary-start), var(--primary-end));
    background-clip: text;
}
.socials li:hover a {
    color: transparent;
}


article {
    font-size: 16pt;
}

article.post {
    background: linear-gradient(to right, var(--primary-start), var(--primary-end));
    background-clip: text;
}

.post code {
    color: transparent
}

.post pre code {
    color: white;
}

.post-header {
    font-size: 50pt;
    margin: 0;
}

@media screen and (max-width: 768px) {
    .post-header {
        font-size: 30pt;
    }
}

.underline-wrapper {
    background: linear-gradient(to right, var(--primary-start), var(--primary-end));
    padding-bottom: 3px;
}

.main-nav {
    display: grid;
    background: black;
    font-size: 30pt;
    text-align: center;
    font-family: var(--code-font);
    font-weight: bold;
}

.site-title {
    background: linear-gradient(to right, var(--primary-start), var(--primary-end));
    background-clip: text;
    color: transparent;
}

/*  Post contents.

    These might need a little more magic since we don't have much control over the
    HTML generated by Pandoc.
*/

a.footnote-ref,
a.footnote-back {
    text-decoration: none;
}

div.sourceCode, pre:not(.sourceCode) {
    font-size: 15pt;
    overflow: auto;
    background-color: rgb(32, 36, 37);
    border-radius: 7px;
    padding-left: 1rem;
    padding-right: 1rem;
}

pre.sourceCode code {
    color: white;
}

pre:not(.sourceCode) {
    color:white;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.dot-output {
    background: black;
}

.dot-output svg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;

    stroke: white;
    fill: white;
}
.dot-output svg text {
    stroke: none;
}

blockquote {
    border-left: 5px solid #484848;
    margin-left: 0;
    padding-left: 1em;
    font-style: italic;
}

table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

thead {
    border-bottom-width: 1px;
    border-bottom-color: #484848;
    border-bottom-style: solid;
}

thead tr {
    border: none;
}

tr {
    border-bottom-width: 1px;
    border-bottom-color: #222222;
    border-bottom-style: solid;
}

/* Syntax highlighting */
/* Keywords, ???, Operators */
.kw,
.ot,
.op {
    color: rgb(43, 159, 255);
}

/* Constructors */
.dt {
    color: rgb(204, 142, 255);
}

/* Comments */
.co {
    color: rgb(161, 161, 161);
}

/* string/char literals */
.st, .ch {
    color: rgb(0, 255, 231);
}

/* TODO: dv(?), .dt (polaris repl) */



/* Katex does not support \textsc, so we use this hack to interpret \textmd as (effectively) \textsc.

   \textmd *usually* set's the font weight to 'medium'. This is the default, so the only use of this
   would be resetting the font weight inside something like \textbf. This has never been necessary on 
   this site so we resuse the CSS class to emulate \textsc instead. */
.katex .textmd {
    font-variant: small-caps;
}



.block {
    background: linear-gradient(to right, var(--primary-start), var(--primary-end));
    padding: 2px;
    border-radius: 5px;
}
.block-contents {
    background: var(--background-color);
    /* We cannot set padding top or bottom to 0 here as that would trigger margin collapse
       and ruin our background border trick */
    padding: 10px;
    border-radius: 5px;
}
.block-contents-inline-code-wrapper {
    background: linear-gradient(to right, var(--primary-start), var(--primary-end));
    background-clip: text;
}