@import url('https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,MONO@-15..0,300..800,0..1,0..1&display=swap'); 

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

body {
  margin: 0;
}

a {
  color: #01BAEF;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
  outline-width: 0;
}
a.active-link{
  color:rgb(50,50,50);
}

body {
  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;
}

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: .67em 0;
  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;
}

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%;
  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); 
}
article em{
  --mono: "MONO" 0; /* 0-1 */
  --casl: "CASL" 0.8; /* 0-1 */
  --wght: "wght" 400;
  --slnt: "slnt" -13; /* 0 - -15 */
  --CRSV: "CRSV" 1;
  font-variation-settings: var(--mono), var(--casl), var(--wght), var(--slnt), var(--CRSV); 
}
article 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); 
}

code{
  font-family: 'Recursive', monospace;
  --mono: "MONO" 1; /* 0-1 */
  --casl: "CASL" 0.5; /* 0-1 */
  --wght: "wght" 400;
  --slnt: "slnt" -5; /* 0 - -15 */
  --CRSV: "CRSV" 0;
  font-variation-settings: var(--mono), var(--casl), var(--wght), var(--slnt), var(--CRSV); 
  background:rgb(240,240,240);
  color:#8C3667;
  padding:2px 3px;
  font-size:14px;
  border-radius:2px;
}
pre code{
  display:block;
  white-space: pre-wrap !important;
  padding: 10px;
}
