    <!-- Theme Styles -->
    <style>
        :root {
            --tb-primary-color: #900c3f;
            --tb-complementary-color: #5b0526;
        }

        :root {
    /* WordPress */
    --wp-blue: #0073AA;
    --wp-medium-blue: #00A0D2;

    --wp-ultra-dark-gray: #191E23;
    --wp-dark-gray: #23282D;
    --wp-base-gray: #32373C;
    --wp-dark-silver-gray: #82878C;
    --wp-silver-gray: #A0A5AA;
    --wp-light-silver-gray: #B4B9BE;

    --as-color-red: #DC3232;
    --wp-accent-orange: #F56E28;
    --wp-accent-yellow: #FFB900;
    --wp-accent-green: #46B450;
    --wp-accent-purple: #826EB4;

    --dark-gray: #2E2E2E;
    --blue-gray: #222233;
    --blue: #006699;
    --violet: #660099;
    --orange: #D98F1C;
    --brown: #8C5500;
    --primary: var(--tb-primary-color, var(--as-color-red));
    --complementary: var(--tb-complementary-color, var(--wp-accent-yellow));
    --transparent: #00000000;

    --gray: var(--wp-dark-silver-gray);
    --weak-gray: #F2F2F2;
    --pure-white-color: #FFFFFF;
    --pure-black-color: #000000;

    --error-color: var(--as-color-red);
    --success-color: var(--wp-accent-green);
    --outline-color: var(--wp-base-gray);
}

:root {
    --tb-dark: var(--dark-gray);
    --tb-weak-gray: var(--weak-gray);
    --tb-orange: var(--orange);
    --tb-brown: var(--brown);
    --tb-blue: var(--blue);
    --tb-visited: var(--violet);

    --tb-text-color: var(--tb-dark);
    --tb-bg-color: var(--pure-white-color);
    --tb-bg-neutral-color: var(--tb-weak-gray);
    --tb-headings-color: var(--tb-text-color);
    --tb-headings-alt-color: var(--primary);
    --tb-subheading-color: var(--gray);

    --tb-success-color: var(--success-color);
    --tb-error-color: var(--error-color);
    --tb-action-color: var(--tb-dark);
    --tb-action-alt-color: var(--primary);
    --tb-bg-code-color: var(--tb-bg-neutral-color);
    --tb-highlight-color: var(--tb-bg-color);
    --tb-bg-highlight-color: var(--tb-action-color);
    --tb-links-color: var(--tb-blue);
    --tb-links-active-color: var(--primary);
    --tb-links-visited-color: var(--tb-visited);

    --tb-form-label-color: var(--tb-text-color);

    --tb-title-font: 'Sofia Sans', 'Helvetica', 'Arial', sans-serif;
    --tb-text-font: 'Roboto Slab', 'Georgia', serif;
    --tb-mono-font: "Jetbrains Mono", monospace;
}

html {
    font-family: var(--tb-text-font);
    font-size: 12pt;
    margin-top: 0;
    color: var(--tb-text-color);
    width: 100%;
    height: 100%;

    & :is(h1, h2, h3, h4, h5, h6) {
        font-family: var(--tb-title-font);
    }
}

