html,
body {
    min-height: 100%;
    background-color: #09090b;
    color: #fafafa;
}

.site-body {
    position: relative;
    min-height: 100vh;
    background-color: #09090b;
}

.site-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: min(22rem, 72vw);
    background-position: center 22%;
    background-repeat: no-repeat;
    opacity: 0.72;
}

@media (min-width: 768px) {
    .site-bg {
        position: fixed;
        background-size: min(32rem, 46vw);
        background-position: right 2% center;
        opacity: 0.78;
    }
}

.site-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgb(9 9 11 / 0.72) 0%,
        rgb(9 9 11 / 0.78) 50%,
        rgb(9 9 11 / 0.82) 100%
    );
    pointer-events: none;
}

@media (min-width: 768px) {
    .site-bg-overlay {
        position: fixed;
    }
}

.site-shell {
    position: relative;
    z-index: 2;
    min-height: 100vh;
}

.site-panel {
    border-color: rgb(39 39 42 / 0.65);
    background-color: rgb(9 9 11 / 0.55);
    backdrop-filter: blur(10px);
}