/* BEGIN YIN RANDOM CHEMICAL-HILBERT BACKGROUND */

/*
 * Background Studio image renderer.
 */
html.yin-background-studio-active {
    background-color:
        var(--yin-background-color, #000000) !important;

    background-image:
        var(--yin-background-image) !important;

    background-size:
        var(--yin-background-size, auto) !important;

    background-repeat:
        var(--yin-background-repeat, repeat) !important;

    background-position:
        var(--yin-background-position, left top) !important;

    background-attachment:
        var(--yin-background-attachment, scroll) !important;
}

/*
 * Reveal the selected root background.
 */
html.yin-background-studio-active body {
    background-color: transparent !important;
    background-image: none !important;
}

/*
 * Video formats cannot be rendered by background-image,
 * so they use a separate muted HTML video layer.
 */
html.yin-background-studio-video {
    background-image: none !important;
}

html.yin-background-studio-video body {
    position: relative;
    min-height: 100vh;
}

.yin-background-studio-video-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;

    background:
        var(--yin-background-color, #000000);
}

.yin-background-studio-video-layer video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;

    object-fit:
        var(--yin-video-fit, cover);

    object-position:
        var(--yin-video-position, center center);
}

/*
 * Keep the complete Penscratch page above the video.
 */
html.yin-background-studio-video body > #page {
    position: relative;
    z-index: 1;
}

/* END YIN RANDOM CHEMICAL-HILBERT BACKGROUND */