:root {
  --link-color: #8D742A; }

/*
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.
*/
.post, .content {
  counter-reset: sidenote-counter; }

.sidenote {
  counter-increment: sidenote-counter; }
  .sidenote .sidenote-label {
    text-decoration: underline dashed var(--link-color); }
    .sidenote .sidenote-label::after {
      content: counter(sidenote-counter, upper-roman);
      font-size: 0.7em;
      vertical-align: super;
      margin-left: 0.2em; }
  .sidenote .sidenote-content::before {
    content: counter(sidenote-counter, upper-roman);
    font-size: 0.7em;
    vertical-align: super;
    margin-right: 0.3em;
    font-weight: bold; }

.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: relative;
      float: left;
      margin-top: 0.1rem;
      width: 100%;
      display: none; }
      .sidenote-checkbox:checked ~ .sidenote-content {
        display: block; }
      .sidenote-content.sidenote-right {
        margin-right: 0px; }
      .sidenote-content.sidenote-left {
        margin-left: 0px; } }