@import url("https://fonts.googleapis.com/css?family=Open+Sans|Lato:300,400,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
@import url("https://fonts.googleapis.com/css?family=Merriweather&display=swap");
@use "sass:color" as *;
/**
 * Given a template color, return a backgronud color.
 */
/**
 * Given a template color, return a border color.
 */
/**
 * Given a template color, return a text color.
 */
/**
 * Given a template color, return a "strong" text color.
 */
@media all and (max-width: 800px) {
  main {
    width: 90%; } }
@media all and (min-width: 801px) {
  main {
    width: 70%; } }
@media all and (max-width: 800px) {
  html {
    font-size: 40%; } }
@media all and (min-width: 801px) {
  html {
    font-size: 62.5%; } }
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none; }

ul, ol {
  margin-left: 3rem; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden; }

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.6rem; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  line-height: 170%;
  color: #222;
  margin-top: 2rem;
  margin-bottom: 2rem; }

h1 {
  font-size: 6rem; }

h2 {
  font-size: 5rem; }

h3 {
  font-size: 3.5rem; }

h4 {
  font-size: 2.5rem; }

h5 {
  font-size: 2rem; }

h6 {
  font-size: 1.8rem; }

p, li, td, th {
  line-height: 200%;
  color: #444;
  font-size: 1.8rem;
  letter-spacing: 1px;
  margin-bottom: 1.8rem; }