body {
    height: auto;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;

    &:not(.block-editor-iframe__body) {
        background-color: var(--tb-bg-neutral-color);
    }

    &.block-editor-iframe__body {
        background-color: var(--pure-white-color);
    }

    & .page-content {
        display: grid;
        grid-template-columns: 320px 1fr;
        grid-template-rows: auto;
        grid-row-gap: 0;
        width: 100%;
        background-color: var(--tb-bg-color);

        /* desktop */
        @media (min-width: 1024px) {
            max-width: 1400px;
            margin: 0 auto;
        }

        & > header {
            grid-area: 1 / 1 / 2 / 2;
            overflow-x: hidden;
            z-index: 100;
            width: 100%;
            padding: 25px 20px 0 25px;
            background-color: var(--tb-bg-color);

            & .main-image {
                width: 100%;

                img {
                    width: 100%;
                }
            }

            /* phone + tablet */
            @media (min-width: 360px) and (max-width: 1023px) {
                position: fixed;
                display: inline-block;
                top: 0;
                bottom: 0;
                margin: 0;
                width: 320px;
                left: -320px;
                visibility: hidden;
                box-shadow: 16px 0 32px 0 rgba(47, 47, 47, 0.5);

                &.active {
                    visibility: visible;
                    left: 0;
                }
            }

            & .skip {
                bottom: 25px;
                left: -10000px;
                position: fixed;
                text-decoration: none;
                background-color: var(--tb-action-color);
                color: var(--tb-bg-color);

                &:focus {
                    width: auto;
                    height: auto;
                    left: 25px;
                    padding: 15px;
                }

                /* phone */
                @media (min-width: 360px) and (max-width: 767px) {
                    display: none;
                }
            }

            & ul {
                padding-left: 0;

                &.menu {
                    list-style: none;
                    width: 100%;
                    display: block;
                    margin: 0;

                    & ul {
                        display: block;
                    }

                    & li {
                        display: block;
                        width: 100%;
                        padding-top: 5px;
                        padding-bottom: 5px;

                        &.menu-item-has-children {
                            height: auto;
                            padding-bottom: 0;

                            > ul {
                                padding-top: 5px;
                            }
                        }
                    }
                }
            }

            & aside {
                & .widget {
                    padding-top: 0.5em;
                    padding-bottom: 0.5em;

                    & :is(input[type='text'], input[type='email'], input[type='url'], input[type='number']) {
                        width: 100%;
                    }
                }
            }

            & :is(ul, ol) {
                list-style-position: inside;
                margin-left: 20px;
            }
        }

        & > main {
            word-wrap: break-word;
            word-break: break-word;
            grid-area: 1 / 2 / 2 / 3;
            line-height: 1.5;
            overflow-x: auto;
            padding: 25px;

            /* phone + tablet */
            @media (min-width: 360px) and (max-width: 1023px) {
                grid-area: 1 / 1 / 2 / 3;
            }

            & .action-bar {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                width: 100%;
                height: 50px;
                margin-bottom: 10px;

                & span.link.hamburger {
                    margin-right: 10px;
                    padding: 5px;
                    cursor: pointer;

                    border: 2px solid var(--tb-action-color);
                    background-color: var(--tb-action-color);
                    color: var(--pure-white-color);

                    /* hover */

                    &:not([disabled]):is(:hover,:hover:visited,:hover:link) {
                        border: 2px solid var(--tb-action-alt-color);
                        background-color: var(--pure-white-color);
                        color: var(--tb-action-alt-color);
                    }
                }

                & span.phone-share-link {
                    margin-right: 10px;
                    padding: 5px;
                    cursor: pointer;

                    border: 2px solid var(--tb-action-alt-color);
                    background-color: var(--tb-action-alt-color);
                    color: var(--pure-white-color);

                    /* hover */

                    &:not([disabled]):is(:hover,:hover:visited,:hover:link) {
                        border: 2px solid var(--tb-action-alt-color);
                        background-color: var(--pure-white-color);
                        color: var(--tb-action-alt-color);
                    }
                }

                /* desktop */
                @media (min-width: 1024px) {
                    display: none;
                }
            }

            & h1:first-of-type {
                margin-top: 0;
            }

            & nav.breadcrumbs {
                margin-bottom: 10px;
            }

            & .post-view {
                display: flex;
                margin-top: 25px;
                padding: 15px 10px 15px 10px;

                /* phone */
                @media (min-width: 360px) and (max-width: 767px) {
                    flex-direction: column;
                }

                & img {
                    flex-shrink: 0;
                    width: 150px;
                    height: 150px;
                    object-fit: cover;
                    border: 2px solid var(--tb-bg-neutral-color);

                    /* phone */
                    @media (min-width: 360px) and (max-width: 767px) {
                        width: 100%;
                        object-fit: cover;
                    }
                }

                & .post-vcard {
                    padding-left: 15px;

                    /* phone */
                    @media (min-width: 360px) and (max-width: 767px) {
                        padding-left: 0;
                    }

                    & h2 {
                        margin-top: 0;
                        margin-bottom: 0;
                        word-wrap: break-word;
                        word-break: break-word;
                    }
                }
            }
        }

        & form {
            & input[type='text'],
            input[type='email'],
            input[type='url'],
            input[type='number'],
            input[type='password'],
            input[type='tel'],
            input[type='search'] {
                width: 100%;
                height: 32px;
                background-color: var(--tb-bg-color);
                border: 1px solid var(--wp-light-silver-gray);
            }

            &.submitted {
                &:invalid {
                    border-color: var(--tb-error-color);
                }
            }

            & input[type="checkbox"] + label, label:has(input[type="checkbox"]) {
                display: inline;
                font-weight: normal;
                color: var(--tb-text-color);
            }

            & input:not([type="checkbox"]) {
                height: 32px;
            }
        }

        & figure {
            margin: 0;

            &.is-resized {
                & img {
                    max-width: unset;
                }
            }
        }

        & .pagination {
            margin-top: 10px;
            padding: 10px;


            & .page-numbers {
                padding: 4px;
            }
        }

        & > footer {
            grid-area: 2 / 2 / 3 / 3;

            /* phone + tablet */
            @media (min-width: 360px) and (max-width: 1023px) {
                grid-area: 2 / 1 / 3 / 3;
            }

            & .menu-footer-menu-container ul.menu {
                margin: 25px 0 0;
                padding: 10px 0 0;
                display: block;
                list-style: none;

                & li {
                    display: inline;
                    padding-top: 5px;
                    padding-bottom: 5px;

                    &:not(:last-child) {
                        :after {
                            content: ' | ';
                            color: var(--tb-text-color) !important;
                        }
                    }
                }

            }
        }
    }


    & .screen-reader-text {
        display: none;
    }


    & a.image-zoom {
        cursor: zoom-in;
    }

    & blockquote {
        margin: 0;
    }

    & .material-symbols-outlined {
        width: 1ch;
        overflow: clip;
        font-family: "Material Symbols Outlined";
    }
}

