body {
	font-family: sans-serif;
	color: rgb(64, 64, 64);
	background-color: #fcfcfc;
	margin: 0;
}
article {
	padding: 0 8px;
}
article > p {
	margin: 20px 0;
}
article > p > img {
	margin: 0 auto;
	display: block;
	max-width:800px;
	border-radius: 10px;
	box-shadow: 5px 5px 10px;
}
article > p > a > img {
	margin: 0 auto;
	display: block;
	max-width:800px;
	border-radius: 10px;
	box-shadow: 5px 5px 10px;
}
article > p > video {
	margin: 0 auto;
	display: block;
	border-radius: 10px;
}
figure > p > img {
	display: block;
	margin: 0 auto;
	max-width:800px;
	border-radius: 10px;
	box-shadow: 5px 5px 10px;
}
figure > p > video {
	display: block;
	margin: 0 auto;
	max-width:800px;
	border-radius: 10px;
	box-shadow: 5px 5px 10px;
}
figure > figcaption {
	text-align: center;
	font-size: smaller;
}
sup {
	font-size: small;
}
pre {
	width: 100%;
	overflow: auto;
}

/* Makes sure there is a bit of left an right whitepace on the page	*/
.side-space-col {
	min-width:10px;
}
/* search related */

.site-search {
	margin: auto;
	width: fit-content;
	padding: 10px;
}
.site-search form {
	display: flex;
	justify-content: flex-end;
}
.site-search form {
	display: flex;
	justify-content: flex-end;
	margin: auto;
}

.site-search input[type="search"], .site-search button {
	display: block;
	height: 1.3rem;
	font-size: 0.9em;
	margin: 0.35rem 0 0 0;
	background-color: rgba(255, 255, 255, 1.0); 
	color: #666;
	border: 1px solid #aaa;
}

.site-search input[type="search"] {
	width: 5em;
	padding-left: 0.5em;
	transition: width 0.3s;
	border-radius: 3px 0 0 3px;
}

.site-search input[type="search"]:focus {
	width: 100%;
}

.site-search input[type="search"]::placeholder {
	color: rgba(50, 50, 50, 1.0);
}

.site-search input[type="search"]:focus::placeholder {
	color: rgba(50, 50, 50, 0.5);
}

.site-search button {
	font-weight: bold;
	cursor: pointer;
	vertical-align: middle;
	padding-right: 0.5em;
	flex: 0 0 auto;
	border-radius: 0 3px 3px 0;
}

.site-search button abbr {
	text-decoration: none;
	font-size: 0.8em;
}

.site-search-results {
	margin: auto;
	width: fit-content;
	padding: 10px;
}

.visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.grid-layout {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-gap: 10px;
	grid-auto-rows: minmax(190px, auto);
	grid-auto-flow: dense;
	padding: 1px;
}

.grid-item {
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	padding: 1rem;
	font-size: 14px;
	font-weight: bold;
	color: #666;
	background-color: #f6f6f6;
	border-radius: 5px;	
	box-shadow: 0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.2)!important;
}
.grid-item div:hover {
	transform: rotate(0.2deg);
}
.grid-item a {
	text-decoration:none;
	color: inherit;
	margin: auto;
	text-align: center;
}
.grid-item a:hover {
	text-decoration: underline;
}
.grid-item img {
	display: block;
	margin: auto;
	border-radius: 5px;
}

.card-date {
	justify-self: right;
	transform: rotateX(45deg);
	color: #888;
}
.card-auth {
	justify-self: start;
}
.card-auth img {
	width: 16px;vertical-align: text-bottom; float:left;opacity: 60%;
}
.card-img-link {
	width:100%;justify-self: center;align-self: center;
}
.page-nav {
	display: inline-flex;
	font-size: small;
	margin: 15px auto;
	align-self: center;
}
.page-nav a {
	text-decoration: none;
}

.page-nav-np {
	display: flex;
	margin-top: 15px;
	justify-content: space-between;
}
.page-nav-np a {
	text-decoration: none;
}

.svgtag {
	width: 16px; height: 16px; vertical-align: text-bottom;
}

.taggrid-container {
	text-align: center;
	margin-left: 20px;
}
.taggrid-container a {
	text-decoration:none;
	color: inherit;
}
.span-2 {
	grid-column-end: span 2;
	grid-row-end: span 2;
}

.span-3 {
	grid-column-end: span 3;
	grid-row-end: span 4;
}

blockquote {
	color: rgb(54, 54, 54);
	border-left-color: darkgray;
	border-left-width: 30px;
	border-left-style: solid;
	padding: 10px;
	background: lightgray;
	border-radius: 5px;
}

table, td {
	border: gray;
	border-style: solid;
	border-width: thin;
	color:#888888;
}

th{
	color:#666666;
}

iframe {
	margin: auto;
	display: block;
}

pre:has(> code.language-base64) {
  background: #1E1E1E;
  color: #D4D4D4;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: Consolas, Menlo, monospace;
  font-size: 14px;
  line-height: 1.4;
  overflow-x: auto;
  text-wrap-mode: wrap;
  overflow-wrap: anywhere;
  max-height: 300px;
}

/* scope all code blocks by language */
div.typescript {
  background: #1E1E1E;
  color: #D4D4D4;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: Consolas, Menlo, monospace;
  font-size: 14px;
  line-height: 1.4;
  overflow-x: auto;
}

/* tokens */
div.typescript .comment    { color: #6A9955; font-style: italic; }
div.typescript .keyword    { color: #569CD6; }
div.typescript .string     { color: #D69D85; }
div.typescript .identifier { color: #9CDCFE; }
div.typescript .number     { color: #B5CEA8; }
div.typescript .operator   { color: #D4D4D4; }

/* base container */
div.xml {
  background: #1E1E1E;
  color: #D4D4D4;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: Consolas, Menlo, monospace;
  font-size: 14px;
  line-height: 1.4;
  overflow-x: auto;
}

/* tokens */
div.xml .xmlDelimiter       { color: #808080; }  /* <, >, = */
div.xml .xmlName            { color: #569CD6; }  /* element names */
div.xml .xmlAttribute       { color: #9CDCFE; }  /* attribute names */
div.xml .xmlAttributeQuotes { color: #D4D4D4; }  /* " */
div.xml .xmlAttributeValue  { color: #CE9178; }  /* attribute values (strings) */

/* base container for JSON code blocks */
div.json {
  background: #1E1E1E;
  color: #D4D4D4;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: Consolas, Menlo, monospace;
  font-size: 14px;
  line-height: 1.4;
  overflow-x: auto;
  max-height: 300px;
}
div.json pre {
  text-wrap: auto;
  width: 100%;
  overflow: clip;
}

/* JSON tokens */
div.json .jsonKey       { color: #9CDCFE; }  /* property names / keys */
div.json .jsonString    { color: #CE9178; }  /* string values */
div.json .jsonNumber    { color: #B5CEA8; }  /* numeric values */
div.json .jsonBoolean   { color: #569CD6; font-weight: bold; }  /* true / false */
div.json .jsonNull      { color: #569CD6; font-style: italic; } /* null */
div.json .jsonPunctuation { color: #D4D4D4; } /* { } [ ] : , */