main {
  margin: auto;
  margin-top: 2rem;
  background-color: #fff; }

strong {
  color: #000; }

.full-page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative; }

.page-centered {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.tinted {
  background-color: #eeeeee; }

.bg-warning {
  background-color: #f6f655; }

.text-warning {
  color: #999900; }
  .text-warning strong {
    color: #666600; }

strong.text-warning {
  color: #666600; }

.bg-note {
  background-color: #55f6f6; }

.text-note {
  color: #009999; }
  .text-note strong {
    color: #006666; }

strong.text-note {
  color: #006666; }

.bg-error {
  background-color: #f65555; }

.text-error {
  color: #990000; }
  .text-error strong {
    color: #660000; }

strong.text-error {
  color: #660000; }

.bg-success {
  background-color: #55f655; }

.text-success {
  color: #009900; }
  .text-success strong {
    color: #006600; }

strong.text-success {
  color: #006600; }

.bg-primary {
  background-color: #5555f6; }

.text-primary {
  color: #000099; }
  .text-primary strong {
    color: #000066; }

strong.text-primary {
  color: #000066; }

.bg-danger {
  background-color: #f6ab55; }

.text-danger {
  color: #995200; }
  .text-danger strong {
    color: #663600; }

strong.text-danger {
  color: #663600; }

.bg-secondary {
  background-color: #aeaeae; }

.text-secondary {
  color: #802b2b; }
  .text-secondary strong {
    color: #770000; }

strong.text-secondary {
  color: #770000; }

.bg-black {
  background-color: #262626; }

.text-black {
  color: black; }
  .text-black strong {
    color: black; }

strong.text-black {
  color: black; }

.bg-blue {
  background-color: #5555f6; }

.text-blue {
  color: #000099; }
  .text-blue strong {
    color: #000066; }

strong.text-blue {
  color: #000066; }

.bg-green {
  background-color: #55f655; }

.text-green {
  color: #009900; }
  .text-green strong {
    color: #006600; }

strong.text-green {
  color: #006600; }

.bg-cyan {
  background-color: #55f6f6; }

.text-cyan {
  color: #009999; }
  .text-cyan strong {
    color: #006666; }

strong.text-cyan {
  color: #006666; }

.bg-red {
  background-color: #f65555; }

.text-red {
  color: #990000; }
  .text-red strong {
    color: #660000; }

strong.text-red {
  color: #660000; }

.bg-magenta {
  background-color: #f655f6; }

.text-magenta {
  color: #990099; }
  .text-magenta strong {
    color: #660066; }

strong.text-magenta {
  color: #660066; }

.bg-yellow {
  background-color: #f6f655; }

.text-yellow {
  color: #999900; }
  .text-yellow strong {
    color: #666600; }

strong.text-yellow {
  color: #666600; }

.bg-white {
  background-color: white; }

.text-white {
  color: #e6b3b3; }
  .text-white strong {
    color: #ff6666; }

strong.text-white {
  color: #ff6666; }

.bg-orange {
  background-color: #f6ab55; }

.text-orange {
  color: #995200; }
  .text-orange strong {
    color: #663600; }

strong.text-orange {
  color: #663600; }

.bg-pink {
  background-color: #f655ab; }

.text-pink {
  color: #990052; }
  .text-pink strong {
    color: #660036; }

strong.text-pink {
  color: #660036; }

pre {
  border: 1px #dddddd solid;
  margin: 1rem;
  width: 100%;
  background-color: #fafafa;
  color: #000;
  font-family: "Roboto Mono", monospace;
  font-size: 1.8rem;
  padding: 1rem;
  border-radius: 1rem;
  white-space: pre-wrap;
  word-wrap: break-word; }
  pre::selection, pre *::selection {
    background-color: #11eeee;
    color: #000; }
  pre.console {
    background-color: #000;
    color: #ddd; }

code {
  color: #ff7700;
  font-family: "Roboto Mono", monospace; }

.keyword {
  color: #3333ff; }

.string {
  color: #228822; }

.number {
  color: #aa00aa; }

.builtin {
  color: #558888; }

.comment {
  color: #ff7700; }

.preprocessor {
  color: #AAAAAA; }

a:link, a:visited {
  color: #5555ff;
  text-decoration: none;
  transition: all .1s ease-out;
  transition-property: background-color, color; }
a:active, a:hover {
  color: #ff5555;
  text-decoration: none; }

.alert {
  border-width: 1px;
  border-style: solid;
  border-radius: 1.5rem;
  padding: 2rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
  font-size: 1.8rem; }
  .alert-warning {
    border-color: #f7f76e;
    background-color: #f6f655;
    color: #999900; }
    .alert-warning strong, .alert-warning h1, .alert-warning h2, .alert-warning h3, .alert-warning h4, .alert-warning h5, .alert-warning h6 {
      color: #666600;
      font-weight: bold; }
  .alert-note {
    border-color: #6ef7f7;
    background-color: #55f6f6;
    color: #009999; }
    .alert-note strong, .alert-note h1, .alert-note h2, .alert-note h3, .alert-note h4, .alert-note h5, .alert-note h6 {
      color: #006666;
      font-weight: bold; }
  .alert-error {
    border-color: #f76e6e;
    background-color: #f65555;
    color: #990000; }
    .alert-error strong, .alert-error h1, .alert-error h2, .alert-error h3, .alert-error h4, .alert-error h5, .alert-error h6 {
      color: #660000;
      font-weight: bold; }
  .alert-success {
    border-color: #6ef76e;
    background-color: #55f655;
    color: #009900; }
    .alert-success strong, .alert-success h1, .alert-success h2, .alert-success h3, .alert-success h4, .alert-success h5, .alert-success h6 {
      color: #006600;
      font-weight: bold; }
  .alert-primary {
    border-color: #6e6ef7;
    background-color: #5555f6;
    color: #000099; }
    .alert-primary strong, .alert-primary h1, .alert-primary h2, .alert-primary h3, .alert-primary h4, .alert-primary h5, .alert-primary h6 {
      color: #000066;
      font-weight: bold; }
  .alert-danger {
    border-color: #f7b76e;
    background-color: #f6ab55;
    color: #995200; }
    .alert-danger strong, .alert-danger h1, .alert-danger h2, .alert-danger h3, .alert-danger h4, .alert-danger h5, .alert-danger h6 {
      color: #663600;
      font-weight: bold; }
  .alert-secondary {
    border-color: #bbbbbb;
    background-color: #aeaeae;
    color: #802b2b; }
    .alert-secondary strong, .alert-secondary h1, .alert-secondary h2, .alert-secondary h3, .alert-secondary h4, .alert-secondary h5, .alert-secondary h6 {
      color: #770000;
      font-weight: bold; }
  .alert-black {
    border-color: #333333;
    background-color: #262626;
    color: black; }
    .alert-black strong, .alert-black h1, .alert-black h2, .alert-black h3, .alert-black h4, .alert-black h5, .alert-black h6 {
      color: black;
      font-weight: bold; }
  .alert-blue {
    border-color: #6e6ef7;
    background-color: #5555f6;
    color: #000099; }
    .alert-blue strong, .alert-blue h1, .alert-blue h2, .alert-blue h3, .alert-blue h4, .alert-blue h5, .alert-blue h6 {
      color: #000066;
      font-weight: bold; }
  .alert-green {
    border-color: #6ef76e;
    background-color: #55f655;
    color: #009900; }
    .alert-green strong, .alert-green h1, .alert-green h2, .alert-green h3, .alert-green h4, .alert-green h5, .alert-green h6 {
      color: #006600;
      font-weight: bold; }
  .alert-cyan {
    border-color: #6ef7f7;
    background-color: #55f6f6;
    color: #009999; }
    .alert-cyan strong, .alert-cyan h1, .alert-cyan h2, .alert-cyan h3, .alert-cyan h4, .alert-cyan h5, .alert-cyan h6 {
      color: #006666;
      font-weight: bold; }
  .alert-red {
    border-color: #f76e6e;
    background-color: #f65555;
    color: #990000; }
    .alert-red strong, .alert-red h1, .alert-red h2, .alert-red h3, .alert-red h4, .alert-red h5, .alert-red h6 {
      color: #660000;
      font-weight: bold; }
  .alert-magenta {
    border-color: #f76ef7;
    background-color: #f655f6;
    color: #990099; }
    .alert-magenta strong, .alert-magenta h1, .alert-magenta h2, .alert-magenta h3, .alert-magenta h4, .alert-magenta h5, .alert-magenta h6 {
      color: #660066;
      font-weight: bold; }
  .alert-yellow {
    border-color: #f7f76e;
    background-color: #f6f655;
    color: #999900; }
    .alert-yellow strong, .alert-yellow h1, .alert-yellow h2, .alert-yellow h3, .alert-yellow h4, .alert-yellow h5, .alert-yellow h6 {
      color: #666600;
      font-weight: bold; }
  .alert-white {
    border-color: white;
    background-color: white;
    color: #e6b3b3; }
    .alert-white strong, .alert-white h1, .alert-white h2, .alert-white h3, .alert-white h4, .alert-white h5, .alert-white h6 {
      color: #ff6666;
      font-weight: bold; }
  .alert-orange {
    border-color: #f7b76e;
    background-color: #f6ab55;
    color: #995200; }
    .alert-orange strong, .alert-orange h1, .alert-orange h2, .alert-orange h3, .alert-orange h4, .alert-orange h5, .alert-orange h6 {
      color: #663600;
      font-weight: bold; }
  .alert-pink {
    border-color: #f76eb7;
    background-color: #f655ab;
    color: #990052; }
    .alert-pink strong, .alert-pink h1, .alert-pink h2, .alert-pink h3, .alert-pink h4, .alert-pink h5, .alert-pink h6 {
      color: #660036;
      font-weight: bold; }

.quote {
  background-color: #f0f0f0;
  font-family: 'Merriweather', serif;
  font-size: 2rem;
  font-style: italic;
  margin: 2rem 2px;
  border-left: 1.5rem black solid;
  line-height: 250%;
  letter-spacing: 2px;
  padding: 1rem 3rem; }
  .quote-warning {
    border-color: #f6f655; }
  .quote-note {
    border-color: #55f6f6; }
  .quote-error {
    border-color: #f65555; }
  .quote-success {
    border-color: #55f655; }
  .quote-primary {
    border-color: #5555f6; }
  .quote-danger {
    border-color: #f6ab55; }
  .quote-secondary {
    border-color: #aeaeae; }
  .quote-black {
    border-color: #262626; }
  .quote-blue {
    border-color: #5555f6; }
  .quote-green {
    border-color: #55f655; }
  .quote-cyan {
    border-color: #55f6f6; }
  .quote-red {
    border-color: #f65555; }
  .quote-magenta {
    border-color: #f655f6; }
  .quote-yellow {
    border-color: #f6f655; }
  .quote-white {
    border-color: white; }
  .quote-orange {
    border-color: #f6ab55; }
  .quote-pink {
    border-color: #f655ab; }

.btn {
  display: block;
  padding: 2rem 5rem;
  border-radius: 0;
  border: none;
  cursor: default;
  margin: 0.5rem;
  text-align: center; }
  .btn-warning, .btn-warning:link, .btn-warning:visited, .btn-warning:hover, .btn-warningactive {
    background-color: #f6f655;
    color: #999900; }
  .btn-warning:hover {
    background-color: #f9f986;
    color: #999900;
    transform: translateY(-1px); }
  .btn-warning:active {
    background-color: #f4f425;
    color: #999900;
    transform: translateY(1px); }
  .btn-note, .btn-note:link, .btn-note:visited, .btn-note:hover, .btn-noteactive {
    background-color: #55f6f6;
    color: #009999; }
  .btn-note:hover {
    background-color: #86f9f9;
    color: #009999;
    transform: translateY(-1px); }
  .btn-note:active {
    background-color: #25f4f4;
    color: #009999;
    transform: translateY(1px); }
  .btn-error, .btn-error:link, .btn-error:visited, .btn-error:hover, .btn-erroractive {
    background-color: #f65555;
    color: #990000; }
  .btn-error:hover {
    background-color: #f98686;
    color: #990000;
    transform: translateY(-1px); }
  .btn-error:active {
    background-color: #f42525;
    color: #990000;
    transform: translateY(1px); }
  .btn-success, .btn-success:link, .btn-success:visited, .btn-success:hover, .btn-successactive {
    background-color: #55f655;
    color: #009900; }
  .btn-success:hover {
    background-color: #86f986;
    color: #009900;
    transform: translateY(-1px); }
  .btn-success:active {
    background-color: #25f425;
    color: #009900;
    transform: translateY(1px); }
  .btn-primary, .btn-primary:link, .btn-primary:visited, .btn-primary:hover, .btn-primaryactive {
    background-color: #5555f6;
    color: #000099; }
  .btn-primary:hover {
    background-color: #8686f9;
    color: #000099;
    transform: translateY(-1px); }
  .btn-primary:active {
    background-color: #2525f4;
    color: #000099;
    transform: translateY(1px); }
  .btn-danger, .btn-danger:link, .btn-danger:visited, .btn-danger:hover, .btn-dangeractive {
    background-color: #f6ab55;
    color: #995200; }
  .btn-danger:hover {
    background-color: #f9c386;
    color: #995200;
    transform: translateY(-1px); }
  .btn-danger:active {
    background-color: #f49325;
    color: #995200;
    transform: translateY(1px); }
  .btn-secondary, .btn-secondary:link, .btn-secondary:visited, .btn-secondary:hover, .btn-secondaryactive {
    background-color: #aeaeae;
    color: #802b2b; }
  .btn-secondary:hover {
    background-color: #c8c8c8;
    color: #802b2b;
    transform: translateY(-1px); }
  .btn-secondary:active {
    background-color: #959595;
    color: #802b2b;
    transform: translateY(1px); }
  .btn-black, .btn-black:link, .btn-black:visited, .btn-black:hover, .btn-blackactive {
    background-color: #262626;
    color: black; }
  .btn-black:hover {
    background-color: #404040;
    color: black;
    transform: translateY(-1px); }
  .btn-black:active {
    background-color: #0d0d0d;
    color: black;
    transform: translateY(1px); }
  .btn-blue, .btn-blue:link, .btn-blue:visited, .btn-blue:hover, .btn-blueactive {
    background-color: #5555f6;
    color: #000099; }
  .btn-blue:hover {
    background-color: #8686f9;
    color: #000099;
    transform: translateY(-1px); }
  .btn-blue:active {
    background-color: #2525f4;
    color: #000099;
    transform: translateY(1px); }
  .btn-green, .btn-green:link, .btn-green:visited, .btn-green:hover, .btn-greenactive {
    background-color: #55f655;
    color: #009900; }
  .btn-green:hover {
    background-color: #86f986;
    color: #009900;
    transform: translateY(-1px); }
  .btn-green:active {
    background-color: #25f425;
    color: #009900;
    transform: translateY(1px); }
  .btn-cyan, .btn-cyan:link, .btn-cyan:visited, .btn-cyan:hover, .btn-cyanactive {
    background-color: #55f6f6;
    color: #009999; }
  .btn-cyan:hover {
    background-color: #86f9f9;
    color: #009999;
    transform: translateY(-1px); }
  .btn-cyan:active {
    background-color: #25f4f4;
    color: #009999;
    transform: translateY(1px); }
  .btn-red, .btn-red:link, .btn-red:visited, .btn-red:hover, .btn-redactive {
    background-color: #f65555;
    color: #990000; }
  .btn-red:hover {
    background-color: #f98686;
    color: #990000;
    transform: translateY(-1px); }
  .btn-red:active {
    background-color: #f42525;
    color: #990000;
    transform: translateY(1px); }
  .btn-magenta, .btn-magenta:link, .btn-magenta:visited, .btn-magenta:hover, .btn-magentaactive {
    background-color: #f655f6;
    color: #990099; }
  .btn-magenta:hover {
    background-color: #f986f9;
    color: #990099;
    transform: translateY(-1px); }
  .btn-magenta:active {
    background-color: #f425f4;
    color: #990099;
    transform: translateY(1px); }
  .btn-yellow, .btn-yellow:link, .btn-yellow:visited, .btn-yellow:hover, .btn-yellowactive {
    background-color: #f6f655;
    color: #999900; }
  .btn-yellow:hover {
    background-color: #f9f986;
    color: #999900;
    transform: translateY(-1px); }
  .btn-yellow:active {
    background-color: #f4f425;
    color: #999900;
    transform: translateY(1px); }
  .btn-white, .btn-white:link, .btn-white:visited, .btn-white:hover, .btn-whiteactive {
    background-color: white;
    color: #e6b3b3; }
  .btn-white:hover {
    background-color: white;
    color: #e6b3b3;
    transform: translateY(-1px); }
  .btn-white:active {
    background-color: #e6e6e6;
    color: #e6b3b3;
    transform: translateY(1px); }
  .btn-orange, .btn-orange:link, .btn-orange:visited, .btn-orange:hover, .btn-orangeactive {
    background-color: #f6ab55;
    color: #995200; }
  .btn-orange:hover {
    background-color: #f9c386;
    color: #995200;
    transform: translateY(-1px); }
  .btn-orange:active {
    background-color: #f49325;
    color: #995200;
    transform: translateY(1px); }
  .btn-pink, .btn-pink:link, .btn-pink:visited, .btn-pink:hover, .btn-pinkactive {
    background-color: #f655ab;
    color: #990052; }
  .btn-pink:hover {
    background-color: #f986c3;
    color: #990052;
    transform: translateY(-1px); }
  .btn-pink:active {
    background-color: #f42593;
    color: #990052;
    transform: translateY(1px); }

.box {
  display: grid; }

@media all and (max-width: 800px) {
  /* really small screens, stack all boxes vertically */
  .box-1 {
    grid-template-columns: 1fr; }

  .box-2 {
    grid-template-columns: 1fr; }

  .box-3 {
    grid-template-columns: 1fr; }

  .box-4 {
    grid-template-columns: 1fr; }

  .box-5 {
    grid-template-columns: 1fr; }

  .box-6 {
    grid-template-columns: 1fr; }

  .box-7 {
    grid-template-columns: 1fr; }

  .box-8 {
    grid-template-columns: 1fr; }

  .box-9 {
    grid-template-columns: 1fr; }

  .box-10 {
    grid-template-columns: 1fr; }

  .box-11 {
    grid-template-columns: 1fr; }

  .box-12 {
    grid-template-columns: 1fr; } }
@media all and (min-width: 801px) {
  /* nice big screen, stack horizontally */
  .box-1 {
    grid-template-columns: repeat(1, 1fr); }

  .box-2 {
    grid-template-columns: repeat(2, 1fr); }

  .box-3 {
    grid-template-columns: repeat(3, 1fr); }

  .box-4 {
    grid-template-columns: repeat(4, 1fr); }

  .box-5 {
    grid-template-columns: repeat(5, 1fr); }

  .box-6 {
    grid-template-columns: repeat(6, 1fr); }

  .box-7 {
    grid-template-columns: repeat(7, 1fr); }

  .box-8 {
    grid-template-columns: repeat(8, 1fr); }

  .box-9 {
    grid-template-columns: repeat(9, 1fr); }

  .box-10 {
    grid-template-columns: repeat(10, 1fr); }

  .box-11 {
    grid-template-columns: repeat(11, 1fr); }

  .box-12 {
    grid-template-columns: repeat(12, 1fr); } }
.banner {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr; }
  .banner-title {
    font-family: 'Lato', sans-serif;
    font-size: 12rem;
    font-weight: 700;
    letter-spacing: 1rem; }
  .banner-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 6rem;
    font-weight: 300;
    letter-spacing: 3rem; }
  .banner .btn {
    margin-left: auto;
    margin-right: auto;
    font-size: 2.5rem;
    display: inline-block; }

.center {
  text-align: center; }

.small {
  font-size: 1.2rem; }

.dim {
  color: #777777; }

@keyframes fly-in-from-left {
  from {
    opacity: 0;
    transform: translateX(-100%); }
  to {
    opacity: 1;
    transform: translateX(0); } }
@keyframes fly-in-from-right {
  from {
    opacity: 0;
    transform: translateX(100%); }
  to {
    opacity: 1;
    transform: translateX(0); } }
@keyframes fly-in-from-top {
  from {
    opacity: 0;
    transform: translateY(-100%); }
  to {
    opacity: 1;
    transform: translateX(0); } }
@keyframes fly-in-from-bottom {
  from {
    opacity: 0;
    transform: translateY(100%); }
  to {
    opacity: 1;
    transform: translateX(0); } }
.fly-in-from-left {
  animation: fly-in-from-left 1.5s ease-in; }

.fly-in-from-right {
  animation: fly-in-from-right 1.5s ease-in; }

.fly-in-from-top {
  animation: fly-in-from-top 1.5s ease-in; }

.fly-in-from-bottom {
  animation: fly-in-from-bottom 1.5s ease-in; }

.master-layout {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: min-content 1fr min-content;
  min-height: 100vh; }
  .master-layout header {
    grid-column: 1 / span 2;
    grid-row: 1; }
  .master-layout main {
    grid-column: 2;
    grid-row: 2; }
  .master-layout footer {
    grid-column: 2;
    grid-row: 3; }
  .master-layout aside {
    grid-column: 1;
    grid-row: 2 / span 2; }

header {
  display: flex;
  align-items: stretch; }
  header > nav {
    display: flex;
    align-items: stretch; }

.nav {
  display: block;
  padding: 1rem 2rem; }
  .nav-link:link, .nav-link:visited {
    color: inherit; }
  .nav-link:active, .nav-link:hover {
    color: inherit;
    background-color: rgba(255, 255, 255, 0.3); }
  .nav-active {
    font-weight: bold; }
  .nav-section {
    font-weight: bold;
    padding-left: 1rem; }

.callout {
  background-color: #f0f0f0;
  margin: 2rem 3rem;
  border-left: 1rem black solid;
  padding: 1rem 3rem;
  line-height: 200%;
  color: #444;
  font-size: 1.8rem;
  letter-spacing: 1px;
  margin-bottom: 1.8rem; }
  .callout-warning {
    border-color: #f6f655;
    background-color: rgba(246, 246, 85, 0.2); }
  .callout-note {
    border-color: #55f6f6;
    background-color: rgba(85, 246, 246, 0.2); }
  .callout-error {
    border-color: #f65555;
    background-color: rgba(246, 85, 85, 0.2); }
  .callout-success {
    border-color: #55f655;
    background-color: rgba(85, 246, 85, 0.2); }
  .callout-primary {
    border-color: #5555f6;
    background-color: rgba(85, 85, 246, 0.2); }
  .callout-danger {
    border-color: #f6ab55;
    background-color: rgba(246, 171, 85, 0.2); }
  .callout-secondary {
    border-color: #aeaeae;
    background-color: rgba(174, 174, 174, 0.2); }
  .callout-black {
    border-color: #262626;
    background-color: rgba(38, 38, 38, 0.2); }
  .callout-blue {
    border-color: #5555f6;
    background-color: rgba(85, 85, 246, 0.2); }
  .callout-green {
    border-color: #55f655;
    background-color: rgba(85, 246, 85, 0.2); }
  .callout-cyan {
    border-color: #55f6f6;
    background-color: rgba(85, 246, 246, 0.2); }
  .callout-red {
    border-color: #f65555;
    background-color: rgba(246, 85, 85, 0.2); }
  .callout-magenta {
    border-color: #f655f6;
    background-color: rgba(246, 85, 246, 0.2); }
  .callout-yellow {
    border-color: #f6f655;
    background-color: rgba(246, 246, 85, 0.2); }
  .callout-white {
    border-color: white;
    background-color: rgba(255, 255, 255, 0.2); }
  .callout-orange {
    border-color: #f6ab55;
    background-color: rgba(246, 171, 85, 0.2); }
  .callout-pink {
    border-color: #f655ab;
    background-color: rgba(246, 85, 171, 0.2); }

.table {
  border-collapse: collapse;
  width: 100%;
  border: 1px #5555ff solid; }
  .table td, .table th {
    padding: 1rem;
    text-align: center; }
  .table th {
    color: black; }
  .table thead {
    background-color: #5555ff; }
  .table tbody tr:nth-child(even) {
    background-color: #eeeeee; }
  .table tbody tr:nth-child(odd) {
    background-color: #ffffff; }
  .table tbody tr:hover {
    background-color: #55ffff; }