html, body, main {
    /* overscroll-behavior: none; */
    --accent: lightgray !important;
}

html {
    overflow-x: hidden;
}

a {
    color: var(--text);
}

.constrained {
    min-width: min(500px, 100%)
}

header {
    font-size: 1rem;
    height: 85px;
    background-blend-mode: multiply;
    background-color: #ffffff75;
    backdrop-filter: blur(5px);
    position: sticky;
    top: 0px;
    border-bottom: 2px solid var(--accent);

}

.hero {
    position: relative;
    padding-top: 90px;
    padding-bottom: var(--page-gutter);

    padding-inline: var(--page-gutter);
    top: -85px;
    background-image: url("/assets/stars.webp");

    background-size: cover;
    background-position: center;

    width: 100svw;
    margin-left: calc(var(--page-gutter) * -1);
    margin-top: calc(var(--page-gutter) * -1);

    margin-bottom: calc(-70px + var(--page-gutter));

    p {
        text-shadow: 0px 0px 2px white;
    }
}

.hero > flex,
section > flex,
section > div {
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
}


pre:has(code) {
    max-width: calc(100vw - (var(--page-gutter) * 2));
    background-color: #2b2c2d;
    padding: 20px;
    padding-bottom: 5px;
    border-radius: 15px;
    code.hljs {
        overflow-x: auto;
        border-radius: 15px;
        padding: 0;
        padding-bottom: 15px;
        scrollbar-color: lightgray lightgray;
    }
}

a:has(img) {
    display: flex;
    align-items: center;

    img {
        height: 1em;
        margin-left: .25em;
        position: relative;
        top: -1.5px
    }
}

/* Container */
pre.monokai-code {
    color: #f8f8f2;            /* Off-White Base Text */
    padding: 20px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: auto;
}

/* Syntax Highlighting Classes */
.kwd { color: #f92672; } /* Keywords (def, class, if, return) - Pink */
.typ { color: #66d9ef; font-style: italic; } /* Types/Classes (String, void) - Blue */
.str { color: #e6db74; } /* Strings - Yellow */
.cmt { color: #75715e; font-style: italic; } /* Comments - Grey */
.fun { color: #a6e22e; } /* Functions - Green */
.num { color: #ae81ff; } /* Numbers - Purple */
.var { color: #fd971f; } /* Variables - Orange */
.tag { color: #f92672; } /* HTML Tags - Pink */
.attr { color: #a6e22e; } /* HTML Attributes - Green */
.reactive { color: #66d9ef; background-color: #334; border-radius: 4px; padding: 0 4px; } /* Reactive GString - Blue with background */
.action { color: #fd971f; background-color: #443; border-radius: 4px; padding: 0 4px; } /* Action GString - Orange with background */
.gstring { color: #e6db74; } /* GString - Yellow */