:root {
  --color-text: hsla(255, 33%, 20%, 0.92);
  --color-warning: hsla(25, 75%, 33%, 0.92);
  --color-code-important: hsla(350, 80%, 25%, 0.92);
  /* --color-background: hsl(235, 5%, 95%); */
  --color-background: hsl(220, 27%, 98%);
  /* --color-background: rgb(232, 237, 242); */

  --color-highlight: hsla(255, 33%, 20%, 0.33);
  --color-highlight: rgba(194, 165, 109, 0.33);

  --color-code-background: hsl(235, 5%, 90%);
  --color-code-background: rgba(84, 122, 149, 0.15);
  --font-family: 'IBM Plex Mono', 'Courier Prime', 'Hasklig', 'Courier New', monospace;
  --size-base: 12pt;
}


html {
  font-family: var(--font-family);
  font-size: var(--size-base);

  line-height:1.75em;

  margin-top: 2em;
  margin-left: 2rem;
  margin-right: 1rem;
  max-width: 88ch;

  background: white;
  
  color: var(--color-text);
  background-color: var(--color-background);
}

hr { 
  margin-top: 2rem;
  color: var(--color-highlight);
}

h1, h2, h3, h4, h5, h6 {
  font-size: 1rem;
  font-weight: normal;
  margin:0;
  text-transform: uppercase;
}

h1 { 
  font-weight: bold;
  margin-top: 1rem;

  text-decoration: underline overline;

  text-decoration-thickness: 0.2rem;
  text-underline-offset: 0.25rem;
  
  margin-bottom: 0.5rem;
  
}

h2, h3{
  margin-top: 1.5rem;
  text-decoration: underline;
  text-decoration-thickness: 0.2rem;
  text-underline-offset: 0.25rem;
  margin-bottom: 0.25rem;
}

h3 {
  text-transform: unset;
  text-decoration-thickness: 0.15em;
}

p { 
  margin:0;
  hyphens: auto;
    word-spacing: -0.5pt;
}

p code { 
  background-color: var(--color-code-background);
  padding-left: 5px;
  padding-right:5px;
  padding-top:2px;
  padding-bottom: 2px;
  font-family: var(--font-family);

}


div.listingblock { 
  background-color: var(--color-code-background);
  margin-top: 1rem;
  margin-bottom:1rem;
  /* border-radius: 15px; */
  
}

div.listingblock .title {
  color: rgba(140, 150, 160, 0.8);
  
  font-size: 0.8rem;
  padding-top:5px;
  padding-right:5px;
  text-align: right;
  border:1px ;
  border-bottom-style: solid;
  border-color: rgba(140,150, 160, 0.4);

  margin-left: 15px;
  margin-right: 15px;


}

div.listingblock div.content {
  padding-left: 2ch;
  padding-bottom:0.33rem;
  font-size:0.9rem;

  
}

.admonitionblock {
  
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  /* margin-left: 2rem;
  margin-right: 2rem; */
  font-size: 0.9rem;
  padding:0.5rem;

  border-style: dashed;
  border-width: 2px;
  border-color: hsla(255, 33%, 20%, 0.5);
}

.admonitionblock .icon {
  padding-right: 2rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-transform: uppercase;
  vertical-align: top;
  letter-spacing: 1.5pt;
}

.admonitionblock.warning{
  color: var(--color-warning);
  font-style: oblique;
}

.admonitionblock.important{
  color: var(--color-code-important);
  font-weight: 450;
  word-spacing: -1pt;
}


a {
  color: rgb(50, 125, 180);
}

a:hover {
  color: rgb(75, 150, 210);
}

div#footer { 
  padding-top: 1.5rem;
  font-size: 0.8rem;
  color: rgba(20, 40, 50, 0.5);
  text-align: right;

}