:root:root body {
    background-color: var(--page-bg);
    color: var(--stone-800);
    font-family: var(--font-body);
}

:root:root .l-wrapper {
    background:
        linear-gradient(90deg, rgba(8, 2, 3, 0.86) 0%, rgba(8, 2, 3, 0.5) 38%, rgba(8, 2, 3, 0.12) 100%),
        linear-gradient(180deg, rgba(8, 2, 3, 0.35), rgba(8, 2, 3, 0.7)),
        var(--el-bg) right center / cover fixed no-repeat,
        var(--page-bg);
}

:root:root h1,
:root:root h2,
:root:root h3,
:root:root h4 {
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    color: var(--stone-900);
}

:root:root ::selection {
    background: rgba(240, 23, 38, 0.5);
    color: #fff;
}

:root:root a {
    color: var(--gold);
}

:root:root a:hover {
    color: var(--gold-soft);
}

:root:root ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

:root:root ::-webkit-scrollbar-track {
    background: rgba(8, 2, 3, 0.8);
}

:root:root ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #a50f19, #5c070c);
    border: 2px solid rgba(8, 2, 3, 0.9);
    border-radius: 99px;
}

:root:root :focus-visible {
    outline: 2px solid rgba(217, 188, 129, 0.28);
    outline-offset: 2px;
}

:root:root .l-main,
:root:root .l-page,
:root:root body {
    background: transparent;
}

:root:root html,
:root:root {
    background-color: var(--page-bg);
}