@import url(https://fonts.googleapis.com/css2?family=IBM + Plex + Mono:wght@400;600&family=Inter:wght@400;500;600;700&display=swap);
            :root {
                --gray-0: #f9f9f9;
                --gray-05: #f6f6f6;
                --gray-1: #eee;
                --gray-2: #e6e6e6;
                --gray-3: #ddd;
                --gray-4: #bbb;
                --gray-5: #999;
                --gray-6: #666;
                --gray-65: #555;
                --gray-7: #2c2c2c;
                --gray-8: #252525;
                --gray-9: #1f1f1f;
                --gray-10: #181818;
                --green: #5eddac;
                --orange: #ff7e22;
                --yellow: #fca62a;
                --light-yellow: #f6cd5d;
                --pink: #f57ad0;
                --lavendar: #9b78fa;
                --violet: #ff67f7;
                --blue: #59abf7;
                --purple: #673ece;
                --indigo: #5a43f1;
                --indigo-dark: #4509cf;
                --indigo-light: #969bf6;
                --indigo-muted: #f1f2fd;
                --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
                --font-family-monospace: Menlo, "IBM Plex Mono", Menlo, monospace;
                --font-family-heading: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
                --font-family-nav: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
                --font-color-base: var(--gray-7);
                --font-color-muted: var(--gray-6);
                --font-color-heading: var(--gray-9);
                --font-color-heading3: var(--gray-7);
                --font-color-bright: var(--gray-9);
                --font-color-hero-heading: var(--gray-0);
                --border-color: var(--gray-3);
                --border-color-hover: var(--gray-4);
                --border-radius: 10px;
                --background-color: #fff;
                --card-background-color: var(--gray-0);
                --button-background-color: var(--gray-05);
                --marker: var(--border-color-hover);
                --link: var(--indigo);
                --link-hover-color: var(--indigo-muted);
                --navbar: var(--gray-1);
                --navbar-border: var(--gray-2);
                --navbar-color: var(--gray-8);
                --navbar-color-hover: var(--gray-9);
                --navbar-background-hover: var(--gray-1);
                --year: var(--green);
                --star: var(--yellow);
                --post-time-color: var(--gray-6);
                --card-time-color: var(--gray-5);
                --project-time-color: var(--font-color-muted);
                --highlight-color: var(--green);
                --blockquote-background: var(--indigo-muted);
                --file-background: #eee;
                --inline-code-background-color: var(--gray-0);
                --category-link: #dd4eb2;
                --scrollbar-color: var(--gray-3);
                --scrollbar-track: var(--gray-4);
                --content-width: 780px;
                --content-width--small: 560px;
                --content-width--medium: 700px;
                --navbar-height-small: 60px;
            }
            *,
            :after,
            :before {
                box-sizing: border-box;
            }
            html {
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                font-family: var(--font-family-base);
                font-kerning: normal;
                font-size: 16px;
                font-weight: 400;
                line-height: 1.6;
            }
            body {
                background: var(--background-color);
                margin: 0;
                padding: 0;
            }
            a {
                color: var(--link);
                text-decoration: none;
            }
            blockquote,
            ol,
            p,
            table,
            ul {
                color: var(--font-color-base);
                font-size: 1rem;
            }
            @media screen and (min-width: 700px) {
                blockquote,
                ol,
                p,
                table,
                ul {
                    font-size: 1.1rem;
                    letter-spacing: -0.01rem;
                    line-height: 1.625;
                }
            }
            ol,
            p,
            ul {
                -webkit-font-smoothing: auto;
                line-height: 1.625;
                margin-bottom: 1.5rem;
                margin-top: 0;
            }
            ul {
                padding-left: 1.5rem;
            }
            ol li ol,
            ul li ul {
                margin-bottom: 0;
                margin-top: 0.5rem;
            }
            li {
                line-height: 1.5;
                margin-bottom: 0.5rem;
                padding-left: 0.25rem;
            }
            li::marker {
                color: var(--marker);
                font-size: 1.1rem;
                line-height: 1;
            }
            main {
                margin-top: var(--navbar-height-small);
            }
            blockquote {
                background: var(--blockquote-background);
                border-left: 1px solid var(--indigo-light);
                border: 1px solid var(--indigo-light);
                border-left-width: 6px;
                border-radius: var(--border-radius);
                margin: 2rem 0;
                padding: 1.5rem;
            }
            blockquote p {
                font-size: 1rem;
                font-weight: 400;
                line-height: 1.6;
            }
            blockquote :last-child {
                margin: 0;
            }
            blockquote ul {
                margin-top: 1.5rem;
            }
            blockquote strong {
                font-weight: 700;
                -webkit-text-decoration-line: underline;
                text-decoration-line: underline;
                text-decoration-thickness: 2px;
            }
            blockquote.quotation {
                background: transparent;
                border: none;
                border-left: 12px solid var(--border-color);
                border-radius: 0;
                color: var(--font-color-base);
                font-family: Georgia;
                font-size: 1.1rem;
                font-style: italic;
                padding: 0 0 0 1.5rem;
            }
            blockquote.quotation cite {
                display: block;
                font-size: 0.9rem;
                font-style: normal;
                margin-top: 1rem;
                text-transform: uppercase;
            }
            h1,
            h2,
            h3,
            h4,
            h5 {
                color: var(--font-color-heading);
                font-weight: 600;
                line-height: 1.1;
                margin-bottom: 1.5rem;
                margin-top: 0;
                scroll-margin-top: 3rem;
            }
            h1:not(:first-child),
            h2:not(:first-child),
            h3:not(:first-child),
            h4:not(:first-child) {
                margin-top: 3.5rem;
            }
            h2 + h3 {
                margin-top: 1.5rem !important;
            }
            h2 {
                border-bottom: 1px solid var(--border-color);
                color: var(--font-color-heading);
                font-family: var(--font-family-nav);
                font-size: 1.7rem;
                font-weight: 700;
                letter-spacing: -0.05rem;
                margin: 0 0 1rem;
                padding-bottom: 0.4rem;
            }
            h2.year {
                border-bottom: none;
                font-size: 1.9rem;
            }
            h2 code {
                font-size: 1.7rem !important;
            }
            h3 {
                color: var(--font-color-heading3);
                font-family: var(--font-family-heading);
                font-size: 1.5rem;
                font-weight: 500;
                margin-bottom: 1.25rem;
            }
            h3 code {
                font-size: 1.4rem !important;
            }
            @media screen and (min-width: 700px) {
                main {
                    margin-top: 1rem;
                }
                h2 {
                    font-size: 2rem;
                }
                h2 code {
                    font-size: 1.9rem !important;
                }
                h2.year {
                    border-bottom: none;
                    font-size: 2.3rem;
                }
                h3 {
                    font-size: 1.6rem;
                    letter-spacing: -0.02rem;
                }
                h3 code {
                    font-size: 1.7rem !important;
                }
            }
            h4,
            h4 code {
                font-size: 1.2rem;
                font-weight: 600;
                margin-bottom: 1.5rem;
                text-transform: uppercase;
            }
            h4,
            h4 code,
            h5 {
                color: var(--font-color-base);
            }
            h5 {
                font-family: var(--font-family-heading);
                font-size: 1.1rem;
                font-weight: 700;
                margin-bottom: 1rem;
            }
            h2.home-heading {
                align-items: center;
                border: 0;
                display: flex;
                justify-content: space-between;
                margin-bottom: 2rem;
                margin-top: 2rem;
                padding: 0;
            }
            h2.home-heading .title {
                font-family: var(--font-family-base);
                font-size: 1.7rem;
                font-weight: 700;
                margin-bottom: 0;
            }
            @media screen and (min-width: 700px) {
                h2.home-heading {
                    gap: 2rem;
                }
                h2.home-heading .title {
                    font-size: 2rem;
                }
            }
            table {
                border: 1px solid var(--border-color);
                border-collapse: separate;
                border-radius: var(--border-radius);
                border-spacing: 0;
                display: table;
                font-size: 1rem;
                line-height: 1.5;
                margin-bottom: 1.5rem;
                margin-top: 0;
                max-width: 100%;
                overflow-x: auto;
                width: 100%;
            }
            td,
            th {
                border-bottom: 1px solid var(--border-color);
                -webkit-hyphens: auto;
                -ms-hyphens: auto;
                hyphens: auto;
                padding: 0.5rem;
                text-align: left;
                word-break: break-word;
            }
            th {
                background: var(--card-background-color);
                border-bottom: 2px solid var(--border-color);
                border-top-left-radius: var(--border-radius);
                border-top-right-radius: var(--border-radius);
            }
            img {
                display: block;
                max-width: 100%;
            }
            mark {
                background: #fdd94a;
                font-weight: 600;
            }
            u {
                -webkit-text-decoration-line: underline;
                text-decoration-line: underline;
                text-decoration-thickness: 2px;
            }
            .container {
                margin-left: auto;
                margin-right: auto;
                max-width: var(--content-width);
                padding: 0 1rem;
            }
            @media screen and (min-width: 700px) {
                .container {
                    padding: 0 2rem;
                }
            }
            .layout {
                display: flex;
                flex-direction: column;
                min-height: 100vh;
            }
            .segment {
                margin-bottom: 2rem;
                margin-top: 2rem;
            }
            .segment.small {
                margin-bottom: 1rem;
                margin-top: 1rem;
            }
            .segment.large {
                margin-bottom: 3rem;
            }
            .segment.first,
            .segment.large {
                margin-top: 3rem;
            }
            @media screen and (min-width: 700px) {
                .segment {
                    margin-bottom: 3rem;
                    margin-top: 3rem;
                }
                .segment.large {
                    margin-bottom: 5rem;
                    margin-top: 5rem;
                }
                .segment.small {
                    margin-bottom: 1.5rem;
                    margin-top: 1.5rem;
                }
            }
            a.button,
            button {
                align-items: center;
                background: var(--button-background-color);
                border: 1px solid var(--border-color);
                border-radius: var(--border-radius);
                color: var(--font-color-base);
                cursor: pointer;
                display: inline-flex;
                font-family: var(--font-family-nav);
                font-size: 0.9rem;
                font-weight: 500;
                gap: 0.25rem;
                letter-spacing: 0;
                line-height: 1;
                padding: 0.6rem 1rem;
                transition: -webkit-transform 0.2s ease-in-out;
                transition: transform 0.2s ease-in-out;
                transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
                white-space: nowrap;
            }
            a.button.large,
            button.large {
                font-size: 1.1rem;
                font-weight: 400;
                padding: 1rem 1.75rem;
            }
            a.button.small,
            button.small {
                font-size: 0.9rem;
                padding: 0.5rem 0.6rem;
            }
            a.button img,
            button img {
                margin-right: 0.25rem;
                max-height: 20px;
                min-height: 20px;
                min-width: 20px;
            }
            a.button:hover,
            button:hover {
                border-color: var(--border-color-hover);
                color: var(--font-color-bright);
            }
            a.button:active,
            button:active {
                -webkit-transform: scale(0.95);
                transform: scale(0.95);
            }
            @media screen and (min-width: 700px) {
                a.button,
                button {
                    font-size: 1rem;
                    padding: 0.75rem 1rem;
                }
            }
            .navigation {
                background: var(--background-color);
                border-bottom: 1px solid var(--border-color);
                font-family: var(--font-family-nav);
                height: var(--navbar-height-small);
                left: 0;
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 3;
            }
            .navigation .container {
                display: flex;
                height: var(--navbar-height-small);
                justify-content: space-between;
            }
            .navigation .nav-wrapper {
                display: flex;
            }
            .navigation a,
            .navigation a:hover {
                background: transparent;
                text-decoration: none;
            }
            .navigation .item.brand span,
            .theme-toggle span {
                display: none;
            }
            .logo {
                height: 36px;
                min-height: 36px;
                min-width: 36px;
                width: 36px;
            }
            .navigation nav {
                gap: 0.3rem;
                justify-content: space-between;
            }
            .nav-item-outer,
            .navigation nav {
                align-items: center;
                display: flex;
            }
            .nav-image {
                height: 16px;
                min-height: 16px;
                min-width: 16px;
                width: 16px;
            }
            .navigation a.item,
            .navigation button.item {
                align-items: center;
                border: 1px solid var(--border-color);
                border-radius: var(--border-radius);
                color: var(--navbar-color);
                cursor: pointer;
                display: flex;
                font-size: 0.9rem;
                font-weight: 500;
                gap: 0.25rem;
                justify-content: space-between;
                padding: 0.3rem 0.35rem;
                transition: -webkit-transform 0.2s ease-in-out;
                transition: transform 0.2s ease-in-out;
                transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
            }
            .navigation a.item.brand {
                border: none;
                color: var(--font-color-bright);
                display: none;
                font-size: 1.1rem;
                font-weight: 700;
                gap: 0.4rem;
                line-height: 1;
                padding: 0;
            }
            .navigation a.item.brand:hover {
                background: transparent;
            }
            .navigation a.item:hover,
            .navigation button.item:hover {
                background: var(--button-background-color);
                border-color: var(--border-color-hover);
                color: var(--navbar-color-hover);
            }
            .navigation a.item.active,
            .navigation button.item.active {
                background: var(--button-background-color);
                border-color: var(--border-color);
                color: var(--font-color-bright);
            }
            .navigation a.item:active,
            .navigation button.item:active {
                -webkit-transform: scale(0.95);
                transform: scale(0.95);
            }
            .theme-toggle {
                align-self: center;
            }
            .theme-toggle button img {
                margin: 0;
            }
            .theme-toggle button {
                border-radius: 50%;
                padding: 0.4rem;
            }
            .git-hub {
                gap: 0.5rem;
            }
            @media screen and (min-width: 700px) {
                .navigation {
                    border-bottom: none;
                    height: auto;
                    padding: 2rem 0;
                    position: static;
                }
                .navigation .nav-wrapper {
                    display: block;
                }
                .navigation a.item {
                    font-size: 1rem;
                    gap: 0.5rem;
                    padding: 0.5rem 0.75rem;
                }
                .navigation a.item.brand {
                    display: inline-flex;
                    font-size: 1.2rem;
                    margin-bottom: 1.5rem;
                    padding: 0;
                }
                .navigation a.item.brand span,
                .theme-toggle span {
                    display: block;
                }
                .nav-image {
                    height: 20px;
                    min-height: 20px;
                    min-width: 20px;
                    width: 20px;
                }
                .navigation nav {
                    gap: 0.5rem;
                }
                .navigation,
                .navigation .container {
                    height: auto;
                }
                .theme-toggle {
                    align-self: flex-end;
                }
                .theme-toggle button {
                    padding: 0.75rem;
                }
            }
            .star {
                align-items: center;
                color: var(--star);
                display: flex;
                font-family: var(--font-family-monospace);
                font-size: 0.9rem;
                gap: 0.5rem;
            }
            .star a {
                color: var(--font-color-muted);
            }
            .star a:hover {
                color: var(--font-color-bright);
                -webkit-text-decoration-line: underline;
                text-decoration-line: underline;
                text-decoration-thickness: 2px;
            }
            .stars {
                position: absolute;
                right: 1rem;
                top: 1rem;
            }
            .card {
                background: var(--card-background-color);
                border: 1px solid var(--border-color);
                border-radius: var(--border-radius);
                padding: 1rem;
                position: relative;
            }
            @media screen and (min-width: 700px) {
                .card.anchored {
                    padding-bottom: 3.5rem;
                }
                .card.anchored.large {
                    padding-bottom: 5rem;
                }
            }
            .card a.card-header,
            .card h2 {
                border: 0;
                color: var(--font-color-heading);
                display: block;
                font-family: var(--font-family-base);
                font-size: 1rem;
                font-weight: 500;
                line-height: 1.3;
                margin: 0.1rem 0 0.5rem;
                padding: 0;
                text-decoration: none;
            }
            .card a.card-header:hover,
            .card h2:hover {
                color: var(--font-color-bright);
                -webkit-text-decoration-line: underline;
                text-decoration-line: underline;
                text-decoration-thickness: 2px;
            }
            .card p {
                color: var(--font-color-muted);
                font-family: var(--font-family-base);
                font-size: 0.9rem;
                line-height: 1.5;
                margin: 0;
            }
            .card.single {
                padding: 1.5rem;
            }
            .card.single p {
                margin: 0 0 1.5rem;
            }
            .card time {
                color: var(--card-time-color);
                display: block;
                font-family: var(--font-family-monospace);
                font-size: 0.9rem;
                letter-spacing: -0.01rem;
            }
            .card.muted {
                align-items: center;
                background: transparent;
                border: 1px solid transparent;
                padding: 0;
            }
            .card.muted .gatsby-image-wrapper {
                height: 30px;
                max-height: 30px !important;
                max-width: 30px !important;
                width: 30px;
            }
            .card.muted time {
                color: var(--font-color-muted);
                display: none;
            }
            .card.muted h2 {
                margin: 0.25rem 0 1rem;
            }
            @media screen and (min-width: 700px) {
                .card {
                    padding: 1.5rem;
                }
                .card.muted time {
                    display: block;
                }
                .card.muted .gatsby-image-wrapper {
                    height: 45px;
                    max-height: 45px !important;
                    max-width: 45px !important;
                    width: 45px;
                }
                .card a.card-header,
                .card h2 {
                    font-size: 1.1rem;
                    font-weight: 500;
                }
                .card.muted {
                    align-items: center;
                    background: transparent;
                    border: 1px solid var(--border-color);
                    padding: 1rem;
                }
                .stars {
                    right: 1.5rem;
                    top: 1.5rem;
                }
            }
            main {
                flex: 1 1;
            }
            .hero-wrapper {
                display: grid;
                padding-top: 2rem;
            }
            .hero {
                order: 2;
                overflow: hidden;
                padding: 1rem 0 0;
                position: relative;
                width: 100%;
            }
            .decoration {
                align-items: center;
                display: flex;
                order: 1;
            }
            .hero h1 {
                color: var(--font-color-heading);
                font-size: 2.2rem;
                font-weight: 700;
                line-height: 1.1;
                margin: 0;
            }
            p.hero-description {
                -webkit-font-smoothing: antialiased;
                color: var(--font-color-base);
                font-size: 1rem;
                font-weight: 500;
                letter-spacing: -0.01rem;
                line-height: 1.6;
                margin-bottom: 1.5rem;
                margin-top: 1.5rem;
            }
            p.hero-description a {
                -webkit-text-decoration-line: underline;
                text-decoration-line: underline;
                text-decoration-thickness: 2px;
            }
            p.hero-description a:hover {
                text-decoration: none;
            }
            .hero .sub-title {
                color: var(--font-color-muted);
                font-size: 1.1rem;
                font-weight: 500;
                margin-bottom: 0.5rem;
            }
            @media screen and (min-width: 700px) {
                .hero-wrapper {
                    align-items: center;
                    gap: 1.5rem;
                    grid-template-columns: 4fr 2fr;
                    padding-top: 0;
                }
                p.hero-description {
                    font-size: 1.2rem;
                    margin-bottom: 0;
                }
                .hero {
                    order: 1;
                }
                .decoration {
                    justify-content: flex-end;
                    order: 2;
                }
                .hero h1 {
                    font-size: 3rem;
                }
                .hero.index {
                    padding: 5rem 0 3rem;
                }
            }
            .highlight {
                color: var(--highlight-color);
            }
            .highlight-preview {
                display: grid;
                gap: 0.5rem;
            }
            @media screen and (min-width: 700px) {
                .highlight-preview {
                    gap: 1rem;
                    grid-template-columns: repeat(2, 1fr);
                }
            }
            .image-preview,
            .project-preview {
                display: grid;
                gap: 1rem;
            }
            .image-preview {
                grid-template-columns: repeat(2, 1fr);
            }
            .image-thumbnail {
                height: 150px;
            }
            @media screen and (min-width: 700px) {
                .project-preview {
                    grid-template-columns: repeat(2, 1fr);
                }
                .image-preview {
                    grid-template-columns: repeat(3, 1fr);
                }
                .image-thumbnail {
                    height: 220px;
                }
            }
            .post-preview .card p {
                margin-bottom: 1rem;
            }
            .project-preview .card time {
                color: var(--project-time-color);
            }
            .post-preview {
                display: grid;
                gap: 1rem;
            }
            @media screen and (min-width: 700px) {
                .post-preview {
                    gap: 1rem;
                    grid-template-columns: repeat(3, 1fr);
                }
            }
            .post-preview > div {
                flex: 1 1;
            }
            .post-preview a.button {
                font-size: 0.9rem;
                padding: 0.5rem 0.6rem;
            }
            .post-content a {
                -webkit-text-decoration-line: underline;
                text-decoration-line: underline;
                text-decoration-thickness: 2px;
            }
            .post-content a:hover {
                background: var(--link);
                color: var(--link-hover-color);
                text-decoration: none;
            }
            a.anchor,
            a.anchor:hover {
                background: transparent !important;
                color: var(--link);
            }
            a.anchor svg {
                fill: var(--link);
            }
            a.post {
                background: transparent;
                border-bottom: 1px solid var(--border-color);
                display: flex;
                gap: 1rem;
                padding: 0.4rem 0;
                text-decoration: none;
            }
            a.post:last-of-type {
                border: none;
            }
            a.post:hover,
            a.post:hover h3 {
                color: var(--font-color-bright);
            }
            a.post:hover h3 {
                -webkit-text-decoration-line: underline;
                text-decoration-line: underline;
                text-decoration-thickness: 2px;
            }
            a.post h3 {
                color: var(--font-color-heading);
                color: var(--font-color-muted);
                font-family: var(--font-family-base);
                font-size: 1rem;
                font-weight: 500;
                line-height: 1.3;
                margin: 0;
            }
            a.post time {
                color: var(--post-time-color);
                display: none;
                font-family: var(--font-family-monospace);
                font-size: 0.9rem;
                font-weight: 500;
                margin-left: auto;
                white-space: nowrap;
            }
            @media screen and (min-width: 700px) {
                .posts.newspaper {
                    -webkit-column-gap: 2rem;
                    column-gap: 2rem;
                    display: grid;
                }
                a.post time {
                    display: block;
                }
                a.post h3 {
                    font-size: 1.1rem;
                    font-weight: 600;
                }
            }
            .grid {
                display: block;
            }
            .article-content {
                max-width: 100%;
                min-width: 0;
            }
            .links {
                margin-top: 1rem;
            }
            @media screen and (min-width: 700px) {
                .post-sidebar {
                    display: grid;
                    gap: 1.5rem;
                    grid-template-columns: 1fr 1fr;
                }
            }
            .post-sidebar-card {
                background: var(--card-background-color);
                border: 1px solid var(--border-color);
                border-radius: var(--border-radius);
                margin: 1.5rem 0;
                padding: 1rem;
            }
            .post-sidebar h2 {
                border: none;
                color: var(--font-color-heading);
                font-size: 1.1rem;
                font-weight: 700;
                letter-spacing: 0;
                margin: 0 0 1rem;
            }
            .post-sidebar p,
            .post-sidebar ul {
                font-size: 0.9rem;
            }
            .post-sidebar p:last-of-type {
                margin-bottom: 0;
            }
            .post-sidebar .tags {
                gap: 0.3rem;
            }
            .post-sidebar a {
                -webkit-text-decoration-line: underline;
                text-decoration-line: underline;
                text-decoration-thickness: 2px;
            }
            .post-sidebar a:hover {
                text-decoration: none;
            }
            .sidebar-avatar {
                display: block;
                margin-bottom: 1rem;
                max-height: 100px;
                max-width: 100px;
            }
            .list a,
            .sidebar-avatar {
                border-radius: var(--border-radius);
            }
            .list a {
                background-color: transparent;
                color: var(--font-color-base);
                font-size: 1rem;
                font-weight: 600;
                margin: 0 -0.3rem;
                padding: 0.1rem 0.5rem;
            }
            .list a:hover {
                background: hsla(0, 0%, 100%, 0.05);
                color: var(--highlight-color);
                text-decoration: none;
            }
            @media screen and (min-width: 700px) {
                .post-sidebar-card {
                    padding: 1.5rem;
                }
                .post-sidebar h2 {
                    font-size: 1.3rem;
                }
            }
            .links,
            .tags {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            a.tag {
                background: var(--button-background-color) !important;
                border: 1px solid var(--border-color);
                border-radius: var(--border-radius);
                color: var(--font-color-base);
                font-size: 0.8rem;
                font-weight: 400;
                padding: 0.2rem 0.4rem;
            }
            a.tag,
            a.tag:hover {
                text-decoration: none;
            }
            a.tag:hover {
                color: var(--font-color-bright);
            }
            a.tag.active,
            a.tag:hover {
                border-color: var(--highlight-color);
            }
            a.tag.active {
                color: var(--highlight-color);
                font-weight: 600;
            }
            @media screen and (min-width: 700px) {
                .categories.anchored,
                .links.anchored {
                    bottom: 1.5rem;
                    left: 1.5rem;
                    position: absolute;
                }
            }
            a.category {
                align-items: center;
                display: flex;
                justify-content: space-between;
                text-decoration: none;
            }
            a.category.active,
            a.category.active .count,
            a.category:hover .count {
                color: var(--highlight-color);
            }
            .category .name {
                font-size: 0.9rem;
            }
            .category .count {
                color: var(--font-color-muted);
                font-family: var(--font-family-monospace);
                font-size: 0.9rem;
                font-weight: 400;
            }
            .width.small {
                max-width: var(--content-width--small);
            }
            .width.medium {
                max-width: var(--content-width--medium);
            }
            .flex {
                display: flex;
                gap: 1rem;
            }
            .space-between {
                justify-content: space-between;
            }
            .align-center {
                align-items: center;
            }
            .align-end {
                align-items: flex-end;
            }
            .desktop-only {
                display: none !important;
            }
            @media screen and (min-width: 700px) {
                .desktop-only {
                    display: flex !important;
                }
                .mobile-only {
                    display: none !important;
                }
            }
            .post-image {
                margin-top: 2rem;
                text-align: center;
            }
            .header-post-image {
                margin-bottom: 1rem;
            }
            .header-post-image .gatsby-image-wrapper {
                max-height: 50px;
                max-width: 50px;
            }
            .post-header {
                padding: 2rem 0 1rem;
            }
            .post-header h1 {
                font-size: 1.9rem;
                font-weight: 700;
                letter-spacing: -0.05rem;
                line-height: 1.2;
                margin: 0;
            }
            @media screen and (min-width: 700px) {
                .post-header {
                    padding-bottom: 1rem;
                }
                .header-post-image .gatsby-image-wrapper {
                    max-height: 100px;
                    max-width: 100px;
                }
                .post-header h1 {
                    font-size: 2.6rem;
                    line-height: 1.2;
                }
            }
            .post-header time {
                color: var(--font-color-muted);
                display: block;
                font-family: var(--font-family-monospace);
                font-size: 0.9rem;
                font-weight: 400;
                margin-bottom: 0.25rem;
            }
            .footer {
                font-family: var(--post-font-family);
                padding: 3rem 0;
            }
            .footer section {
                align-items: center;
                display: flex;
                flex-direction: column;
                gap: 1.25rem;
            }
            .footer img {
                display: inline-block;
                max-height: 20px;
                width: auto;
            }
            .footer nav {
                display: flex;
                gap: 0.25rem;
                margin: 0 1rem;
            }
            .footer a,
            .footer span {
                align-items: center;
                color: var(--font-color-base);
                display: flex;
                font-size: 0.9rem;
                padding: 0 0.5rem;
            }
            .footer span {
                color: var(--font-color-muted);
            }
            .footer a:hover {
                -webkit-text-decoration-line: underline;
                text-decoration-line: underline;
                text-decoration-thickness: 2px;
            }
            .gatsby-resp-image-wrapper {
                margin-left: 0 !important;
            }
            a.gatsby-resp-image-link {
                background: transparent !important;
            }
            .circles {
                display: flex;
                gap: 1rem;
            }
            .circle {
                border-radius: 50%;
                height: 40px;
                margin: 0.5rem 0;
                min-height: 40px;
                min-width: 40px;
                width: 40px;
            }
            @media screen and (min-width: 700px) {
                .circle {
                    height: 30px;
                    min-height: 30px;
                    min-width: 30px;
                    width: 30px;
                }
            }
            .image {
                max-width: 100%;
            }
            .hero-image {
                max-width: 100px;
            }
            @media screen and (min-width: 700px) {
                .hero-image {
                    max-width: 100%;
                    width: 200px;
                }
            }
            .image-thumbnail {
                background-position: 50%;
                background-repeat: no-repeat;
                background-size: cover;
                border-radius: var(--border-radius);
                width: 100%;
            }
            .text-muted {
                color: var(--font-color-base);
            }
            .text-medium,
            p.text-medium {
                font-size: 1rem;
            }
            ::-webkit-scrollbar {
                background: var(--scrollbar-track);
                height: 8px;
                width: 8px;
            }
            ::-webkit-scrollbar-thumb {
                background: var(--scrollbar-color);
                border-radius: 2px;
            }
            :root {
                --code-font-color: #232529;
                --code-background-color: var(--gray-0);
                --code-border-color: var(--gray-3);
                --terminal-background-color: #fff;
                --terminal-bar: -webkit-linear-gradient(top, #ebebeb, #d5d5d5);
                --terminal-accent: #fff;
                --terminal-border: #cecbce;
                --string: #229020;
                --variable: #383a41;
                --property: #565656;
                --number: #da7430;
                --operator: #a87200;
                --punctuation: #5c6d74;
                --comment: #869496;
                --function: #0582b7;
                --keyword: #a208ba;
                --attribute: #a87200;
                --class: #c52387;
                --tag: #365ccd;
                --error: #b0292c;
                --code-link-hover: var(--link);
                --highlight-code-color: rgb(116, 207, 116, 0.2);
            }
            pre {
                border: 0;
            }
            code[class*="language-"],
            pre[class*="language-"] {
                -webkit-font-smoothing: subpixel-antialiased;
                word-wrap: normal;
                color: var(--code-font-color);
                font-family: "Menlo", var(--font-family-monospace);
                font-size: 0.9rem;
                -webkit-hyphens: none;
                -ms-hyphens: none;
                hyphens: none;
                line-height: 1.55;
                -o-tab-size: 2;
                tab-size: 2;
                text-align: left;
                white-space: pre;
                word-break: normal;
                word-spacing: normal;
            }
            @media screen and (min-width: 700px) {
                code[class*="language-"],
                pre[class*="language-"] {
                    font-size: 0.9rem;
                }
            }
            pre[class*="language-"] {
                background: var(--code-background-color);
                border-radius: 8px;
                margin-bottom: 1.5rem;
                margin-top: 1.5rem;
                overflow: initial;
                padding: 1rem;
            }
            code.language-text {
                border: none;
                color: var(--font-color-base);
            }
            :not(pre) > code[class*="language-"] {
                -webkit-font-smoothing: subpixel-antialiased;
                background: var(--inline-code-background-color);
                border: 1px solid var(--border-color);
                border-radius: 4px;
                color: var(--font-color-base);
                font-size: 1rem;
                font-weight: 500;
                padding: 0.2rem 0.3rem;
            }
            :not(pre) > a code[class*="language-"] {
                color: var(--link);
            }
            :not(pre) > a code[class*="language-"]:hover {
                color: var(--code-link-hover);
            }
            code.language-shell:before {
                color: var(--comment);
                content: "$ ";
            }
            .gatsby-highlight {
                -webkit-text-size-adjust: none;
                -moz-text-size-adjust: none;
                text-size-adjust: none;
                background: var(--code-background-color);
                border-bottom: 1px solid var(--code-border-color);
                border-radius: 0;
                border-top: 1px solid var(--code-border-color);
                margin: 1.5rem -1.5rem;
                max-width: calc(100% + 2.5rem);
                overflow: auto;
            }
            @media screen and (min-width: 700px) {
                .gatsby-highlight {
                    border: 1px solid var(--code-border-color);
                    border-radius: 8px;
                    margin: 1.5rem 0;
                    max-width: 100%;
                }
            }
            .gatsby-highlight[data-language="terminal"] {
                background: transparent;
                box-shadow: none;
                box-shadow: 0 15px 20px rgba(0, 0, 0, 0.05), 0 5px 7px rgba(0, 0, 0, 0.03);
                margin-left: 0;
                margin-right: 0;
                overflow: auto;
                padding: 0;
            }
            .gatsby-highlight[data-language="text"] {
                background: transparent;
                border: none;
                margin: 0 0 1.5rem;
                padding: 0;
            }
            .gatsby-highlight-code-line {
                background-color: var(--highlight-code-color);
                border-left: 4px solid #74cf74;
                display: block;
                margin-left: -1rem;
                margin-right: -1.5rem;
                padding-left: calc(1rem - 4px);
            }
            .gatsby-highlight-code-line .gatsby-highlight-code-line {
                background-color: transparent;
            }
            @media screen and (min-width: 700px) {
                .gatsby-highlight-code-line {
                    border-left: 4px solid #74cf74;
                    margin-left: -1.5rem;
                    margin-right: -1.5rem;
                    padding-left: calc(1.5rem - 4px);
                }
            }
            .gatsby-highlight pre[class*="language-"] {
                background-color: transparent;
                float: left;
                margin: 0;
                min-width: 100%;
                overflow: initial;
                padding: 1.5rem;
            }
            .gatsby-highlight:after {
                clear: both;
                content: "";
                display: table;
            }
            .gatsby-highlight pre.language-terminal {
                -webkit-text-size-adjust: none;
                background: var(--terminal-background-color);
                border: 1px solid var(--terminal-border);
                border-radius: 8px;
                max-width: 100%;
                padding: 3rem 1rem 1rem;
                position: relative;
                white-space: unset;
            }
            .gatsby-highlight pre.language-text {
                -webkit-font-smoothing: subpixel-antialiased;
                background: transparent;
                border: none;
                box-shadow: none;
                color: var(--terminal-color);
                margin: 0;
                padding: 0;
            }
            code.language-terminal {
                -webkit-font-smoothing: antialiased;
                -webkit-text-size-adjust: none;
                -moz-text-size-adjust: none;
                text-size-adjust: none;
                color: var(--terminal-color);
                white-space: pre-wrap;
                word-break: break-all;
            }
            pre.language-terminal:before {
                background: var(--terminal-bar);
                border-bottom: 1px solid var(--border-color);
                border-top: 1px solid var(--terminal-accent);
                border-top-left-radius: 6px;
                border-top-right-radius: 6px;
                color: #a19ea1;
                content: "\2022 \2022 \2022";
                font-size: 2.5rem;
                left: 0;
                letter-spacing: -5px;
                line-height: 0;
                margin: 0;
                padding: 15px 0 12px;
                position: absolute;
                text-indent: 6px;
                top: 0;
                width: 100%;
            }
            .filename {
                align-items: center;
                background: var(--file-background);
                border-bottom: 1px solid var(--code-border-color);
                border-radius: 0;
                border-top: 1px solid var(--code-border-color);
                color: var(--font-color-base);
                display: flex;
                font-size: 1rem;
                font-weight: 500;
                justify-content: center;
                line-height: 1.5;
                margin-bottom: -1.9rem;
                margin-left: -1.5rem;
                margin-right: -1.5rem;
                max-width: calc(100% + 2.5rem);
                padding: 0.4rem 1rem 0.8rem;
            }
            @media screen and (min-width: 700px) {
                .filename {
                    border: 1px solid var(--code-border-color);
                    border-top-left-radius: 6px;
                    border-top-right-radius: 6px;
                    margin-left: 0;
                    margin-right: 0;
                    max-width: 100%;
                }
            }
            .token.cdata,
            .token.comment,
            .token.doctype,
            .token.important,
            .token.prolog {
                color: var(--comment);
            }
            .token.punctuation {
                color: var(--punctuation);
            }
            .token.namespace {
                opacity: 0.7;
            }
            .token.property {
                color: var(--property);
            }
            .token.constant,
            .token.deleted,
            .token.symbol,
            .token.tag {
                color: var(--tag);
            }
            .token.number {
                color: var(--number);
            }
            .token.builtin,
            .token.char,
            .token.inserted,
            .token.url {
                color: var(--code-font-color);
            }
            .token.attr-name,
            .token.selector {
                color: var(--attribute);
            }
            .token.attr-value,
            .token.string {
                color: var(--string);
            }
            .token.operator {
                color: var(--operator);
            }
            .token.atrule,
            .token.keyword {
                color: var(--keyword);
            }
            .token.function {
                color: var(--function);
            }
            .language-css,
            .token.boolean,
            .token.class-name {
                color: var(--class) !important;
            }
            .token.regex {
                color: var(--keyword);
            }
            .token.variable {
                color: var(--variable);
            }
            .token.bold {
                font-weight: 700;
            }
            .token.italic {
                font-style: italic;
            }
            .token.entity {
                cursor: help;
            }
            .language-jsx .token.class-name {
                color: var(--tag) !important;
            }
            code::selection,
            pre::selection {
                background: hsla(0, 0%, 59%, 0.3) !important;
                color: inherit;
                text-shadow: none;
            }
            code[class*="language-"] ::selection,
            pre[class*="language-"]::selection {
                background: hsla(0, 0%, 59%, 0.3) !important;
                color: inherit;
                text-shadow: none;
            }