body, .item {
  background-color: var(--secondary-color-11);
  font-family: Skolar-Sans-Regular, Helvetica, Roboto, Arial, sans-serif;
  font-size: 12px;
  max-width: 100%;
  overflow-wrap: break-word;
}

article img {
  max-width: 100%;
}

.item img {
  margin-bottom: 0px;
}

img.emoji {
  height: 1em;
  width: 1em;
}

.full {
  display: inline-block;
  margin:	0;
  padding: 0;
  width: 100%;
}

a {
  color: var(--secondary-color-6);
}

p {
  padding: 0;
}

h2 {
  color: var(--primary-color-1);
  font-family: 'Annie Use Your Telescope', cursive;
  font-size: 28px;
  font-weight: normal;
  text-align: center;
  border-left: 0;
  padding: 0 1ex 0 1ex;
  margin: 0;
}

h4 {
  color: black;
  font-family: 'Annie Use Your Telescope', cursive;
  font-size: 24px;
  font-weight: normal;
  text-align: left;
  opacity: 60%;
}

h6.date {
  margin: 0px;
  opacity: 83%;
}

ul {
  break-inside: avoid-column;
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  break-inside: avoid;
  padding-left: 3.5ex;
  text-indent: -4ex;
}

ul li > * {
  text-indent: -1ex;
}

ul li:before {
  color: var(--primary-color-1);
  font-family: 'Yellowtail', cursive;
  font-size: 3em;
  line-height: 0;
  content: "•";
  padding: 0 0.5ex 0 0;
  position: relative;
  top: 0.2em;
  opacity: 85%;
}

ol {
  break-inside: avoid-column;
}

ol li {
  break-inside: avoid;
}

ol.lower-alpha {
  list-style: lower-alpha;
}

.keep-together {
  break-inside: avoid;
}

.pencil {
  color: var(--secondary-color-8);
  font-family: "Annie Use Your Telescope", cursive, monospace;
  font-size-adjust: auto;
  font-size: 16px;
  margin: 0.25ex;
  opacity: 93%;
  padding: 0.25ex;
  transform: scale(1.02) rotate(0.2deg) translate(0px, 0px) skew(8deg, 0deg);
}

img.portrait {
  display: inline;
  height: 4em;
}

.section-header {
  padding-bottom: 0.75ex;
  text-align: center;
}

.section-header > h2, mark {
  display: inline-flex;
  background: linear-gradient(104deg, rgba(251,221,64,0) 0.9%, rgba(251,221,64,0.65) 2.4%, rgba(251,221,64,0.2) 5.8%, rgba(251,221,64,0.1) 93%, rgba(251,221,64,0.4) 96%, rgba(251,221,64,0) 98%);
  padding: 0 1ex 0 1ex;
  margin: 0;
  font-weight: 200;
}

.chapterHeader {
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Yellowtail', cursive;
  transform: scale(1.2) rotate(2deg) translate(0px, 0px) skew(39deg, 0deg);
  padding: 0.5em;
}

/* mark {
  background-color: var(--secondary-color-10);
} */

.head #masthead {
  font-family: 'Annie Use Your Telescope', cursive;
}

h1, .head #masthead h1, article header h1, #masthead h1 a, #masthead a h1 {
  color: var(--primary-color-1);
  margin: 0;
}

.head #masthead h3, article h3 {
  color: var(--secondary-color-1);
  font-size: 28px;
}

.head #masthead h4 {
  margin: 0.15ex;
  padding: 0 7px;
  text-align: center;
  text-decoration: underline double;
}

.head #masthead h6 {
  color: var(--primary-color-1);
  opacity: 75%;
  margin-bottom: 0;s
}

article h1 {
  font-size: 42px;
  font-style: oblique;
}

article h6 {
  margin: 0;
}

.hero {
  padding-top: 0px;
}

.flowchart-container {
  text-align: center;
}

.flowchart-container object, .flowchart-container img {
  display: block;
  max-width: 85%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.mvp {
  border-bottom: 1px solid var(--primary-color-2);
}

#spec-docs {
  border-bottom: 1px solid var(--primary-color-1);
  padding-bottom: 1ex;
}

