html {

  --who-outline-col : lightgoldenrodyellow;
  --who-highlight-col : #fb5;
  --who-dark-col : rgb(17, 17, 17);
  --who-contrast-col : rgb(42,9,65);

  background-repeat: no-repeat;
  background-size: cover;
}

body {
  
  /*
  padding: 1em;
  */
  margin: auto auto auto auto;
	max-width: 80%;
	font-family: "courier new", monospace;
	color: var(--who-highlight-col);
  background-image: linear-gradient(to right, var(--who-dark-col) 75%, var(--who-contrast-col), darkslategrey);
	word-wrap: break-word;
  /*word-break: break-all;*/

  --font-sz-ratio : 1.5;
  --font-sz-std:  1rem* var(--font-sz-ratio);
  --font-sz-biggish: calc(var(--font-sz-std) * var(--font-sz-ratio));
  --font-sz-big: calc(var(--font-sz-biggish) * var(--font-sz-ratio));
  font-size: var(--font-sz-std) ;
 
}

/* Page content */
.content {
  padding-top: 3em;
}

#content-container {
  /* padding: 16px;*/
  height: calc(100% - 6em);
  overflow: auto;
}
/*
a.pagination-anchor.pagination-anchor-selected {
	background-color: orange;
	color: #010101;
} 

li.blog-post:last-child div.post-body:last-child{
  font-size: var(--font-sz-biggish);
}*/

div.post-head {
	background-color: var(--who-outline-col);
	color: var(--who-dark-col); 
	padding: 2px;
	/* font-size: 12px; */
}

div.post-body {
	padding-left: .5em;
	padding-right: .5em;
	padding-top: .5em;
}

.bg-colour {
  background-color: orange;
}

.border-colour {
  border-color: orange;
}

select.styled, button.styled, input.styled, textarea.styled {
  display: block;
  /*margin: 5px; */
  appearance: none;
  border: 1px solid orange;
  padding: 5px;
  /* font-family: "courier new", monospace; */
  font-family: Verdana, Geneva, Tahoma, sans-serif ;
  color: var(--who-outline-col);
  background-color: var(--who-dark-col);
  width: 35%;
  box-sizing: content-box;
}

textarea.styled {
  height: 15%;
}

input.styled[type="submit"] {
  cursor: pointer;
  border-radius: 4px;
  
}

.subtitle {
  padding: 5px;
  font-weight: bold;
  font-family: Verdana, Geneva, Tahoma, sans-serif ;
}

.overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.overlay-container canvas {
  width: 100%;
  height: 100%;
}

ol {
  margin-left: 1em;
} 

a {
  /* background-color: transparent; */
  color: var(--who-highlight-col);
  font-weight: bold;
}
hr {
  border-color: var(--who-highlight-col);
}
.advisory {
  background: var(--who-highlight-col);
  color: var(--who-dark-col);
  font-weight: bold;
  padding-right: 0.25em;
}
ul {
	/* padding-left: 0px; */
	padding-right: 0px;
	margin-top: 0.5em;
}
ul p {
	margin: 0 0 0.5em 0;
}

li {
	list-style-type: circle;
	margin-bottom: 0.5em;

}

li.blog-post {
	border: 1px solid orange;
  border-bottom: 0.4px dotted;
	margin-bottom: var(--font-sz-std);
  list-style-type: none;
}
.header {
  -webkit-text-stroke: 2px var(--who-contrast-col);
  
  background-image: linear-gradient(to right, var(--who-dark-col), var(--who-highlight-col) 10%,var(--who-outline-col));
  font-weight: bold;

}

h2{
  font-size: var(--font-sz-biggish);
}
h1 {
  font-size: var(--font-sz-big);
  
}

.footer {
  position:fixed;
  left: 25%;
  background-color: #444;
  
  padding: .5em;
  bottom: 5%;
  width: 50%;
  border-radius: 2em;
}

.signature {
    text-align: right;
}
pre {
  max-width: 60%;
}

em{
  color: var(--who-outline-col);
  font-size: 1.2em;
}

code{
  display: block;
  max-width: 75ch;
  border-inline-start: 0.5ch solid var(--who-highlight-col);
  padding-inline-start: 2ch;
  font-size: 1rem;
}