:root {
    --DEMO_BG_COLOR: white;
    --DEMO_NOTE_BOX_COLOR: blue;
    --DEMO_NOTE_SHADOW_COLOR: lightblue;
    --DEMO_HIGHLIGHT_BOX_COLOR: red;
    --DEMO_HIGHLIGHT_SHADOW_COLOR: pink;
}

@media(prefers-color-scheme: dark) {
    :root {
	--DEMO_BG_COLOR: black;
    }
}

.fake_mouse_arrow {
    position: absolute;
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='10px' height='10px'><polygon points='0,0 5,10 5,5 10,5' fill='black' stroke='red' stroke-width='0.5'></polygon></svg>");
    background-size: contain;
    z-index: 200;
}

.demo_note {
    position: absolute;
    display: inline-block;
    border: 1px solid var(--DEMO_NOTE_BOX_COLOR);
    box-shadow: 0 0 10px var(--DEMO_NOTE_SHADOW_COLOR);
    padding: 15px;
    background: var(--DEMO_BG_COLOR);
    max-width: 250px;
    z-index: 199
}

.demo_highlight_box {
    position: absolute;
    display:inline-block;
    background: transparent;
    border: 1px solid var(--DEMO_HIGHLIGHT_BOX_COLOR);
    box-shadow: inset 0 0 10px var(--DEMO_HIGHLIGHT_SHADOW_COLOR);
    z-index: 198;
}