*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.2rem;
  line-height: 1.6;
  color: #231C33;
  max-width: 50rem;
  padding: 1rem;
  margin: auto;
  background: #FCFCFC;
}
h1,h2,h3 {
  text-align: center;
}
h1 {
  font-size: 2.2rem;
}
h2 {
  font-size: 1.6rem;
}
img {
  max-width: 100%;
  filter: drop-shadow(1px 2px 8px hsl(220deg 60% 50% / 0.3));
}
.side-by-side span {
  padding-bottom: 10px;
  display: inline-block;
}
@media(min-device-width: 812px) {
  .side-by-side {
    display: inline-block;
    vertical-align:top;
    width:49%;
  }
}

h1 a,h2 a,h3 a {
  color: #0c8ade;
}
a {
  color: #0979c3;
  text-decoration: none;
}
p {
  margin: 25px 0;
}
pre.citation {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
pre code {
  display: block;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
  max-width: 100%;
  min-width: 100px;
  border-radius: 8px;
  padding: 16px;
}
code {
  background-color: #c5ccd359;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}
.flex-space-between {
  display: flex;
  justify-content: space-between;
}
.align-center{
  text-align: center;
}
.pre-header {
  text-align: center;
  font-size: 1rem;
  color: #231c33a8;
  margin-bottom: 0px;
}
.pre-header + h1 {
  margin-top: 0px;
}
.date {
  margin-right: 15px;
  width: 100px;
  display: inline-block;
}