/* ========================== General Rules ==================================== */

body {
  font-family: 'Bitter', serif;
  overflow-x: hidden;
}



h1, h2, h3, h4, h5, h6 {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  margin-top: 1.3em; /* EM on purpose: proportional to font size please */
  @extend .mb-1;
  color: $primary;
}

code {
  font-size: 1em;
}

.list-inline-item:after {
  content: ', ';
}

.list-inline-item:last-child:after {
  content: '';
}

@include media-breakpoint-down(md) {
  .no-comma .list-inline-item:after {
    content: '';
  }
}



li {
  @extend .my-2;
}

p:last-child {
    margin-bottom: 0;
}

figure {
  @extend .p-3;
  border: 1px solid $border-color;
  figcaption {
    @extend .mt-3;
  }
}

.btn {
  text-decoration: underline;
}

.highlighter-1, .highlighter-2, .highlighter-3, .highlighter-4 {
  display: inline-block;
  padding: 0.15em 0.3em;
  margin: 0.15em 0;
  @extend .rounded;
}

.highlighter-1 {
  background-color: #dde97d;
  color: black;
}
.highlighter-2 {
  background-color: #FFE680;
  color: black;
}
.highlighter-3 {
  background-color: #99DBFF;
  color: black;
}
.highlighter-4 {
  background-color: #F080D8;
  color: black;
}