/* additional style for RWH in HTML */

nav {
  padding: 1rem;
  background-color: var(--captionbox-color);
}

article {
  padding: 5rem 1rem;
  margin: 0 auto;
  max-width: 40rem;
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

@media print {
  nav {display: none; }
}

@media screen {
 @media (min-width: 50rem) {
  nav {
    position:absolute;
    height:100%;
    left:0;
    width:18rem; /* +2rem padding */
    overflow: scroll;
  }

  main {
    position:absolute;
    height:100%;
    left:20rem;
    right:0;
    overflow: scroll;
  }
 }
}