assets/css/component/background.css

#background-footer,
#background-header,
#background-body {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100vw;
    height: 100vh;
}

#background-footer,
#background-header,
#background-body,
#a11y,
#lightSwitchIndicator,
#setContrast,
#colorPalette,
ul.carousel__viewport > li > a > span::before,
ul.carousel__viewport > li > a > span::after,
ul.carousel__viewport > li > a > span,
#list-categories a:hover::after,
.letterine > i {
    -webkit-transition: var(--flashGuard);
       -moz-transition: var(--flashGuard);
         -o-transition: var(--flashGuard);
            transition: var(--flashGuard);
}

#background-body,
.background {
    background-color: var(--bg);
}

#background-header {
    /* border-bottom: var(--border); */
    height: var(--vhead);
}

#background-footer {
    top: unset;
    bottom: 0;
    /* border-top: var(--border); */
    height: var(--vfoot);
}

/* grain */

.grain,
#grain {
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' viewBox='0 0 256 256' width='256' height='256' opacity='1' id='svgrain' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'><defs id='defs'><filter id='grain' x='0' y='0' width='1' height='1' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'><feTurbulence type='turbulence' baseFrequency='0.7' numOctaves='7' seed='42' stitchTiles='stitch' x='-1%' y='-1%' width='102%' height='102%' result='turbulence' id='feTurbulence' /><feSpecularLighting surfaceScale='7' specularConstant='3' specularExponent='10' lighting-color='%23ffffff' x='-1%' y='-1%' width='102%' height='102%' in='turbulence' result='specularLighting' id='feSpecularLighting'><feDistantLight azimuth='3' elevation='163' id='feDistantLight4' /></feSpecularLighting></filter></defs><rect width='320' height='320' fill='%23000000' id='blackbody' x='-32' y='-32' opacity='0.03' /><rect width='320' height='320' fill='%23ffffff' filter='url(%23grain)' id='noise' x='-32' y='-32' opacity='0.03' /></svg>");
    mix-blend-mode: difference;
}

#grain {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* distraction */

#dwclock {
    opacity: 0.33;
    margin: auto;
    width: 100vmin;
    height: 100vmin;
    filter: blur(2vmin) saturate(2);
}

#hour,
#min {
    position: absolute;
    width: 100vmin;
    height: 100vmin;
}

.hand {
    --min: 40vmin;
    --hour: 28vmin;
    --tsf: translateY(calc(50vmin - var(--min)));
    margin: 0 auto auto ;
    border-right: 2vmin solid transparent;
    border-bottom: var(--min) solid #60f;
    border-left: 2vmin solid transparent;
    border-radius: 2vmin;
    background-image: linear-gradient(0deg, var(--bg) 0%, #60f 100%);
    width: 3vmin;
    height: var(--min);
}

#hour .hand {
    --tsf: translateY(calc(50vmin - var(--hour)));
    border-bottom: var(--hour) solid #20f;
    background-image: linear-gradient(0deg, var(--bg) 0%, #20f 100%);
    height: var(--hour);
}