:root {
  --main-inner-width: 500px;
  --spacing-between-main-and-sidenotes: 1em;
  --sidenote-width: calc(var(--main-width) - var(--main-inner-width));

  --sidenote-display: block;
  --sidenote-visibility: visible;
}

.main-inner {
  padding: 1em;

  @media (min-width: calc(800px)) {
    width: var(--main-inner-width);
  }
  @media (max-width: calc(800px - 1px)) {
    width: 100%;
  }
}