/*-- scss:defaults --*/

h1 {
  font-family: serif;
  color: #777;
  line-height: 2.5em;
}

h2 {
  font-family: serif;
  font-weight: bold;
  font-variant: small-caps;
}

h3, h4, h5, h6 {
  font-family: serif;
  color: #999;
  font-weight: normal;
  font-variant: small-caps;
  font-size: 12pt;
}

.flushright {
  float: right;
}

.list-indent {
  padding-left: 2rem;
  font-size: 10pt;
}

.centered {
  text-align: center;
}

ol, ul {
  font-size: 10pt;
}


@media (min-width: 768px) {
  /* Create a 2-column container inside the text area */
  .nested-scrolly {
    display: grid;
    grid-template-columns: .75fr 1.75fr; /* Text is wider than image */
    gap: 2rem;
    align-items: start; /* Crucial for sticky to work */
  }

  /* The image container */
  .sticky-col {
    position: -webkit-sticky;
    position: sticky;
    top: 5rem; /* Distance from top of screen */
    height: auto;
    background-color: white;
  }
}