.sidenote {
  display: inline;
}

.sidenote label {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(to right,#ffe1001a,#ffe1004d 10%,#ffe10033 90%,#ffe1001a);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sidenote:hover .sidenote__content {
  /* Future hover styles can be added here if needed */
}

.sidenote__checkbox {
  display: none;
}

/* Hidden, but accessible to browsers that don't do CSS (e.g. screenreaders, Pocket) */
.sidenote__content-parenthesis {
  position: absolute;
  left: -99999px;
  top: auto;
}

/* For narrow viewports, the sidenote is hidden by default and shown when the checkbox is checked. */
@media screen and (max-width: 1249px) {

  .sidenote__checkbox~.sidenote__content {
    /* Hidden, but accessible to browsers that don't do CSS (e.g. screenreaders, Pocket) */
    position: absolute;
    left: -99999px;
    top: auto;
  }

  .sidenote__checkbox:checked~.sidenote__content {
    position: relative;
    left: auto;
    float: left;
    min-width: 100%;
    display: block;
    margin: 0.8rem 0;
    padding: 5px;

    border-image: linear-gradient(
      to bottom,
      rgba(255, 225, 0, 0.1),
      rgba(255, 225, 0, 0.7) 4%,
      rgba(255, 225, 0, 0.3)) 1;
    border-top-left-radius: 255px 15px;
    border-bottom-left-radius: 15px 255px;
    border-left: 4px;
    border-top: 0;
    border-bottom: 0;
    border-right: 0;
    border-style: solid;
  }

  .sidenote__button {
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: pointer;
  }

  .sidenote__button:not(:hover):focus::after {
    display: inline;
  }

  .sidenote__checkbox:checked~.sidenote__button::after {
    content: none;
  }
}

@media screen and (min-width: 1250px) {
  .sidenote {
    --sidenote-width: 15rem;
    --sidenote-margin: 4.8rem;
    cursor: default;
  }

  .sidenote__content {
    display: block;
    position: absolute;
    right: 0;
    line-height: 1.5;
    padding: 5px 5px 5px 15px;
    margin-top: calc(-3.6*var(--text-size));
    margin-right: calc(-1*var(--sidenote-width) - 1*var(--sidenote-margin));
    width: var(--sidenote-width);
    calc(.8*var(--text-size));
    color: var(--text-color);
    /* text-align: justify; */

    border-image: linear-gradient(
      to bottom,
      rgba(255, 225, 0, 0.1),
      rgba(255, 225, 0, 0.7) 4%,
      rgba(255, 225, 0, 0.3)) 1;
      border-top-left-radius: 255px 15px;
      border-bottom-left-radius:15px 255px;
      border-left: 4px;
    border-top: 0;
    border-bottom: 0;
    border-right: 0;
    border-style: solid;
  }

}