/*
Make sure that your main content container has position: relative;
Otherwise your sidenotes may show up in weird places, or even off the side of the screen.
In my case, I added position: relative; to my `.post` selector.
*/
:root {
    --neon-pink: #ff6ec7;
}

.sidenote:hover {
    background-color: var(--neon-pink);
}

.sidenote:hover .sidenote-label {
    text-decoration: none;
}

.sidenote:hover .sidenote-content {
    border: dashed 3px var(--neon-pink);
}

.sidenote .sidenote-label {
    text-decoration: underline dashed var(--neon-pink);
}

.sidenote-checkbox {
    display: none;
}

.sidenote-content {
    display: block;
    position: absolute;
    width: 240px;
    box-sizing: border-box;
    margin-top: -1.5em;
    border: solid 1px var(--border-color);
    padding: 0.5rem;
    font-size: .75rem;
}

.sidenote-content.sidenote-right {
    right: 0;
    margin-right: -250px;
}

.sidenote-content.sidenote-left {
    left: 0;
    margin-left: -250px;
}

@media screen and (max-width: 1320px) {
    .sidenote-content {
        position: static;
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
        display: none;
    }

    .sidenote-checkbox:checked ~ .sidenote-content {
        display: block;
    }

    .sidenote-content.sidenote-right {
        margin-right: 0;
    }

    .sidenote-content.sidenote-left {
        margin-left: 0;
    }
}