@font-face {
  font-family: 'Recursive';
  font-style: oblique 0deg 15deg;
  font-weight: 300 800;
  font-display: swap;
  src: url(/fonts/recursive.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
  box-sizing: border-box;
  overflow-y: scroll;
}

body {
  margin: 0;
  font-family: 'Recursive', monospace;
  --mono: "MONO" 0; /* 0-1 */
  --casl: "CASL" 0; /* 0-1 */
  --wght: "wght" 400;
  --slnt: "slnt" 0; /* 0 - -15 */
  --CRSV: "CRSV" 0;
  font-variation-settings: var(--mono), var(--casl), var(--wght), var(--slnt), var(--CRSV); 
  color: hsla(0, 0%, 0%, 0.8);
  word-wrap: break-word;
}

body em {
  --mono: "MONO" 0; /* 0-1 */
  --casl: "CASL" 0.8; /* 0-1 */
  --wght: "wght" 400;
  --slnt: "slnt" -10; /* 0 - -15 */
  --CRSV: "CRSV" 1;
  font-variation-settings: var(--mono), var(--casl), var(--wght), var(--slnt), var(--CRSV); 
}

body strong {
  --mono: "MONO" 0; /* 0-1 */
  --casl: "CASL" 0.8; /* 0-1 */
  --wght: "wght" 800;
  --slnt: "slnt" -1; /* 0 - -15 */
  --CRSV: "CRSV" 1;
  font-variation-settings: var(--mono), var(--casl), var(--wght), var(--slnt), var(--CRSV);
}

h1, h2, h3, h4 {
  font-size: 2em;
  --mono: "MONO" 0; /* 0-1 */
  --casl: "CASL" 0; /* 0-1 */
  --wght: "wght" 800;
  --slnt: "slnt" -8; /* 0 - -15 */
  --CRSV: "CRSV" 0;
  font-variation-settings: var(--mono), var(--casl), var(--wght), var(--slnt), var(--CRSV);
  font-weight: bold;
  text-rendering: optimizeLegibility;
}

h1 {
  margin: 0px 0px 20px 0px;
  font-size: 1.5rem;
  line-height: 1.1;
}
h2 {
  font-size: 1.3rem;
}
h3 {
  font-size: 1.1rem;
}
h4 {
  font-size: 0.9rem;
  line-height: 1.3;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}
a:active, a:hover {
  outline-width: 0;
}

p {
  margin: 0px 0px 15px 0px;
}

article{
  margin:30px 0px;
  /*font-family: Georgia, 'Times New Roman', Times, serif;*/
  font-family: 'Recursive', monospace;
  --mono: "MONO" 0; /* 0-1 */
  --casl: "CASL" 0.2; /* 0-1 */
  --wght: "wght" 400;
  --slnt: "slnt" -1; /* 0 - -15 */
  --CRSV: "CRSV" 0;
  font-variation-settings: var(--mono), var(--casl), var(--wght), var(--slnt), var(--CRSV); 
  font-size: 18px;
  line-height:26px;
}

article img{
  max-width:100%;
  max-height: 500px;
  margin:50px auto;
  display:block;
}
article .caption{
  text-align:center;
  margin-top:-45px;
  font-style:italic;
}
article blockquote{
  border-left: 10px solid wheat;
  padding: 10px;
  background: seashell;
  font-family: 'Recursive', monospace;
  --mono: "MONO" 0; /* 0-1 */
  --casl: "CASL" 0.8; /* 0-1 */
  --wght: "wght" 400;
  --slnt: "slnt" -10; /* 0 - -15 */
  --CRSV: "CRSV" 1;
  font-variation-settings: var(--mono), var(--casl), var(--wght), var(--slnt), var(--CRSV); 
}

/* PRISM SPECIFIC CSS: */

/**
 * If you already use line highlighting
 */

/* Adjust the position of the line numbers to account */
.gatsby-highlight pre[class*="language-"].line-numbers {
  padding-left: 2.8em;
}

/**
 * If you only want to use line numbering
 */

.gatsby-highlight {
  border-radius: 0.3em;
  margin: 0.5em 0;
  padding: 1em;
  overflow: auto;
}

.gatsby-highlight pre[class*="language-"].line-numbers {
  padding: 0;
  padding-left: 2.8em;
  overflow: initial;
}

/**
 * Add back the container background-color, border-radius, padding, margin
 * and overflow that we removed from <pre>.
 */
 .gatsby-highlight {
  background-color: #fdf6e3;
  border-radius: 0.3em;
  margin: 0.5em 0;
  padding: 1em;
  overflow: auto;
}

/**
 * Remove the default PrismJS theme background-color, border-radius, margin,
 * padding and overflow.
 * 1. Make the element just wide enough to fit its content.
 * 2. Always fill the visible space in .gatsby-highlight.
 * 3. Adjust the position of the line numbers
 */
.gatsby-highlight pre[class*="language-"] {
  background-color: transparent;
  margin: 0;
  padding: 0;
  overflow: initial;
  float: left; /* 1 */
  min-width: 100%; /* 2 */
}
