/* backgrounds */

#crt_background {
    position: fixed;
    z-index: 1000;
    
    width: 100%;
    height: 100%;
    
    top: 0;

    filter: brightness(0.8)
            contrast(3)
            brightness(5);
    mix-blend-mode:multiply;

    user-select: none;
    pointer-events: none;
}

#crt_background img {
    width: 100%;
    height: 100%;

    opacity: 0.8;
    filter: contrast(5);
}

/* background_drawings */

#background_drawings {
    position: absolute;
    
    width: 100%;
    
    top: 0;
    left: 0;

    overflow: visible;
}

.background_drawing {
    position: absolute;
    
    user-select: none;
    pointer-events: none;
    
    mix-blend-mode: difference;
}

.background_drawing img {
    width: 100%;
    height: 100%;
    
    image-rendering: pixelated;
}

#background_01 {
    top: calc(var(--main_content_height) * 0.01);
}

#background_02 {
    height: calc(var(--main_content_height) * 0.7);

    top: calc(var(--main_content_height) * 0.15);
}

/* drawings */

.drawings {
    width: 50%;
    max-width: 450px;
    min-width: 300px;
    
    margin: 20px auto;
    
    filter: drop-shadow(10px 0 50px rgba(255, 0, 0, 30%))
            drop-shadow(-10px 0 50px rgba(255, 0, 0, 30%))
            drop-shadow(0 10px 50px rgba(255, 0, 0, 30%))
            drop-shadow(0 -10px 50px rgba(255, 0, 0, 30%));
    
    user-select: none;
    pointer-events: none;
}

.drawings img {
    width: 100%;
    image-rendering: pixelated;
}

#cassette {
    position: relative;
    width: fit-content;
    text-align: center;

    img { 
        width: 50%;
        filter: brightness(0)
                drop-shadow(2px 0 1px var(--sub_title_shadow_color))
                drop-shadow(-2px 1px var(--sub_title_shadow_color))
                drop-shadow(0 5px 5px var(--sub_title_shadow_color))
                drop-shadow(0 -5px var(--sub_title_shadow_color));
    }
}