:root {
    --primary-color: #f6eee4;
    --primary-text-color: #543631;
    --primary-text-color-over: #000;
    --primary-link-color: #d46e13;
    --primary-background-color: #fcfaf6;
    --secondary-color: #fcfaf6;
    --secondary-text-color: #303030;
    --toc-highlight-text-color: #d46e13;
    --toc-background-color: white;
    --footer-background-color: #202020;
    --footer-text-color: #fcfcfc;
    --shadow-color: #ddd;
    --code-mark-background-color: #ffc87050;
    --header-font-family: "Fira Sans", sans-serif;
    --text-font-family: "Fira Sans", sans-serif;
}

@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/FiraSans-Regular.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/assets/fonts/FiraSans-Medium.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/assets/fonts/FiraSans-SemiBold.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Alfa Slab One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/AlfaSlabOne-Regular.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.box-shadow {
    box-shadow: 0 2px 10px 2px var(--shadow-color);
}

html {
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-color: var(--primary-background-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1 {
    font-family: var(--header-font-family);
    font-size: 32px;
    font-weight: 600;
    color: var(--primary-text-color);
    padding: 10px 0 25px 0;
}

h2,
header>nav>.nav-item {
    font-family: var(--header-font-family);
    font-size: 20px;
    font-weight: 500;
    color: var(--primary-text-color);
}

main {
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
}

header {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    padding: 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header>* {
    display: flex;
    flex-wrap: wrap;
}

.logo {
    font-family: "Alfa Slab One", serif;
    font-size: 32px;
    color: var(--primary-text-color);
    display: flex;
    align-items: center;
}

.logo img {
    width: 60px;
}

.nav-item {
    margin: 0 10px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}

header > nav {
    justify-content: end;
}

.nav-item:hover {
    color: var(--primary-text-color-over);
}

.content {
    display: flex;
    padding: 40px 20px;
    flex-grow: 1;
}

@media screen and (min-width: 1280px) {
    .content {
        max-width: 60%;
        min-width: 800px;
    }
}

nav.toc {
    max-width: 260px;
    min-width: 140px;
}

nav.toc .toc-item {
    font-family: var(--text-font-family);
    font-size: 16px;
    font-weight: 400;
    color: var(--secondary-text-color);
    letter-spacing: .1px;
    padding: 10px 20px;
}

nav.toc .toc-item a,
nav.toc .toc-item-child a {
    color: var(--secondary-text-color);
}

nav.toc .toc-item a.active,
nav.toc .toc-item-child a.active {
    color: var(--toc-highlight-text-color);
}

nav.toc .toc-item-child {
    padding: 0 30px 5px;
    color: var(--secondary-text-color);
}

nav.toc .toc-sticky {
    border-radius: 3px;
    border-left: 5px solid var(--primary-color);
    background-color: var(--toc-background-color);
    position: sticky;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 40px;
    padding: 0px 0 20px;
    max-height: 100vh;
    overflow: auto;
}

footer {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--footer-background-color);
    color: var(--footer-text-color);
}

footer a {
    color: inherit;
    text-decoration: underline;
}

a {
    color: var(--primary-link-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

main a:link:not([href^="https://kantodb.com/"]):not([href^="http://127\.0\.0\.1:"]):not([href^="#"]):not([href^="/"])::after {
    margin: 2px;
    /*
    The SVG is from <https://uxwing.com/open-external-link-icon/>.
    No attribution required.
    */
    content: url("data:image/svg+xml,%3Csvg version='1.1' width='10px' height='10px' viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m110.6 72.58c0-3.19 2.59-5.78 5.78-5.78s5.78 2.59 5.78 5.78v33.19c0 4.71-1.92 8.99-5.02 12.09s-7.38 5.02-12.09 5.02h-87.94c-4.71 0-8.99-1.92-12.09-5.02s-5.02-7.38-5.02-12.09v-88.58c0-4.71 1.92-8.99 5.02-12.09s7.38-5.02 12.09-5.02h32.98c3.19 0 5.78 2.59 5.78 5.78s-2.59 5.78-5.78 5.78h-32.98c-1.52 0-2.9 0.63-3.91 1.63-1.01 1.01-1.63 2.39-1.63 3.91v88.58c0 1.52 0.63 2.9 1.63 3.91 1.01 1.01 2.39 1.63 3.91 1.63h87.95c1.52 0 2.9-0.63 3.91-1.63s1.63-2.39 1.63-3.91zm1.82-55.12-58.41 59.14c-2.23 2.27-5.89 2.3-8.16 0.07s-2.3-5.89-0.07-8.16l56.16-56.87h-23.38c-3.19 0-5.78-2.59-5.78-5.78s2.59-5.78 5.78-5.78h26.5c5.12 0 11.72-0.87 15.65 3.1 2.48 2.51 1.93 22.52 1.61 34.11-0.08 3-0.15 5.29-0.15 6.93 0 3.19-2.59 5.78-5.78 5.78s-5.78-2.59-5.78-5.78c0-0.31 0.08-3.32 0.19-7.24 0.16-6.04 1.13-14.04 1.62-19.52z'/%3E%3C/svg%3E");
}

ul {
    margin-top: .5rem;
}

ul>li {
    padding: .3rem 0;
}

p {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

p>img {
    width: 100%;
    height: auto;
}

li {
    list-style-type: "— ";
}

del {
    text-decoration: line-through;
    text-decoration-color: red;
}

blockquote {
    outline: 1px solid var(--primary-color);
    margin: 0;
    padding: 18px 40px;
    position: relative;
}

blockquote::before {
    position: absolute;
    content: open-quote;
    color: var(--shadow-color);
    font-size: 4em;
    left: 0;
    top: -10px;
}

blockquote:after {
    position: absolute;
    content: close-quote;
    color: var(--shadow-color);
    font-size: 4em;
    bottom: -30px;
    right: 10px;
}

blockquote>p {
    margin-block: 5px;
}

.blog-snippet > div {
    margin-left: 2em;
}

/*
Fix up code syntax highlighting.
See https://www.getzola.org/documentation/content/syntax-highlighting/
*/

pre {
    padding: 1rem;
    overflow: auto;
}

pre[data-linenos] {
    /* Less padding is needed when line numbers are shown. */
    padding: 1rem 0;
}

pre table td {
    padding: 0;
}

pre table td:nth-of-type(1) {
    /* Matches line number cells for code blocks with `linenos` in the arguments. */

    text-align: center;
    user-select: none;
}

pre mark {
    /* Matches marked lines on code blocks with e.g.`hl_lines=1,4,6-10` in the arguments */

    /* Full width */
    display: block;
    /* Override the theme because it is far too subtle */
    background-color: var(--code-mark-background-color) !important;
}

pre table {
    width: 100%;
    border-collapse: collapse;
}