style.css

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,500,500i,600,600i,700,700i|Vollkorn:400,400i,700,700i|Spectral:400,400i,500,500i,600,600i,700,700i|Gentium+Book+Basic:400,400i,700,700i|Merriweather:400,400i,700,700i&subset=latin-ext');
@import url("fonts/equity-b.css");
@import url("seymour/fira/fira.css");

html { font-size: 13px; }

body {
  font-family: 'equity-text', serif; 
  background-color: hsl(60,35%,99%);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  counter-reset: sidenote-counter section-counter;
  color: hsl(0, 0%, 18%);
}

a:link {
    background: 
      -webkit-linear-gradient(hsl(60,35%,99%), hsl(60,35%,99%)), 
      -webkit-linear-gradient(hsl(60,35%,99%), hsl(60,35%,99%)), 
      -webkit-linear-gradient(hsl(0, 0%, 20%), hsl(0, 0%, 20%));
    background: 
      linear-gradient(hsl(60,35%,99%), hsl(60,35%,99%)), 
      linear-gradient(hsl(60,35%,99%), hsl(60,35%,99%)), 
      linear-gradient(hsl(0, 0%, 20%), hsl(0, 0%, 20%));
    
    -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-size: 0.05em 1px, 0.05em 1px, 1px 1px;

    background-repeat: no-repeat, no-repeat, repeat-x;

    text-shadow: 
      0.03em 0 hsl(60,35%,99%), 
      -0.03em 0 hsl(60,35%,99%), 
      0 0.03em hsl(60,35%,99%), 
      0 -0.03em hsl(60,35%,99%), 
      0.06em 0 hsl(60,35%,99%), 
      -0.06em 0 hsl(60,35%,99%), 
      0.09em 0 hsl(60,35%,99%), 
      -0.09em 0 hsl(60,35%,99%), 
      0.12em 0 hsl(60,35%,99%), 
      -0.12em 0 hsl(60,35%,99%), 
      0.15em 0 hsl(60,35%,99%), 
      -0.15em 0 hsl(60,35%,99%);
    background-position: 0% 93%, 100% 93%, 0% 93%;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  a:link {
     background-position-y: 87%, 87%, 97%;
  }
}

#abstract > blockquote {
  width: 45%;
  font-size: 1.4rem;
  line-height: 1.8rem;
}

p, ul, ol {
  font-size: 1.5rem;
  line-height: 2.1rem;
}

h1, h2, h3, h4, h5,
p.subtitle {
  font-family: 'Fira Sans', sans-serif;
  color: #000;
}

p.subtitle {
  line-height: 1.3;
}

h1 {
  font-weight: 700;
}

h2, h3 {
  font-style:  normal;
  font-weight: 500;
}

code, pre.code {
  font-family: "Fira Mono", Consolas, Monaco, Courier, monospace;
  font-feature-settings: "liga" 0;
  font-size: 1.3rem;
}

.sidenote-number:after, .sidenote:before {
    font-family: 'equity-text', serif;
}

@media (max-width: 760px) {
  .sidenote, .marginnote {
      top: 0 !important;
  }
}

/* seymour env styling */

figure .controls {
  /* text-align: right; */
  background-color: hsl(60, 35%, 99%); /*Same as body bg*/
}

figure .controls .interactive {
  display: none;
}

figure.fullwidth > div.interactive,
figure.fullwidth > div.controls,
figure.fullwidth div.contents > div.interactive,
figure.fullwidth div.contents > div.controls {
  width: 960px;
}

div.interactive {
  border: 1px solid hsl(0, 0%, 80%);
  border-radius: 3px;
  display: none;
  background-color: hsl(60, 35%, 99%); /*Same as body bg*/
}

div.interactive > * {
  z-index: 100;
}

div.interactive .CodeMirror {
  font-family: inherit;
  min-width: 50%;
}

div.interactive > .microVizContainer {
  font-family: "Fira Mono";
  font-size: 15px;
  font-feature-settings: "liga" 0;
  padding: 0px;
}

div.interactive > .errorDiv {
  font-family: "Fira Sans";
  color: hsl(0, 50%, 70%);
  padding: 5px;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  background: hsl(0, 0%, 95%);
  cursor: row-resize;
}

div.interactive > .errorDiv:empty {
  padding: 0px;
  border: 0px;
}

div.interactive > .errorDiv.divider:empty {
  padding: 5px;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

#env6 .CodeMirror {
  /* min-width: 100%; */
}
#errorDiv6:empty {
  padding: 2px;
  border: 1px solid #ddd;
}

div.interactive .macroVizScroller {
  overflow-x: auto;
  overflow-y: auto;
  width: 100%;
  max-height: 50%;
  height: 50%;
}

#references li {
  padding-left: 2rem;
  text-indent: -1rem;
}

#references ol {
   width: 70%; 
}

img.light-bg-protect/*, video.light-bg-protect */{
    border: 1px solid #ccc;
}

img.light-bg-protect {
  border-radius: 4px;
}

img.block, video.block {
    display: block;
}

li {
  padding: 0.2rem 0;
}

span.sectionNumber::before {
  color: hsl(0, 0%, 70%);
  counter-increment: section-counter;
  content: counter(section-counter) " ";
}

.timestamp::before {
  content: attr(start) "–" attr(end);
}

img.sidenoteFigure {
  margin-top: 1rem;
}

.video-mask{
  width: 960px;
  /* -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); 
  -webkit-transform: rotate(0.000001deg);  */
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px;
  border-radius: 4px; 
  overflow: hidden; 
  border: 1px solid #ccc;
  cursor: pointer;
}

.video-mask > video {
  object-fit: cover;
}

em.keyword{
  color: #000;
}

label.margin-toggle:not(.sidenote-number) {
  display: initial;
}

label.margin-toggle:not(.sidenote-number).no-star::after {
  content: "";
}

label.margin-toggle:not(.sidenote-number)::after {
  content: "* ";
  position: relative;
  vertical-align: baseline;
  font-size: 1.2rem;
  top: -0.3rem;
  left: 0.1rem;
}

.marginnote:before { 
  content: "* ";
  top: -0.5rem; 
}

#codeHighlight {
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 2px;
  background-color: HSL(219, 82%, 75%);
  color: hsl(0, 0%, 100%);
  box-shadow: 2px 2px 2px hsl(0, 0%, 30%);
}

#macroDefinitionHighlight {
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 2px;
  background-color: HSL(216, 80%, 90%);
  box-shadow: 2px 2px hsl(0, 0%, 80%);
}

#macroCallHighlight {
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 2px;
  background-color: HSL(220, 84%, 85%);
  box-shadow: 2px 2px hsl(0, 0%, 80%);
}

#macroFocusHighlight {
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 2px;
  background-color: HSL(218, 91%, 65%);
  color: hsl(0, 0%, 100%);
  box-shadow: 2px 2px 2px hsl(0, 0%, 30%);
}

#fw-consumeChar {
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 2px;
  background-color: HSL(77, 56%, 80%);
}

#fw-parseError {
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 2px;
  color: HSL(0, 100%, 52%);
}

#fw-backtrack {
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 2px;
  background-color: HSL(191, 100%, 81%);
}

.scroll-wrapper {
  position: relative;
}

.stick {
  position: absolute;
  /* top: 1rem;  */
  transition: top 0.05s;
  z-index: 10000;
}