&.single-post {
    & .page-content {
        & main {
            & #article-body {
                display: flow-root;
            }
        }
    }
}

&.page {
    & .page-content {
        & main {
            display: flow-root;
        }
    }
}

& .va-bottom {
    vertical-align: bottom;
}

& .va-middle {
    vertical-align: middle;
}

& .hide-mobile {
    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        display: none;
    }
}

& .hide-tablet {
    /* tablet */
    @media (min-width: 768px) and (max-width: 1023px) {
        display: none;
    }
}

& .only-tablet-and-phone {
    /* desktop */
    @media (min-width: 1024px) {
        display: none;
    }
}

& * {
    box-sizing: border-box;
}

& .full-width {
    width: 100%;
}

& .center-content {
    margin: 0 auto;
    position: relative;

    /* desktop */
    @media (min-width: 1024px) {
        max-width: 1280px;
        width: 90%;
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        width: 100%;
    }
}

& .center-content-narrow {
    margin: 0 auto;
    position: relative;

    /* desktop */
    @media (min-width: 1024px) {
        max-width: 1024px;
        width: 66.67%;
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        width: 100%;
    }
}

& .row {
    display: grid;
    max-width: 100%;
    grid-gap: 1rem;
    margin: 0 auto;

    /* desktop */
    @media (min-width: 1024px) {
        grid-template-columns: repeat(12, 1fr);
    }

    /* tablet */
    @media (min-width: 768px) and (max-width: 1023px) {
        grid-template-columns: repeat(8, 1fr);
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        grid-template-columns: repeat(1, 1fr);
    }

}

& :is(.one-column, .two-columns, .three-columns, .four-columns, .five-columns, .six-columns, .seven-columns, .eight-columns, .nine-columns, .ten-columns, .eleven-columns, .twelve-columns) {
    display: flex;
}

& .one-column {

    grid-column: span 1;

    /* tablet */
    @media (min-width: 768px) and (max-width: 1023px) {
        grid-column: span 1;
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        grid-column: span 1;
    }
}

& .two-columns {

    grid-column: span 2;

    /* tablet */
    @media (min-width: 768px) and (max-width: 1023px) {
        grid-column: span 2;
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        grid-column: span 1;
    }
}

& .three-columns {

    grid-column: span 3;

    /* tablet */
    @media (min-width: 768px) and (max-width: 1023px) {
        grid-column: span 2;
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        grid-column: span 1;
    }
}

& .four-columns {

    grid-column: span 4;

    /* tablet */
    @media (min-width: 768px) and (max-width: 1023px) {
        grid-column: span 4;
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        grid-column: span 1;
    }
}

& .five-columns {

    grid-column: span 5;

    /* tablet */
    @media (min-width: 768px) and (max-width: 1023px) {
        grid-column: span 4;
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        grid-column: span 1;
    }
}

& .six-columns {

    grid-column: span 6;

    /* tablet */
    @media (min-width: 768px) and (max-width: 1023px) {
        grid-column: span 4;
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        grid-column: span 1;
    }
}

& .seven-columns {

    grid-column: span 7;

    /* tablet */
    @media (min-width: 768px) and (max-width: 1023px) {
        grid-column: span 6;
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        grid-column: span 1;
    }
}

& .eight-columns {

    grid-column: span 8;

    /* tablet */
    @media (min-width: 768px) and (max-width: 1023px) {
        grid-column: span 6;
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        grid-column: span 1;
    }
}

& .nine-columns {

    grid-column: span 9;

    /* tablet */
    @media (min-width: 768px) and (max-width: 1023px) {
        grid-column: span 6;
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        grid-column: span 1;
    }
}

& .ten-columns {

    grid-column: span 10;

    /* tablet */
    @media (min-width: 768px) and (max-width: 1023px) {
        grid-column: span 6;
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        grid-column: span 1;
    }
}

& .eleven-columns {

    grid-column: span 11;

    /* tablet */
    @media (min-width: 768px) and (max-width: 1023px) {
        grid-column: span 8;
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        grid-column: span 1;
    }
}

& .twelve-columns {

    grid-column: span 12;

    /* tablet */
    @media (min-width: 768px) and (max-width: 1023px) {
        grid-column: span 8;
    }

    /* phone */
    @media (min-width: 360px) and (max-width: 767px) {
        grid-column: span 1;
    }
}


    </style>
    