body {
    counter-reset: sidenote-counter;
}

.sidenote {
    float: right;
    clear: right;
    margin-right: -61%;
    width: 55%;
    margin-top: 0.3rem;
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.3;
    vertical-align: baseline;
    position: relative;
}

.sidenote-number {
    counter-increment: sidenote-counter;
}

.sidenote-number:after,
.sidenote:before {
    position: relative;
    vertical-align: baseline;
}

.sidenote-number:after {
    content: counter(sidenote-counter);
    font-size: 0.7rem;
    top: -0.3rem;
    left: 0.05rem;
}

.sidenote:before {
    content: counter(sidenote-counter) " ";
    font-size: 0.7rem;
    top: -0.3rem;
}

blockquote .sidenote,
blockquote .marginnote {
    margin-right: -75%;
    min-width: 59%;
}

.sidenote > code {
    font-size: 1rem;
}

input.margin-toggle {
    display: none;
}

label.sidenote-number {
    display: inline-block;
    max-height: 2rem;
}

label.margin-toggle:not(.sidenote-number) {
    display: none;
}

@media (max-width: 920px) {
    label.margin-toggle:not(.sidenote-number) {
        display: inline;
    }

    .sidenote {
        display: none;
    }

    .margin-toggle:checked + .sidenote {
        display: block;
        clear: both;
        width: 91%;
        margin: 0.7rem 1rem;
    }

    label {
        cursor: pointer;
    }
}