article.blog-post {
  padding-top: 1ex;
}

article.blog-post h2 {
  text-align: left;
  color: black;
  opacity: 72%;
}

article blockquote {
  color: var(--secondary-color-1);
  opacity: 75%;
  padding-top: 0.25ex;
  padding-bottom: 0.25ex;
  font-size: small;
}

code, code[class*=language-] {
  break-inside: avoid;
  overflow-x: scroll;
  line-height: 1;
}

code.highlighter-rouge {
  padding: 0px 0.6ex 0.2ex 0.6ex;
  background-color: var(--secondary-color-3);
  color: var(--primary-color-4);
}

.token {
  position: inherit;
}

.token.punctuation {
  opacity: inherit;
}

li > p {
  display: inline;
}

/* Slack conversations */
table.conversation {
  border-collapse: separate;
  border-spacing: 0.5ex;
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 0 0.5ex 0.2ex 0.5ex;
}

table.conversation tr td, table.conversation tr th {
  vertical-align: top;
}

table.conversation tr th {
  text-align: center;
  font-weight: bold;
}

table.conversation tr td:first-child {
  width: 20%;
}

table.conversation tr td:nth-child(2) {
  background-color: white;
  border-radius: .7em;
  padding: 0.5ex;
  word-break: break-word;
}

table.github-table {
  table-layout:fixed;
  width:100%;
  -webkit-column-break-inside:avoid;
  break-inside:avoid;
  -webkit-column-break-after:always;
  break-after:column;
  border-color: grey;
}

table.github-table tr th, table.github-table tr td {
  border: 1px solid grey;
  background-color: white;
}


/* Success / failure table */
table.success-fail tr th, table.success-fail tr td:first-of-type {
  text-align: center;
}

table.success-fail tr td.success {
  background-color: rgb(0, 255, 0, 0.2);
  text-align: center;
}

table.success-fail tr td.failure {
  background-color: rgba(255, 0, 0, 0.2);
  text-align: center;
}

table.black-and-white tr, table.black-and-white tr th, table.black-and-white td {
  border: 1px solid black;
  border-collapse: collapse;
  background-color: white;
  text-align: left;
  vertical-align: middle;
  padding:0.75ex;
}

table.black-and-white tr th {
  text-align: center;
}

table.black-and-white {
  border-style: hidden;
  border-collapse: collapse;
  background-color: white;
}

footer.footer, .love {
  background-color: var(--tertiary-color-1);
  color: var(--primary-color-1);
}

footer.footer p {
  display: inline;
}

footer div p.name {
  color: var(--primary-color-1);
}

footer div h2 a {
  color: var(--secondary-color-2);
}

footer .footer a, footer .footer div h2 span a {
  color: var(--secondary-color-1);
}

footer .footer a:hover, footer .footer div h2 span a:hover {
  color: var(--primary-color-1);
}

.footer .icons a {
  background-color: var(--secondary-color-1);
}

.footer .icons a i {
  color: var(--tertiary-color-1);
}

.footer .icons a:hover {
  background-color: var(--primary-color-1);
}

/* Reference lists */
.references ul li {
  margin: 0.5ex;
  padding-left: 0.25in;
  text-indent: -0.25in;
}

.references em {
  font-style: italic;
}

/* Graph paper */
body.spec {
  background-color: var(--secondary-color-11);
  background-image:
    linear-gradient(rgba(217,217,214,0.5) 1px, transparent 1px),
    linear-gradient(var(--secondary-color-11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,217,214,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,217,214,0.7) 1px, transparent 1px),
    linear-gradient(transparent 3px, var(--secondary-color-11) 3px, var(--secondary-color-11) 106px, transparent 106px),
    linear-gradient(90deg, rgba(217,217,214,0.7) 3px, transparent 3px, transparent 106px, rgba(217,217,214,0.7) 106px)
    ;
  background-size:
    27px 27px,
    108px 108px,
    27px 27px,
    108px 108px,
    108px 108px,
    108px 108px;
}

body.spec .item {
  background-color: transparent;
  border-left: 0;
}

body.spec article {
  padding: 0 2% 0 2%;
}