style.scss

/*-- scss:defaults --*/

$body-bg: #222;

/*-- scss:rules --*/

:root {
  --red: #983E82;   /* hsl(315, 42%, 42%) */
  --orange: #E2A458; /* hsl( 33, 70%, 62%) */
  --yellow: #F5DC70; /* hsl( 49, 87%, 70%) */
  --green: #59935B;  /* hsl(122, 25%, 46%) */
  --blue: #467AAC;   /* hsl(209, 42%, 47%) */
  --purple: #61589C; /* hsl(248, 28%, 48%) */
}

/* rainbow borders */
.slide-background-content {
  margin-top: 24px;
  box-shadow: 0 -4px 0 0px var(--purple),
              0 -8px 0 0px var(--blue),
              0 -12px 0 0px var(--green),
              0 -16px 0 0px var(--yellow),
              0 -20px 0 0px var(--orange),
              0 -24px 0 0px var(--red);
}

smaller {
  font-size: 0.5em;
}

code.sourceCode {
  font-size: 1.3em;
}

p.caption, figcaption {
  text-align: center;
  font-size: 1.5em !important;
}

.people img {
  box-shadow: 0 0 0 2px var(--purple),
              0 0 0 4px var(--blue),
              0 0 0 6px var(--green),
              0 0 0 8px var(--yellow),
              0 0 0 10px var(--orange),
              0 0 0 12px var(--red);
  border-radius: 50%;
  width: 80%;
}

hl {
  color: var(--yellow);
}