#note-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--note-bg);

    contain: content;

    /* edge fade effect */
    &::after{
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        box-shadow: inset 0 0 1rem .5rem var(--note-bg);
    }

}
#note-wrapper[balls="true"]{
    background-color: oklch(from var(--note-bg) l c h / 0.7);
}

#note-content{
    position: absolute;
    top: 0;
    left: 0;
    transition: 0s;
}


.element{
    position: absolute;
    box-sizing: content-box;
    color: #fff;
    display: flex;
    translate: -50% -50%;

    transition: 0s;
    pre {
        div {
            font-size: inherit;
            font-family: inherit;
            color: inherit;
        }
    }
    * {
        transition: 0s;
    }
}

.element img{
    pointer-events: none;
}