/*MIT License (MIT) Copyright (c) 2014-2015 John Otander*/
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@media print {

    *,
    :after,
    :before {
        background: 0 0 !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important
    }

    a,
    a:visited {
        text-decoration: underline
    }

    a[href]:after {
        content: " (" attr(href) ")"
    }

    abbr[title]:after {
        content: " (" attr(title) ")"
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: ""
    }

    blockquote,
    pre {
        border: 1px solid #999;
        page-break-inside: avoid
    }

    thead {
        display: table-header-group
    }

    img,
    tr {
        page-break-inside: avoid
    }

    img {
        max-width: 100% !important
    }

    h2,
    h3,
    p {
        orphans: 3;
        widows: 3
    }

    h2,
    h3 {
        page-break-after: avoid
    }
}

code,
pre {
    font-family: Menlo, Monaco, "Courier New", monospace
}

pre {
    padding: .5rem;
    line-height: 1.25;
    overflow-x: scroll
}

:root {
    /* global scope */
    --primary-color: #43459f;
    --text-color: #000000;
    --bg-color: #f7f1ec;
}

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

a:active,
a:focus,
a:hover {
    color: var(--bg-color);
    text-decoration: none;
    background-color: var(--primary-color);
    transition: all 0.5s;
}

.modest-no-decoration {
    text-decoration: none
}

html {
    font-size: 12px;
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    border: 0;
}

@media screen and (min-width:32rem) and (max-width:48rem) {
    html {
        font-size: 15px
    }
}

@media screen and (min-width:48rem) {
    html {
        font-size: 16px
    }
}

main {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
    font-size: .5rem;
}

canvas,
iframe,
img,
select,
svg,
textarea,
video {
    max-width: 100%
}

html {
    font-size: 18px;
    max-width: 100%;
    height: 100%;
}

body {
    color: var(--text-color);
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;
    margin: 0 auto;
    max-width: 48rem;
    line-height: 1.45;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Fira Sans", sans-serif;
    font-weight: 600;
    font-size: 1em;
}

blockquote {
    border-left: 8px solid #fafafa;
    padding: 1rem
}

code,
pre {
    background-color: #fafafa
}

.default ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.default ul li {
    margin-bottom: .25em;
}

.default main,
.blog main,
.default h1 {
    font-size: 2em;
}

.blog_item h1,
.blog h1 {
    font-size: 0;
}

section#metadata {
    color: var(--primary-color);
    position: fixed;
    bottom: 1em;
    right: 1em;
    width: 20vw;
    font-size: .8rem;
    background-color: transparent;
    padding: 1em;
    margin-bottom: 1em;
}

section#metadata:hover {
    transition: background-color 5s;
    background-color: var(--bg-color);
}

section#metadata h3 {
    font-weight: 200;
    font-style: italic;
    margin: 0;
    padding: 0;
    border: 0;
}

section#metadata p {
    margin: 0;
    padding: 0;
    border: 0;
}

#menuToggle {
    position: fixed;
    top: .5em;
    left: .5em;
    background-color: transparent;
    border: 0;
    font-size: 2em;
    margin: 0;
    padding: 0;
    color: var(--primary-color);
    font-weight: 900;
    display: flex;
    width: 1.25em;
    height: 1.25em;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
}

#menuToggle.active {
    color: var(--bg-color);
    z-index: 100
}

#menuToggle:hover {
    background-color: var(--primary-color);
    color: var(--bg-color);
    transition: all 1s;
}

#navLinks {
    display: none;
}

#navLinks.active {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-flow: column wrap;
    width: 100vw;
    height: 100vh;
    background-color: var(--primary-color);
    font-size: 3em;
    position: fixed;
    top: 0;
    left: 0;
}

#navLinks.active a {
    color: var(--bg-color);
    border-bottom: 5px solid transparent;
    padding: 0 .5em;
}

#navLinks.active a:hover {
    border-bottom: 5px solid var(--bg-color);
    transition: all 1s;
}

body.blog_item {
    max-width: 100vw;
}

.article-content {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    min-height: 100vh;
}
.article-content>img{align-self: flex-start;}