div.code, pre { /*DIV.CODE used for terminal output and some small programs*/
  font-family: Inconsolata, monospace;
  letter-spacing: 0.062em;
  white-space: pre-wrap;
}
p div.code, article section div.code, aside div.code {
  background-color: black;
  background-image: radial-gradient( rgba(0, 150, 0, 0.75), black 120% );
  box-sizing: border-box;
  color: white;
  display: table; /*cross-browser "width: fit-content"*/
  line-height: 1.25;
  margin: 0 auto; /*center the content*/
  margin-bottom: 1em; /*leave this here*/
  padding: 1em;
  position: relative; /*scan lines*/
  text-shadow: 0 0 5px #C8C8C8;
}
p div.code::after, article section div.code::after, aside div.code::after { /*scan lines*/
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 2px,
    transparent 4px
  );
  content: '';
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}
p div.code::selection, article section div.code::selection, aside div.code::selection, aside div.code .Source_Code_Pro-bold::selection {
  background-color: #0080FF;
  color: black;
  text-shadow: none;
}
pre { /*general settings for SHJS*/
  box-sizing: border-box;
  margin: 0 auto; /*center the content*/
  /*top, right, bottom, left*/
  padding: 1em 1em 0 1em;
  width: fit-content;
}
aside pre { margin-bottom: 1em }
.ruler { /*PRE*/
  height: 600px; /*Screen Ruler*/
  overflow: auto;
}

@media only screen and (max-width: 600px) { /*ruler breakpoint*/
  div.code, pre { width: 100% }
}