/*
Theme Name: AAR
Theme URI: https://adrianroselli.com/
Description: Custom theme for my site. Go get your own.
Author: Adrian Roselli
Author URI: https://adrianroselli.com/
Version: 1.69
Tags: 
*/

/* ================================================================================================== */
/* Generic Style Declarations */

@-ms-viewport	{	width: device-width; }

body		{	background-color: #efefef;
			background-color: var(--page-bg);
			color: #000;
			color: var(--text-color);
			font-family: 'Cabin', Trebuchet, 'Trebuchet MS', sans-serif;
			text-rendering: optimizeLegibility;
			padding: 0;
			margin: 0;
			line-height: 1.6;
			scroll-behavior: smooth; }

@media screen and (prefers-reduced-motion: reduce) {

	body	{	scroll-behavior: unset; }

}

@media (min-width:50em) {

  	body	{	/*background-color: #5C6D69;*/ }

}

@media (min-width:70em) {

	body	{	/*background-color: #695C6D;*/ }

}

@media print {

	body	{	background-color: #fff;
			color: #000;
			font-size: 8pt; }

}

#SVGsprites	{	display: none; }

.visually-hidden:not(:focus):not(:active)
		{	position: absolute;
			overflow: hidden;
			clip: rect(0 0 0 0); 
			clip-path: inset(50%);
			width: 1px;
			height: 1px;
			white-space: nowrap; }

.hidden		{	display: none; }

#CatRSS		{	border-width: .1em;
			margin: 1.5em 3em;
			padding-left: 2em;
			background-position: 0 1em;
			background-repeat: no-repeat;
			background-size: 1.5em 1.5em;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f90' stroke='%23000' stroke-width='1%25' d='M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83A9.9 9.9 0 004 10.1zm2.18 5.54a2.18 2.18 0 010 4.36 2.18 2.18 0 010-4.36'/%3E%3C/svg%3E");}

#CatRSS + aside
		{	display: none; }

/* END Generic Style Declarations */
/* ================================================================================================== */




/* ================================================================================================== */
/* Header */

#Brand		{	max-width: 60em;
			margin: 0 auto;
			height: 17.5vw; }

#Brand br	{	display: none; }

.logotype	{	display: block; }

.logotype, .logotype:focus, .logotype:hover, .logotype:visited, .logotype:active
		{	color: #000;
			color: var(--text-color);
			text-decoration: none; }

@media print {
	.logotype, .logotype:focus, .logotype:hover, .logotype:visited, .logotype:active
		{	color: #000; }
}

.logotype:focus, .logotype:hover
		{	color: #f60;
			color: var(--detail-color);
			outline: none; }

.logotype:focus span, .logotype:hover span
		{	color: #000;
			color: var(--text-color); }

.logotype strong
		{	display: block;
			margin: 0;
			overflow: hidden;
			height: 7vw;
			font-size: 16.2vw;
			line-height: .6;
			white-space: nowrap; }

.logotype:focus strong, .logotype:hover strong
		{	line-height: .85;
			height: 13.2vw; }

.logotype span
		{	padding: .25em .5em 0 .5em;
			display: block;
			border-top: .1em solid #000;
			border-top-color: var(--text-color); }

.logotype:focus span, .logotype:hover span
		{	border-top-color: transparent;
			padding-left: 0;
			padding-top: 0; }

@media screen and (prefers-reduced-motion: no-preference) {
	.logotype strong, .logotype span
		{	transition: all ease-in-out .25s; }
}

@media screen and (min-width:60em) {
	#Brand
		{	height: 7.25rem; }

	.logotype
		{	width: 36rem; }

	.logotype strong
		{	font-size: 600%;
			height: 2.8rem;
			max-width: 60rem;
			width: 36rem; }

	.logotype:focus strong, .logotype:hover strong
		{	height: 5rem; }
}

@media print {

	#Brand
		{	max-width: 100%;
			height: 3.5rem; }

	.logotype, .logotype strong
		{	width: auto; }

	.logotype strong
		{	font-size: 4em;
			height: auto;
			line-height: 1; }
}

/* Navigation ---------------------------------------------------------------------- */

#NavWrapper
		{	box-sizing: border-box;
			padding: .25em;
			margin: 0;
			background-color: #000; }

nav		{	box-sizing: border-box;
			padding: 0;
			margin: 0 auto;
			max-width: 60em;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0 2em; }

nav > form
		{	flex: 1 1 auto; }

@media screen and (min-width:60em) {
	nav > form
		{	flex: 0 1 auto; }
}

nav > ul	{	flex: 1 1 35em; }

nav ul, nav li	{	margin: 0;
			padding: 0;
			list-style-type: none; }

nav > ul	{	display: flex;
			flex-wrap: wrap; }

nav > ul > li	{	margin: 0.5em;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			align-content: flex-start;
			/* flex: 0 0 8.5em; */
			flex: 1 1 4.5em; }

nav > ul > li > a
		{	flex: 1 1 auto; }

nav > ul > li > button
		{	flex: 0 1 3.5em; }

nav > ul > li > button[aria-expanded="false"] + ul
		{	display: none; }

nav > ul li ul	{	background-color: #000;
			clip: rect(1px 1px 1px 1px);
			clip: rect(1px, 1px, 1px, 1px);
			width: 1px;
			height: 1px;
			overflow: hidden;
			position: absolute;
			white-space: nowrap; }

nav > ul li > ul
		{	left: auto;
			right: auto;
			clip: auto; /* IE11 */
			clip: initial;
			width: auto;
			height: auto;
			overflow: visible;
			padding: .5em 0;
			/* top: 5.5em; */
			top: 3.5em;
			z-index: 10;
			margin-left: -.1em;
			border: .1em solid rgba(255,255,255,.25);
			border-color: #f60;
			border-color: var(--nav-color); }

/* @media screen and (min-width:50em) {
	nav > ul li > ul
		{	top: 3.5em; }
} */

nav > ul li:hover, nav > ul li.focus
		{	position: static; }

nav > ul li li
		{	margin: 0; }

nav > ul, nav > ul a
	 	{	-moz-box-sizing: border-box;
			box-sizing: border-box;
			margin: 0;
			padding: 0; }

nav a		{	color: #fff;
			text-align: center;
			text-decoration: none;
			line-height: 1.4; }

nav a:hover, nav a:focus
		{	outline: none; }

nav > ul > li
		{	border: .15em solid rgba(255,255,255,.5);
			border-radius: 0 3.5em 3.5em 0; }

nav li:focus-within, nav li:hover
		{	border-color: #f60;
			border-color: var(--nav-color);
			box-shadow: inset .5em 0 0 var(--nav-color); }

nav li:hover /* IE / Edge */
		{	border-color: #f60;
			border-color: var(--nav-color); }

nav > ul a	{	padding: .7em .5em;
			display: block;
			width: auto; }

nav > ul > li > a
		{	text-align: center;
			min-height: 2.5em;
			padding: .5em .75em .5em .75em; }

nav > ul li ul a
		{	line-height: 1.2em;
			text-align: left;
			padding: .5em 1em;
			margin: 0; }

nav li, nav > ul > li > a
		{	box-sizing: border-box; }

/* Style links that are current page/section. */

nav>ul>li a[aria-current="page"], nav>ul>li:hover a[aria-current="page"], nav>ul>li:focus a[aria-current="page"]
		{	color: #757575;
			border-color: #999; }

@media print {

	#NavWrapper, nav
	 	{	display: none; }

}

nav > ul > li > a + button
		{	font-size: 80%;
			color: #fff;
			background-color: transparent;
			padding: .3em 0.2em 0 0.2em;
			border: .2em solid rgba(255,255,255,.5);
			border-radius: 50%;
			line-height: 1;
			text-align: center;
			width: 3.5em; /* 44px */
			height: 3.5em; /* 44px */ }

nav > ul > li > a + button:hover, nav > ul > li > a + button:focus, nav > ul > li > a + button[aria-expanded=true]
		{	border-color: #f60;
			border-color: var(--nav-color);
			background-color: transparent;
			background-color: var(--nav-color);
			outline: none;
			border-color: #000;
			box-shadow: 0 -0.1em 0 var(--nav-color), 0 0.1em 0 var(--nav-color), -0.1em 0 0 var(--nav-color), 0.1em 0 0 var(--nav-color), 0.1em -0.1em 0 var(--nav-color), 0.1em 0.1em 0 var(--nav-color), -0.1em -0.1em 0 var(--nav-color), -0.1em 0.1em 0 var(--nav-color);
}

nav > ul > li > a + button svg
		{	width: 1em;
			height: 1em;
			fill: #fff;
			transition: transform .25s ease-in;
			transform-origin: center 45%; }

nav > ul > li > a + button:hover svg, nav > ul > li > a + button:focus svg, nav > ul > li > a + button[aria-expanded=true] svg
		{	fill: var(--nav-color);
			fill: #000; }

button[aria-expanded=true] svg
		{	transform: rotate(180deg); }

/* Windows High Contrast Mode styles */
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {

	nav li:focus-within, nav li:hover
		{	border-left-width: .65em; }

	nav > ul > li > a:focus, nav > ul > li > a:hover
		{	padding-left: .25em; }

	nav > ul li ul a:focus
		{	outline: .2em solid LinkText;
			outline-offset: .1em; }

	nav > ul > li > a + button:hover, nav > ul > li > a + button:focus, nav > ul > li > a + button[aria-expanded="true"]
		{	outline: .2em solid LinkText;
			outline-offset: 0; }

	nav > ul > li > a + button:hover svg, nav > ul > li > a + button:focus svg, nav > ul > li > a + button[aria-expanded="true"] svg
		{	fill: LinkText; }

}

/* / Navigation -------------------------------------------------------------------- */

/* END Header */
/* ================================================================================================== */




/* ================================================================================================== */
/* Footer */

footer[role=contentinfo]
		{	box-sizing: border-box;
			position: relative;
			clear: both;
			margin: 0;
			max-width: 100%;
			background-color: #000;
			color: #fff;
			font-size: 95%;
			padding: 1em;
			display: flex;
			flex-wrap: wrap;
			align-items: baseline; }

footer[role=contentinfo] > *
		{	/* padding: 0 .25em;*/
			/* max-width: 60em; */
			box-sizing: border-box;
			/* outline: 1px dotted #ccc; */
			flex: 1 1 30em;
			margin: .5em auto; }

@media screen and (min-width:74em) {
	footer[role=contentinfo]
		{	padding: 0 calc(calc(100% - 74em) / 2); }

	footer[role=contentinfo] > *
		{	flex: 1 1 20em; }
}

footer[role=contentinfo] p
		{	flex: 1 0 100%; }

footer[role=contentinfo] a[href]
		{	text-decoration-skip: ink;
			text-decoration-skip-ink: auto; }

footer[role=contentinfo] ul
		{	list-style: none;
			padding: 0; }

footer[role=contentinfo] ul li
		{	margin: 0;
			padding-right: .75em;
			display: inline; }

footer[role=contentinfo] ul a
		{	display: inline-block;
			margin: 0;
			padding: 0; }

footer[role=contentinfo] ul li::after
		{	/* content: "\2022"; bullet */
			content: "";
			display: inline-block;
			width: .25em;
			height: .5em;
			background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23777'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center; }

footer[role=contentinfo] ul li:last-child::after
		{	display: none; }

footer[role=contentinfo] ul li:first-child a, footer[role=contentinfo] ul li:first-child
		{	padding-left: 0; }

footer[role=contentinfo] ul li:last-child a
		{	border-right: none;
			padding-right: 0;
			margin-right: 0; }

footer[role=contentinfo] a:link, footer[role=contentinfo] a:visited, footer[role=contentinfo] a:active, footer[role=contentinfo] a:hover, footer[role=contentinfo] a:focus
		{	color: #fff;
			text-decoration: none;
			margin-right: 1em; }

footer[role=contentinfo] a:hover, footer[role=contentinfo] a:focus
		{	text-decoration: underline; }

footer[role=contentinfo] [role=group]
		{	flex: 1 0 17em;
			text-align: right; }

@media print {

	footer[role=contentinfo]
		{	margin: 0;
			padding: 0;
			background-color: transparent;
			color: #000;
			font-size: 80%; }

	footer[role=contentinfo] ul, footer[role=contentinfo] [role=group]
		{	display: none; }

	footer[role=contentinfo] > *
		{	max-width: 100%; }

}

/* END Footer */
/* ================================================================================================== */




/* ================================================================================================== */
/* Layout */

header + div	{	display: block;
			box-sizing: border-box;
			width: 100%;
			padding: 1em .5em; }

main + aside	{	padding-top: 3em;
			padding-bottom: 2em; }

main:not(.home)
		{	font-size: 130%; }

@media (min-width:50em) {

	header + div
		{	/* padding: 1em 2em; */
			margin: 0 auto; }

	header + div.post, header + div.page
		{	max-width: 60em; }
/*
	header + div.page
		{	display: flex;
			align-items: flex-start;
			justify-content: space-between;
			max-width: 74em; }

	header + div.page main
		{	flex: 1 1 80%;
			margin-right: 3em;	}

	header + div.page > aside
		{	flex: 1 1 14em;
			padding-top: 6.5em;	}
*/
}

@media print {

	header + div.post, header + div.page
		{	max-width: 100%;
			padding: 1em 0; }

}

@media print {

	main + aside, #searchform
		{	display: none; }	

}

/* -- Start Skip Link ------------------------- */

a[href="#Skip"]	{	display: block;
			color: #fff;
			background: #000;
			margin: 0;
			padding: .5em 1em;
			font-weight: bold; }

a[href="#Skip"]:link, a[href="#Skip"]:visited
		{	color: #fff;
			text-decoration: none; }

/* @media screen and (min-width:50em) { */

	a[href="#Skip"]
		{	position: absolute;
			left: -1000px;
			z-index: 2; }

	a[href="#Skip"]:active, a[href="#Skip"]:focus, a[href="#Skip"]:hover
		{	display: block;
			top: 0;
			left: 0; }

/* } */

@media print {

	a[href="#Skip"]
		{	display: none; }

}

/* -- End Skip Link --------------------------- */

/* -- Start Home Page ------------------------- */

main article a[href]
		{	color: #f60;
			color: var(--detail-color); }

main article > a[href]:hover, main article > a[href]:focus
		{	color: #000;
			color: var(--text-color); }

main.index article
		{	position: relative; }

main.index article a[href]::after
		{	content: "";
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0; }

main.index article:hover
		{	color: var(--detail-color); }

main article footer
		{	font-size: 85%; }

main article footer p
		{	margin-top: 0;
			margin-bottom: 0; }

main article, main article + footer
		{	margin: 1.4em 0; }

main article img
		{	margin: 1em auto 0 auto;
			display: block; }

@media (min-width:20em) {

	main article, main article + footer
		{	padding: 0; }

	main article img
		{	width: 100px;
			height: auto;
			float: right;
			margin-left: 1em; }

	main article p, main article footer
		{	clear: none; }

}

@media print {

	main article #respond
		{	display: none; }

}

main.index.home article:nth-child(2)
		{	font-size: 150%; }

main.index.home article:nth-child(3)
		{	font-size: 140%; }

main.index article h2
		{	margin-bottom: 0;
			margin-top: 2em;
			line-height: 1.3; }

@media all and (min-width:45em), print and (min-width: 5in) {
	main.index
		{	display: -ms-grid;
			display: grid;
			-ms-grid-columns: 10fr 1fr 10fr;
			grid-template-columns: 1fr 1fr;
			/* -ms-grid-rows: auto auto auto auto auto; */
			grid-template-rows: auto;
			-ms-grid-gap: 3em;
			grid-gap: 3em; 
			box-sizing: border-box;
			padding: 3vw; }

	main.index > *
		{	box-sizing: border-box; }

	main.index h1
		{	-ms-grid-column: 1;
			-ms-grid-column-span: 2;
			grid-column: 1 / span 2;
			margin: 0;
			line-height: 1;
			-ms-grid-row: 1;
			grid-row: 1; }

	main.index aside:nth-child(2)
		{	-ms-grid-column: 3;
			grid-column: 2;
			-ms-grid-row: 1;
			grid-row: 1;
			align-self: self-end; }

	main.index.search h1
		{	-ms-grid-column-span: 2;
			grid-column: 1 / span 2; }

	main.index.search > div
		{	-ms-grid-row: 2;
			grid-row: 2;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
			grid-column: 1 / span 1;
			align-self: center; }

	main.index.home article:nth-child(2)
		{	margin-top: 0;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
			grid-column: 1 / span 2;
			-ms-grid-row: 3; }

	main.index.home article:nth-child(3)
		{	-ms-grid-column: 1;
			-ms-grid-column-span: 3;
			grid-column: 1 / span 2;
			-ms-grid-row: 4; }

	main.index.home article:nth-child(4)
		{	-ms-grid-row: 5; }

	main.index.home article:nth-child(5)
		{	-ms-grid-column: 3;
			-ms-grid-row: 5; }

	main.index.home article:nth-child(6)
		{	-ms-grid-row: 6; }

	main.index.home article:nth-child(7)
		{	-ms-grid-column: 3;
			-ms-grid-row: 6; }

	main.index.home article:nth-child(8)
		{	-ms-grid-row: 7; }

	main.index.home article:nth-child(9)
		{	-ms-grid-column: 3;
			-ms-grid-row: 7; }

	main.index.home article:nth-child(10)
		{	-ms-grid-row: 8; }

	main.index.home article:nth-child(11)
		{	-ms-grid-column: 3;
				-ms-grid-row: 8; }

	main.index.home article:nth-child(12)
		{	-ms-grid-row: 9; }

	main.index.home article:nth-child(13)
		{	-ms-grid-column: 3;
			-ms-grid-row: 9; }

	main.index article
		{	margin: 0; }

	main.index article h2
		{	margin-top: 0; }

	main.index article h2 + p, main.index article h2 + img + p
		{	margin-top: .25em; }

	main.index.home article:nth-child(4), main.index.home article:nth-child(5)
		{	margin-top: 0; }

	main.index > article img
		{	width: 40%;
			max-width: 200px;
			height: auto;
			float: right;
			margin: .75em 0 1em 2em; }

	main.index > footer, main.index > #LinkContainer
		{	-ms-grid-column: 1;
			-ms-grid-column-span: 3;
			grid-column: 1 / span 2;
			-ms-grid-row: 10; }

}

@media all and (min-width:75em), print and (min-width: 7in) {
	main.index
		{	grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 4em;  }

	main.index h1
		{	grid-column: 1 / span 3; }

	main.index.search h1
		{	grid-column: 1 / span 3; }

	main.index.search > div
		{	grid-column: 1 / span 3; }

	main.index.home article:nth-child(2)
		{	grid-column: 1 / span 3; }

	main.index > footer, main.index > #LinkContainer
		{	grid-column: 1 / span 3; }
}


main article + footer
		{	text-align: center; }

main article + footer
		{	width: 100%; }

main article + footer a, main article + footer > span
		{	box-sizing: border-box;
			display: inline-block;
			padding: 0 0 .1em 0;
			width: 1.6em;
			margin: 0 .25em;
			border-radius: 50%;
			font-size: 120%; }

main article + footer a:link, main article + footer a:visited, main article + footer a:active, main article + footer a:hover, main article + footer a:focus
		{	text-decoration: none;
			background-image: none;
			text-shadow: none;
			color: #000;
			/* color: var(--text-color); */
			background-color: #fff;  }

main article + footer a.prev, main article + footer a.next, main article + footer .dots
		{	width: auto;
			color: #000;
			color: var(--text-color);
			background-color: transparent; }

main article + footer > span
		{	color: #fff;
			/* color: var(--text-color); */
			background-color: #000;
			background-color: var(--text-color); }

main article + footer a.prev:hover, main article + footer a.prev:focus, main article + footer a.next:hover, main article + footer a.next:focus
		{	color: #000;
			color: var(--text-color);
			background-color: transparent;
			text-decoration: underline;
			border: none;
    		box-shadow: none; }

main article + footer a:hover, main article + footer a:focus, main article + footer span.current
		{	background-color: #000;
			background-color: var(--text-color);
			color: #fff; 
			color: var(--page-bg);
			border: .05em solid #000;
			border-color: var(--page-bg);
			box-shadow: 0.1em 0.1em 0 var(--detail-color), -0.1em -0.1em 0 var(--detail-color), -0.1em 0.1em 0 var(--detail-color), 0.1em -0.1em 0 var(--detail-color), 0.15em 0 0 var(--detail-color), -0.15em 0 0 var(--detail-color), 0 0.15em 0 var(--detail-color), 0 -0.15em 0 var(--detail-color);
			line-height: 1.4; }

main article + footer a:hover, main article + footer a:focus
		{	background-color: var(--detail-color);
			color: var(--page-bg);  }

main article + footer a span, main article + footer span.current span
		{	display: none; }

main aside + article
		{	width: 100%; }

/* -- End Home Page --------------------------- */

/* -- Start Bottom of Post -------------------- */

main > footer	{	font-size: 85%;
			margin-top: 6em; }

main > footer a[href]
		{	background-size: 100% .1em; }

main > footer a[rel="prev"], main > footer a[rel="next"]
		{	/*border: 1px dotted #f0f;*/
			display: block;
			min-height: 3em;
			background-repeat: no-repeat;
			background-size: 3em auto; }

main > footer a[rel="prev"]
		{	text-align: left;
			padding-left: 3.5em;
			padding-right: 2em;
			background-position: 0 0;
			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMAQCAvERmeAPMAAABZSURBVGje7dCxDYAwEARBRAcPDUAp9N8U8QcvAmRZtmfCi1a3AQAAE7sjOcr92x7ZVe2yZMmSJUuWLFmyumc9kZzl3qbr/1/ChAkTJkyYMGHCFgsDAAAG9QIQUZ5P5aEjUwAAAABJRU5ErkJggg==); }

main > footer a[rel="next"]
		{	text-align: right;
			padding-right: 3.5em;
			padding-left: 2em;
			background-position: 100% 0;
			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMAQCAvERmeAPMAAABZSURBVGje7dCxDYAwEARBRAePKABKoP/miD94ObAs2dZMeNHqDgAAYGdvJFe9t52RPdUuTJgwYcKECRMmbP6wL5K72od09f8lS5YsWbJkyZIla6ssAABgVT+ZSZ4xcH7tBwAAAABJRU5ErkJggg==); }

main footer + article
		{	margin-top: 3em; }

@media screen and (min-width:36em) {

	main > footer .prevnextpost
		{	display: flex;
			align-items: flex-start;
			justify-content: space-between; }

	main > footer .prevnextpost p
		{	flex: 1 1 45%; }

}

@media print {

	main > footer
		{	display: none; }

}

/* -- End Bottom of Post ---------------------- */

/* -- Start Sidebar --------------------------- */

aside[role="complementary"] a:link, aside[role="complementary"] a:visited
		{	color: #333;
			background-image: none; }

aside[role="complementary"] a:hover,  aside[role="complementary"] a:focus
		{	color: #f60;
			color: var(--nav-color);
			background-image: linear-gradient(to right, currentColor 0%, currentColor 100%); }

aside[role="complementary"] .tagcloud a:hover,  aside[role="complementary"] .tagcloud a:focus
		{	background-size: 100% .15em; }

aside[role="complementary"] h2
		{	margin: 2em 0 0 0; }


/* -- End Sidebar ----------------------------- */

/* -- Start Recent Posts Sidebar -------------- */

ul.recent	{	list-style-type: none;
			margin: 2em 0 0 0;
			padding: 0;
			display: grid;
			grid-gap: 2em;
			grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); }

ul.recent li	{	margin: 0;
			padding: 0;
			background-repeat: no-repeat;
			background-position: 0 .25em;
			background-size: 3em auto;
			line-height: 1.5; }

@media (min-width:30em) and (max-width:62em) {

	ul.recent li
		{	box-sizing: border-box; }

}

ul.recent a[href]
		{	display: block;
			min-height: 3em;
			text-decoration: none;
			padding-left: 3.5em;
			background-position: 100vw 0;
			transition: background ease-in .15s; }

ul.recent a[href]:focus, ul.recent a[href]:hover
		{	background-image: none;
			background-image: linear-gradient(to left, transparent 0%, #fff 100%);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 3em 0;
			text-shadow: none; }

@media (min-width:62em) {

	ul.recent a[href]
		{	background-position: 10vw 0; }
}

ul.recent a time
		{	font-size: 85%;
			font-style: italic; }

ul.recent a time::before
		{	content: "";
			display: block; }

/* -- End Recent Posts Sidebar ---------------- */

/* -- Start Sub-Navigation Links -------------- */

ul.subnav	{	margin: 2em 0;
			padding: .25em 0;
			list-style-type: none;
			background-color: #000;
			border-radius: .5em; }

ul.subnav li	{	margin: 0; }

ul.subnav li a	{	display: block;
			text-shadow: none;
			background-image: none;
			padding: .25em 1.5em;
			margin: .5em 0; }

ul.subnav li a:link, ul.subnav li a:visited, ul.subnav li a:hover, ul.subnav li a:focus, ul.subnav li a:active
		{	color: #fff;
			text-decoration: none; }

ul.subnav li a:hover, ul.subnav li a:focus
		{	background-image: none;
			color: #f60;
			color: var(--nav-color); }

ul.subnav li a[aria-current="page"], ul.subnav li a[aria-current="page"]:hover, ul.subnav li a[aria-current="page"]:focus
		{	color: #757575; }

@media (min-width:50em) {
}

/* -- End Sub-Navigation Links ---------------- */

/* END Layout */
/* ================================================================================================== */




/* ================================================================================================== */
/* Content Styles */

h1		{	font-size: 350%;
			margin: 1rem 0 .25em 0;
			line-height: .8;
			text-shadow: 0.02em 0.02em 0 var(--detail-color), -0.02em -0.02em 0 var(--detail-color), -0.02em 0.02em 0 var(--detail-color), 0.02em -0.02em 0 var(--detail-color), 0 0.02em 0 var(--detail-color), 0 -0.02em 0 var(--detail-color), -0.02em 0 0 var(--detail-color), 0.02em 0 0 var(--detail-color);
			color: var(--page-bg);
			overflow: auto;
			padding: 2rem 0.2rem;
			text-wrap: balance; }

@supports (-webkit-text-stroke: var(--detail-color) 0.05em) and (paint-order: stroke fill) {
	h1 {	/* outline: .02em dotted yellow; */
			-webkit-text-stroke: var(--detail-color) 0.05em;
			paint-order: stroke fill;
			text-shadow: none; }
}

@supports (text-stroke: var(--detail-color) 0.05em) and (paint-order: stroke fill) {
	h1 {	/* outline: .02em dotted blue; */
			text-stroke: var(--detail-color) 0.05em;
			paint-order: stroke fill;
			text-shadow: none; }
}

h1, [role="region"][aria-labelledby][tabindex]
		{	background: linear-gradient(to right, var(--page-bg) 30%, rgba(var(--page-bg-rgb), 0)),
    			linear-gradient(to right, rgba(var(--page-bg-rgb), 0), var(--page-bg) 70%) 0 100%,
    			radial-gradient(
				  farthest-side at 0% 50%,
				  rgba(var(--text-color-rgb), 0.5),
				  rgba(var(--text-color-rgb), 0)
				),
				radial-gradient(
				  farthest-side at 100% 50%,
				  rgba(var(--text-color-rgb), 0.5),
				  rgba(var(--text-color-rgb), 0)
				)
				0 100%;
			background-repeat: no-repeat;
			background-color: var(--page-bg);
			background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
			background-position: 0 0, 100%, 0 0, 100%;
			background-attachment: local, local, scroll, scroll; }

[role="region"][aria-labelledby][tabindex]
		{	overflow: auto; }

[role="region"][aria-labelledby][tabindex]:focus
		{	outline: 0.1em solid var(--detail-color); }

@media (min-width:32em) {

	h1	{	font-size: 500%; }

}

@media (min-width:60em) {

	h1	{	font-size: 600%;
			/* Experimentalizationification */
			/* width: 95vw; */
			/* margin-left: calc(-50vw + 30rem); */ }

	.page h1
		{	margin-left: 0;
			width: auto; }

}

@media print {

	h1	{	color: #000;
			font-size: 150%;
			text-shadow: none; }

}

main > h2	{	margin-top: 2em;
			line-height: 1.1; }

main > h1 + h2
		{	margin-top: 0; }

main > h3, main > h4, main > h5, main > h6
		{	margin-bottom: 0;
			margin-top: 3em;
			line-height: 1.1; }

main > h5, main > h6
		{	font-size: 100%;
			padding-left: 2em; }

main > h6	{	padding-left: 4em; }

main aside	{	box-sizing: border-box;
			font-size: .85em;
			color: #000;
			color: var(--text-color);
			margin: 1.5em 0;
			padding: 0;
			border-top: .2em double var(--detail-color);
			border-bottom: .2em double var(--detail-color); }

main.home aside
		{	font-size: 1em; }

main aside + aside
		{	margin-top: 2em; }

main aside a[href]
		{	-webkit-background-size: 100% .1em;
			background-size: 100% .1em; }

@media print {

	main aside
		{	color: #000;
			border-top: .1em solid #CCC; }

}

@media (min-width:25em) {

	main aside
		{	margin: 1.5em 1em; }

}

@media (max-width:49.9em) {
	main aside.half, main aside.thirds, main aside.quarters, main aside.fifths, main aside.sixths, main aside.seventht, main aside.eighths, main aside.ninths, main aside.tenths
		{	width: auto; }
}

@media print, (min-width:50em) {

	main aside
		{	margin: 1.5em 2em; }

	main aside.right, main aside.left
		{	width: 33%; }

	main aside.right
		{	margin: .5em 0 1em 2em;
			float: right; }

	main aside.left
		{	margin: .5em 2em 1em 0;
			float: left; }

}

h1 + aside	{	margin-top: 0;
			margin: 0;
			border: none; }

h1 + aside time	{	font-style: italic; }

video		{	max-width: 100%;
			width: 100%;
			height: auto; }

iframe:not([title="Twitter Tweet"])
		{	max-width: 100%;
			border: 0.01em solid #999; }

iframe[src*="//www.slideshare.net/"], iframe[src*="//www.youtube.com/"], iframe[src*="//player.vimeo.com/"], iframe[src*="//docs.google.com/"], iframe[src*="//www.google.com/"]
		{	border: .2em solid #ccc !important;
			width: 90% !important;
			margin-left: auto !important;
			margin-right: auto !important;
			display: block; }

sup, sub	{	font-size: 75%;
			line-height: 0; }

small		{	font-size: 75%; }

abbr[title], acronym[title]
		{	border-bottom: 0.1em dotted rgba(0,0,0,.3);
			cursor: help;
			text-decoration: none; }

/* Print styles */
@media print {
	mark	{	border: 1pt dotted #000; }

	ins	{	border-bottom-width: 3pt; }
}


/* -- Start Images ------------------------- */

img		{	max-width: 100%;
			height: auto;
			border: none;
			font-style: italic; }

img[longdesc]	{	position: relative; }

img[longdesc]::before
		{	position: absolute;
			top: 0;
			left: 0;
			content: "longdesc: " attr(longdesc);
			display: block;
			width: auto;
			min-width: 30em;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			background-color: rgba(255,255,255,.5);
			z-index: 20; }

@media (min-width:25em) {
  
	img.left, img.right
		{	max-width: 49%;
			height: auto; }

	img.left
		{	float: left;
			margin-right: 1em; }

	img.right
		{	float: right;
			margin-left: 1em; }
  
	figure img.left, figure img.right
		{	margin-left: 0;
			margin-right: 0; }
  
}

svg		{	fill: currentColor; }

/* -- End Images --------------------------- */

/* -- Start Hyperlinks --------------------- */

main a:link, main a:visited, main a:active
		{	color: #00f;
			/* color: var(--detail-color); */
			color: var(--text-color); }

main a:link > img, main a:visited > img, main a:active > img
		{	outline: .05em solid #00f;
			outline: .05em solid var(--detail-color);
			outline-offset: 0.05em;
			transition: outline-offset .1s; }

main a:visited	{	color: #000;
			color: var(--text-color);
			text-decoration-color: var(--detail-color); }

main a:visited > img
		{	outline: .05em solid var(--text-color); }

main a:hover, main a:focus
		{	color: #f60;
			/* color: var(--detail-color); */
			color: var(--text-color);
			text-decoration: none;
			outline: none; }

main a:hover > img, main a:focus > img
		{	outline-offset: .1em; }

@supports (text-decoration-thickness: 0.5em) {
	main a
		{	transition: all ease-out 0.15s; }

	main a:link, main a:visited
		{	text-decoration-skip-ink: auto;
			text-decoration-thickness: 0.1em;
			text-underline-offset: 0.15em;
			text-decoration-color: var(--detail-color); }

	main a:hover, main a:focus
		{	text-decoration: underline;
			text-decoration-skip-ink: none;
			text-decoration-thickness: 0.5em;
			/* text-underline-offset: -0.25em; */
			/* text-decoration-color: rgba(255, 255, 0, 1); */
			text-decoration-color: var(--detail-color); }

	main a:visited, main a:visited:hover, main a:visited:focus
		{	text-decoration-color: var(--text-color); }
}

main.index h2 a:hover, main.index h2 a:focus, #Posts li a:focus, #Posts li a:hover, #Slides a:hover
		{	text-decoration-color: var(--detail-color);
			color: #000;
			color: var(--text-color); }

main.index article:hover, #Posts li:hover, #Slides:hover
		{	outline: .3em solid #f60;
			outline: .3em solid var(--detail-color);
			outline-offset: .3em; }

main.index article:focus-within, #Posts li:focus-within, #Slides:focus-within
		{	outline: .3em solid #f60;
			outline: .3em solid var(--detail-color);
			outline-offset: .3em; }

main a:focus img, main a:hover img
		{	outline: .1em solid #f60;
			outline: .1em solid var(--detail-color); }

/* main a[href], main article > a[href] h2, aside a[href], footer[role=contentinfo] a[href]
		{	text-decoration-skip: ink;
			text-decoration-skip-ink: auto; } */

@media print {

	main a[href], main article > a[href] h2, aside a[href], footer[role=contentinfo] a[href]
		{	color: #000; }
	
	main a[href]::after
		{	content: none; }

}

/* a[href]::selection 
		{	color: #fff;
			background-color: #000; } */

a[href] abbr[title], a[href] acronym[title]
		{	cursor: inherit; }

main a[href$=".pdf"]::after /* Indicate PDF files */
		{	content: " (PDF)"; }

main a[target^="_"]::after /* Indicate new window/tab */
		{	content: " (new window/tab)"; }

main a[href]:has( > img) /* Clear background style from images, though it shouldn't need it. */
		{	background-image: none; }

main a[href^="http://web.archive.org/"]::after, a[href^="https://web.archive.org/"]::after /* Indicate Wayback link */
		{	content: " (archived)"; }

@keyframes Target /* Style an anchor when it has been navigated */
		{	
			from { outline-offset: -.25em; outline-color: var(--detail-color); outline-width: .1em; }
			to { outline-offset: 2em; outline-color: transparent; outline-width: 1em; }
		}

:target		{	outline-width: .2em;
			outline-style: solid;
			outline-color: var(--detail-color) }

@media screen and (prefers-reduced-motion: no-preference) {
	:target	{	outline-width: 0;
			animation: Target 1s ease-out 2;
			 }
}

/* Collectd in-page links */

sup.footnote
		{	padding-left: 0.2em;
			font-size: 75%;
			line-height: 0; }

#LinkContainer
		{	overflow-wrap: break-word;
			clear: both; }

sup.footnote, #LinkContainer
		{	display: none; }

@media print {
	#LinkContainer
		{	display: block;
			margin: 1.5em 0; }
	sup.footnote
		{	display: inline; }
}
@media screen and (min-width: 68em), print and (min-width: 5in) {
	#LinkContainer ol
		{	column-count: 2;
			column-gap: 4em; }
}
@media all and (min-width: 80em), print and (min-width: 9in) {
	#LinkContainer ol
		{	column-count: 3;
			column-gap: 4em; }
}

/* -- End Hyperlinks ----------------------- */

/* -- Start Quotes ------------------------- */

/* Only for curly quotes for English readers; if translated then ignore */
html[lang^="en"] q
		{	quotes: "\201C" "\201D" "\2018" "\2019"; }

blockquote
		{	box-sizing: border-box;
			font-family: Georgia, Baskerville, 'Lucida Bright', 'Times New Roman', Times, serif;
			font-size: 90%;
			color: #444;
			color: var(--text-color);
			margin: 1.5em .25em;
			padding: 0; }

blockquote + blockquote
		{	margin-top: 3.5em; }

blockquote footer
		{	font-family: 'Cabin', Trebuchet, 'Trebuchet MS', sans-serif;
			font-size: 65%;
			font-style: normal;
			margin: 0 0 -.1em 0;
			line-height: 1.1; }

blockquote.comment > footer, blockquote.pingback > footer
		{	padding: 1.5em 0 0 2em; }

blockquote.comment code, blockquote.comment pre
		{	font-size: 95%; }

@media print {

	blockquote
		{	color: #000; }

}

blockquote footer cite
		{	font-family: 'Cabin', Trebuchet, 'Trebuchet MS', sans-serif; }

blockquote footer cite::before
		{	content: "\2014 ";
			padding-right: .5em; }

blockquote footer a[href], blockquote header a[href]
		{	background-size: 100% .1em; }

blockquote.comment > footer cite::before, blockquote.pingback > footer cite::before
		{	content: "";
			display: block;
			width: 1em;
			height: 1em;
			border-bottom: .1em solid rgba(var(--text-color-rgb), 0.5);
			border-right: .1em solid rgba(var(--text-color-rgb), 0.5);
			transform: rotate(45deg);
			background-color: #efefef; /* page bg #efefef */
			background-color: var(--page-bg);
			margin: -2.1em 0 1em 0;
			padding: 0; }

@media (min-width:50em) {

	blockquote.comment footer cite::before, blockquote.pingback footer cite::before
		{	left: .5em; }

}

blockquote.comment > footer cite::before, blockquote.pingback > footer cite::before
		{	border-bottom: .1em solid rgba(var(--text-color-rgb), 0.5);
			border-right: .1em solid rgba(var(--text-color-rgb), 0.5);
			margin-left: 2em; }

article div > blockquote.bypostauthor > footer cite::before
		{	border-bottom-color: #f60;
			border-bottom-color: var(--detail-color);
			border-right-color: #f60;
			border-right-color: var(--detail-color); }

@media print {

	blockquote.comment > footer cite::before, blockquote.pingback > footer cite::before
		{	background-color: #fff;
			border-bottom: .15em solid #ccc;
			border-right: .15em solid #ccc; }

}

article div > blockquote.comment, article div > blockquote.pingback
		{	border: none;
			padding: 0;
			margin: 1.5em 0;
			overflow: hidden;
			font-size: .8em; }

article div > blockquote.comment blockquote, article div > blockquote.pingback blockquote
		{	font-size: 100%;
			font-style: normal; }

article div > blockquote.comment blockquote > footer, article div > blockquote.pingback blockquote > footer
		{	margin-left: 0; }

article div > blockquote > div
		{	border: .1em solid rgba(var(--text-color-rgb), 0.5);
			border-radius: 1em;
			padding-left: 1em;
			padding-right: 1em; }

article div > blockquote.bypostauthor > div
		{	border-color: #f60;
			border-color: var(--detail-color); }

@media print {

	article div > blockquote > div
		{	border-radius: 1em;
			border-color: #ccc; }

}

article div > blockquote header
		{	margin: .5em 0 1em 1em;
			/* float: right; */
			font-size: 65%; }

article div > blockquote header em, article div > blockquote header i, article div > blockquote header cite
		{	font-style: normal; }

article div > blockquote.comment > footer, article div > blockquote.pingback > footer
		{	margin: 0;
			border-top: none;
			border-bottom: none; }

article div blockquote + div, article div blockquote + div + div
		{	margin-left: 1.5em;
			margin-right: .5em; }

blockquote.comment blockquote
		{	margin: 0;
			padding: 0 0 0 1em;
			border-left: .2em solid rgba(var(--text-color-rgb), 0.3); }

@media (min-width:25em) {

	blockquote
		{	margin: 1.5em 1em; }

	blockquote.comment blockquote
		{	margin: 1.5em 1em; }

}

@media (min-width:50em) {

	blockquote
		{	margin: 1.5em 2.5em; }

	blockquote + blockquote
		{	margin-top: 3.5em; }

	blockquote footer, blockquote.comment > footer, blockquote footer, blockquote.pingback > footer
		{	padding-left: 6.5em; }

	blockquote.comment footer cite::before, blockquote.pingback footer cite::before
		{	left: 8em; }

	blockquote.right, blockquote.left
		{	width: 33%; }

	blockquote.right
		{	margin: 0 1em 1em 2em;
			float: right; }

	blockquote.left
		{	margin: 0 2em 1em 1em;
			float: left; }

	blockquote.right footer cite::before, blockquote.left footer cite::before
		{	left: 1em; }

	blockquote.right footer, blockquote.left footer
		{	padding-left: 2em; }

	/* article div blockquote + div, article div blockquote + div + div
		{	margin-left: 5em;
			margin-right: 2.5em; } */

	blockquote.comment blockquote
		{	margin: 1.5em; }

}

.twitter-tweet-rendered /* Lots of inline crap to override, hence the !importants */
		{	margin-left: auto !important;
			margin-right: auto !important; }

@media (min-width:50em) {

	.twitter-tweet-rendered
		{	/* transform: scale(1.2) !important; */
 			margin-top: 4em !important;
  			margin-bottom: 4em !important; }

}

/* -- End Quotes ------------------------- */

/* -- Start Code ------------------------- */

kbd		{	border: .07em solid #aaa;
			border-radius: 0.3em;
			box-shadow: 0.1em 0.1em 0.1em rgb(0 0 0 / 15%), 0 0.1em 0.1em rgb(0 0 0 / 15%), 0.1em 0 0.1em rgb(0 0 0 / 15%);
			background-color: #f9f9f9;
			background-image: linear-gradient(to bottom, #eee, #f9f9f9, #eee);
			background-image: radial-gradient(circle farthest-side at bottom center, #F9F9F9 30%, #eee 70%);
			padding: 0.1em 0.3em 0.2em 0.3em;
			font-size: 80%;
			color: #000;
			line-height: 1; }

code, pre, tt, kbd
		{	font-family: 'Consolas', 'Andale Mono', 'Lucida Sans Typewriter', 'Roboto Mono', 'SF Mono', 'Courier New', Courier, monospace;
			font-weight: normal;
			font-variant-ligatures: none; }

code		{	color: rgba(var(--text-color-rgb), 0.7); }

pre code, tt	{	background-color: transparent;
			padding: 0; }

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code
		{	padding: 0;
			background-color: transparent; }

pre		{	color: rgba(255, 176, 0, 0.8);
			font-size: 90%;
			background-color: #2b2b2b;
			border: .07em solid #222;
			box-sizing: border-box;
			padding: .5em 1em;
			overflow: auto;
			box-shadow: inset 0 0 4em rgba(0,0,0,.5);
			border-radius: 1em;
			min-height: 5em;
			white-space: pre-wrap;
			tab-size: 4;
			position: relative;
			overflow-y: hidden; }

pre code	{	color: rgba(255, 176, 0, 0.8); }

@media print {

	code	{	background-color: transparent;
			color: #000; }

	pre	{	color: #000;
			background-color: transparent;
			background-image:none;
			box-shadow: none;
			text-shadow: none; }

	pre::after
		{	display: none;  }

}

@media screen and (prefers-reduced-motion: reduce) {

	pre::after
		{	display: none;  }

}

pre mark	{	background-color: #000;
			color: rgba(255, 176, 0, 0.9); }

mark code	{	color: color: rgba(var(--text-color-rgb), 0.7); }

code, kbd	{	box-decoration-break: slice;
			-webkit-box-decoration-break: slice; }

/* -- End Code --------------------------- */

/* -- Start Tables and Figures ----------- */

figure		{	display: block;
			box-sizing: border-box;
			margin: 2.5em 0;
			text-align: center; }

figure + figure	{	margin-top: 3.5em; }

figure img	{	max-width: 100%;
			max-height: 90vh;
			height: auto;
			width: auto; }

figcaption	{	display: block;
			box-sizing: border-box;
			padding: .5em 2.5em 0 2.5em;
			text-align: left;
			font-size: 80%;
			font-family: Georgia, Baskerville, 'Lucida Bright', 'Times New Roman', Times, serif;
			clear: both;
			width: 100%; }

figure.right figcaption, figure.left figcaption
		{	padding-left: 0;
			padding-right: 0; }

figure blockquote
		{	text-align: left; }

table		{	margin: 1em 0;
			border-collapse: collapse; }

[role="region"][aria-labelledby][tabindex] table
		{	margin: 0; }

[role="region"][aria-labelledby][tabindex]:has(> table)
		{	margin: 1em 0; }

th, td		{	padding: 0.25em 0.5em;
			vertical-align: text-top;
			text-align: left; }

tr:nth-child(even)
		{	background-color: rgba(255,255,255,.25); }

tr:nth-child(odd)
		{	background-color: rgba(0,0,0,.1); }

th		{	vertical-align: bottom;
			background-color: rgba(0,0,0,.5);
			color: #fff;
			font-weight: bold; }

td.right, th.right, td.number, th.number/*, col.number || td, col.right || td  CSS4 table col selector */
		{	text-align: right; }

td::before	{	display: none; }

@media all and (max-width: 37em) {

	/* table:not(.noRWD), table:not(.noRWD) tr, table:not(.noRWD) td
		{	display: block; }

	table:not(.noRWD) tr
		{	padding: 0.7em 2vw; }

	table:not(.noRWD) th, table:not(.noRWD) tr:first-of-type
		{	display: none; }

	table:not(.noRWD) caption
		{	vertical-align: bottom;
			background-color: rgba(0,0,0,.5);
			color: #fff;
			font-weight: bold; }

	table:not(.noRWD) td::before
		{	display: inline;
			font-weight: bold; }

	table:not(.noRWD) td
		{	display: grid;
			grid-template-columns: 4em auto;
			grid-gap: 1em 0.5em; }

	table:not(.noRWD) td.right, table:not(.noRWD) th.right, table:not(.noRWD) td.number, table:not(.noRWD) th.number
		{	text-align: left; } */

}

figure table	{	width: 100%;
			max-width: 100%; }

figure.right.half, figure.left.half
		{	width: auto;
			max-width: 100%;
			float: none; }

@media print, (min-width:50em) {

	figure.right, figure.left
		{	border-top: .1em solid #000;
			border-top-color: var(--text-color);
			border-bottom: .1em solid #000;
			border-bottom-color: var(--text-color);
			padding: 1em 0;
			width: 30%;
			margin-top: 0; }

	figure.right, figure.right.half
		{	float: right;
			margin-left: 2em; }

	figure.left, figure.left.half
		{	float: left;
			margin-right: 2em; }

	figure.right, figure.left
		{	padding: 1em .5em; }

	figcaption
		{	padding-left: 1em;
			padding-right: 1em; }

	figure.right.half, figure.left.half
		{	width: 48.5%;
			border-top: none;
			border-bottom: none; }

	figure.left.half + figure.right.half
		{	margin-left: .5%; }

	figure.right.half + figure.left.half
		{	margin-right: .5%; }

}

@media (min-width:70em) {

	figure.right, figure.left
		{	padding: 1em; }

	figure.right
		{	margin-left: 2em; }

	figure.left
		{	margin-right: 2em; }

	figcaption
		{	padding-left: 2em;
			padding-right: 2em; }

}

/* -- End Tables and Figures ------------- */

/* -- Start Lists ------------------------ */

ul, ol		{	margin-left: 0em;
			padding-left: 1.5em; }

ol		{	list-style-type: decimal;
			padding-left: 3em; }

ol ol		{ 	list-style-type: upper-alpha;
			padding-left: 1.5em; }

ol ol ol	{	list-style-type: upper-roman;
			padding-left: 2.5em; }

ol ol ol ol	{	list-style-type: lower-alpha;
			padding-left: 1.5em; }

ol ol ol ol ol	{	list-style-type: lower-roman;
			padding-left: 2.5em; }

ol.tree, ul.tree, ol.tree ol, ul.tree ul
		{	list-style-type: circle;
			padding-left: 1.2em; }

ol.tree ol, ul.tree ul
		{	border-left: .07em dotted currentColor;
			margin-left: -1.0em;
			padding-left: 3em; }

li, dt		{	margin-top: .75em; }

dd		{	margin-left: 1.5em;
			margin-top: .25em; }

/* -- End Lists -------------------------- */

/* -- Start Forms ------------------------ */

input, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], textarea, select
		{	border-radius: .5em;
			border: 0.1em solid currentColor;
			padding: .5em .75em;
			font: inherit;
			letter-spacing: inherit;
			word-spacing: inherit;
			color: currentColor;
			max-width: 80vw;
			background-color: transparent; }

input:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="search"]:focus, input[type="url"]:focus, textarea:focus, select:focus
		{	outline: none;
			border-color: #f60;
			border-color: var(--detail-color);
			/* outline: 0.1em solid currentColor; */
			/* outline-offset: 0.1em; */ }

input[type="submit"], button
		{	border-radius: .5em;
			border: .1em solid #006;
			border: .1em solid var(--detail-color);
			padding: .5em 1em;
			background-color: #009;
			background-color: var(--detail-color);
			color: #fff;
			color: var(--page-bg);
			font: inherit;
			letter-spacing: inherit;
			word-spacing: inherit;  }

input[type="submit"]:hover, input[type="submit"]:focus, button:hover, button:focus
		{	box-shadow: 0 0 1em rgba(0,0,0,1);
			box-shadow: 0 0 1em var(--detail-color);
			background-color: var(--page-bg);
			color: var(--page-bg);
			color: #f60;
			color: var(--detail-color); }

[role="search"]	{	display: flex;
			align-items: stretch;
			background-color: #fff;
			color: #000;
			border: .15em solid rgba(0,0,0,.5);
			border-radius: .5em;
			padding: 0;
			/* margin: 0 1em .25em 1em; */
			margin: .25em .25em .25em auto; }

[role="search"] button
		{	display: block;
			width: 2.5em;
			margin: 0;
			border: none;
			padding: .25em;
			background: transparent;
			border-left: .05em solid rgba(0,0,0,.5);
			border-radius: 0 .4em .4em 0;
			cursor: pointer;
			flex: 0 1 2.5em;
			max-height: 4em; /* IE11 */ }

[role="search"] button svg
		{	display: block;
			margin: 0 auto;
			fill: #333;
			width: 100%;
			height: auto; }

[role="search"]:focus-within
		{	border-color: #000;
			box-shadow: 0.1em 0.1em 0 #f60, -0.1em -0.1em 0 #f60, -0.1em 0.1em 0 #f60, 0.1em -0.1em 0 #f60;
			box-shadow: 0.1em 0.1em 0 var(--nav-color), -0.1em -0.1em 0 var(--nav-color), -0.1em 0.1em 0 var(--nav-color), 0.1em -0.1em 0 var(--nav-color); }

[role="search"]:focus-within button
		{	border-color: #f60;
			border-color: var(--nav-color); }

[role="search"] button:hover, [role="search"] button:focus
		{	background-color: #000;
			box-shadow: none;
			outline: none; }

[role="search"] button:hover svg, [role="search"] button:focus svg
		{	fill: #f60;
			fill: var(--nav-color);
			outline: none; }

[role="search"] input[type="text"]
		{	border: none;
			background-color: transparent;
			margin: 0;
			border-radius: 0;
			flex: 1 0 auto; }

[role="search"] input[type="text"]:focus, [role="search"] button:focus
		{	outline: none;
			box-shadow: none; }

[role="search"] input[type="text"]::-webkit-input-placeholder
		{	color: #757575; }

[role="search"] input[type="text"]:-moz-placeholder
		{	color: #757575; /* Firefox 18- */ }

[role="search"] input[type="text"]::-moz-placeholder
		{	color: #757575; /* Firefox 19+ */ }

[role="search"] input[type="text"]:-ms-input-placeholder
		{	color: #757575; }

@media screen and (min-width:50em) {

}

form[action$="wp-comments-post.php"] label
		{	display: block; }

form[action$="wp-comments-post.php"] textarea
		{	box-sizing: border-box;
			width: 98%;
			max-width: 98%;
			margin: 0 1%;
			height: 15em;
			font-size: 110%; }

form[action$="wp-comments-post.php"] input[type="text"]
		{	margin: 0 1%;
			max-width: 85%; }

textarea#comments
		{	width: 100%;
			box-sizing: border-box; }

/* Windows High Contrast Mode styles */
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {

	input:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="search"]:focus, input[type="url"]:focus, textarea:focus, select:focus, input[type="submit"]:hover, input[type="submit"]:focus, button:hover, button:focus, [role="search"] input[type="text"]:focus, [role="search"] button:focus
		{	outline: .2em solid Highlight;
			outline-offset: .2em; }

}


/* -- End Forms -------------------------- */

.half		{	width: 49%;
			margin-right: 1%; }

.thirds		{	width: 32%;
			margin-right: 1%; }

.fourths	{	width: 24%;
			margin-right: .3%; }

.fifths		{	width: 18.5%;
			margin-right: .5%; }

.sixths		{	width: 15.5%;
			margin-right: .2%; }

.sevenths	{	width: 13%;
			margin-right: .3%; }

.eighths	{	width: 11%;
			margin-right: .5%; }

.ninths		{	width: 10%;
			margin-right: .1%; }

.tenths		{	width: 8.5%;
			margin-right: .5%; }

.half:nth-child(2n), .thirds:nth-child(3n), .fourths:nth-child(4n), .fifths:nth-child(5n), .sixths:nth-child(6n), .sevenths:nth-child(7n), .eighths:nth-child(8n), .ninths:nth-child(9n), .tenths:nth-child(10n)
		{	margin-right: 0; }

img.half, img.thirds, img.quarters, img.fifths, img.sixths, img.seventht, img.eighths, img.ninths, img.tenths, video.half, video.thirds, video.quarters, video.fifths, video.sixths, video.seventht, video.eighths, video.ninths, video.tenths
		{	height: auto;
			box-sizing: border-box; }

@media print, (min-width:40em) {

	figure.two, figure.three, figure.four, figure.five, figure.six, figure.seven, figure.eight, figure.nine, figure.ten, .tweet-wrapper
		{	padding: 0;
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			align-items: flex-end; }

	.tweet-wrapper
		{	align-items: flex-start; }

	figure.two > img, figure.three > img, figure.four > img, figure.five > img, figure.six > img, figure.seven > img, figure.eight > img, figure.nine > img, figure.ten > img, figure.two > video, figure.three > video, figure.four > video, figure.five > video, figure.six > video, figure.seven > video, figure.eight > video, figure.nine > video, figure.ten > video, figure.two > a, figure.three > a, figure.four > a, figure.five > a, figure.six > a, figure.seven > a, figure.eight > a, figure.nine > a, figure.ten > a, .tweet-wrapper.two > blockquote, .tweet-wrapper.two > .twitter-tweet.twitter-tweet-rendered, .tweet-wrapper.three > blockquote, .tweet-wrapper.three > .twitter-tweet.twitter-tweet-rendered, .tweet-wrapper.two > figure, .tweet-wrapper.three > figure
		{	flex: 1 1 auto;
			height: auto;
			margin: .25em; }

	figure.two > img, figure.two > video, figure.two > a
		{	width: 48%; }

	.tweet-wrapper.two > blockquote, .tweet-wrapper.two > .twitter-tweet.twitter-tweet-rendered, .tweet-wrapper.two > figure
		{	width: 48% !important; }

	figure.three > img, figure.three > video, figure.three > a
		{	width: 31%; }

	.tweet-wrapper.three > blockquote, .tweet-wrapper.three > .twitter-tweet.twitter-tweet-rendered, .tweet-wrapper.three > figure
		{	width: 30% !important; }

	figure.four > img, figure.four > video, figure.four > a
		{	width: 23%; }

	figure.five > img, figure.five > video, figure.five > a
		{	width: 18%; }

	figure.six > img, figure.six > video, figure.six > a
		{	width: 14%; }

	figure.seven > img, figure.seven > video, figure.seven > a
		{	width: 12%; }

	figure.eight > img, figure.eight > video, figure.eight > a
		{	width: 10%; }

	figure.nine > img, figure.nine > video, figure.nine > a
		{	width: 8%; }

	figure.ten > img, figure.ten > video, figure.ten > a
		{	width: 6%; }

}

.center		{	text-align: center; }

.clearleft	{	clear: left; }

.clearright	{	clear: right; }

.clear		{	clear: both; }

/* END Content Styles */
/* ================================================================================================== */




/* ================================================================================================== */
/* Accessible Emoji */

/* The animation */

@keyframes TOOLTIP {
	from {
		bottom: .5em;
		background-color: rgba(0,0,0,0);
		border: .05em solid rgba(255,255,255,0);
		color: rgba(255,255,255,0);
		box-shadow: 0 0 0 rgba(0,0,0,1);
	}
	to {
		bottom: 1.5em;
		background-color: rgba(0,0,0,.85);
		border: .05em solid rgba(255,255,255,1);
		color: rgba(255,255,255,1);
		box-shadow: .15em .15em .5em rgba(0,0,0,1);
	}
}

/* Style for the tool-tip */

span[role=img][aria-label], span[role=img][aria-label]
		{	position: relative; }

span[role=img][aria-label]:focus::after, span[role=img][aria-label]:hover::after
		{	position: absolute;
			display: block;
			z-index: 1;
			bottom: 1.5em;
			left: 0;
			max-width: 5em;
			padding: .5em .75em;
			border: .05em solid rgba(255,255,255,1);
			border-radius: .2em;
			box-shadow: .15em .15em .5em rgba(0,0,0,1);
			content: attr(aria-label);
			background-color: rgba(0,0,0,.85);
			color: rgba(255,255,255,1);
			font-size: 80%;
			animation: TOOLTIP .1s ease-out 1; }

@media print {

	span[role=img][aria-label]::after
		{	content: " (" attr(aria-label) ") "; }

}

/* END Accessible Emoji */
/* ================================================================================================== */




/* ================================================================================================== */
/* Heading Anchors */

main > h2[id], main > h3[id], main > h4[id], main > h5[id], main > h6[id]
		{	position: relative;
			padding-right: 1em; }

main > h2[id] a, main > h3[id] a, main > h4[id] a, main > h5[id] a, main > h6[id] a
		{	position: absolute;
			top: .1em;
			right: 0;
			background-color: #f60;
			background-color: var(--detail-color);
			border: .02em solid #f60;
			border: .02em solid var(--detail-color);
			font-size: 80%;
			width: 1em;
			height: 1em;
			display: inline-block;
			line-height: 1;
			text-align: center;
			border-radius: 50%;
			text-decoration: none;
			color: #efefef;
			color: var(--page-bg);
			font-weight: normal; }

main > h2[id] a:hover, main > h3[id] a:hover, main > h4[id] a:hover, main > h5[id] a:hover, main > h6[id] a:hover, main > h2[id] a:focus, main > h3[id] a:focus, main > h4[id] a:focus, main > h5[id] a:focus, main > h6[id] a:focus
		{	outline: none;
			background-color: transparent;
			color: #f60;
			color: var(--detail-color); }

main > h2[id] a span:last-child, main > h3[id] a span:last-child, main > h4[id] a span:last-child, main > h5[id] a span:last-child, main > h6[id] a span:last-child
		{	clip: rect(0 0 0 0); 
			clip-path: inset(50%);
			height: 1px;
			overflow: hidden;
			position: absolute;
			white-space: nowrap; 
			width: 1px; }

@media (min-width: 50em) {
	main > h2[id] a, main > h3[id] a, main > h4[id] a, main > h5[id] a, main > h6[id] a
		{	right: auto;
			left: -1.5em; }
}

@media print {
	main > h2[id] a, main > h3[id] a, main > h4[id] a, main > h5[id] a, main > h6[id] a
		{	display: none; }
}

/* Windows High Contrast Mode styles */
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {

	main > h2[id] a:hover, main > h3[id] a:hover, main > h4[id] a:hover, main > h5[id] a:hover, main > h6[id] a:hover, main > h2[id] a:focus, main > h3[id] a:focus, main > h4[id] a:focus, main > h5[id] a:focus, main > h6[id] a:focus
		{	outline: .1em solid LinkText;
			outline-offset: .2em; }

}

/* END Heading Anchors */
/* ================================================================================================== */




/* ================================================================================================== */
/* Details / Summary */

details		{	border-radius: .2em;
			margin: 1em 0;
			padding: 0; }

details[open]	{	padding: 0 0 1em 0;
			box-shadow: 0 .05em .1em var(--detail-color); }

details > *	{	margin-left: 1em;
			margin-right: 1em; }

details summary	{	color: var(--detail-color);
			border: .1em dotted var(--detail-color);
			padding: 1em;
			border-radius: .2em;
			margin: 0; }

summary:focus, summary:hover
		{	outline: none;
			border-style: solid; }

details iframe	{	max-width: calc(100% - 2em); }

/* END Details / Summary */
/* ================================================================================================== */





/* ================================================================================================== */
/* Results Lists */

.results	{	list-style: none;
			padding-left: 1.75em; }

.results li	{	text-indent: -1.65em; }

.results li::before
		{	padding-right: .25em; }

.results li::before
		{	content: "\026AB "; }

.results li.bad::before
		{	content: "\0274c "; }

.results li.good::before
		{	content: "\02714\0fe0f "; }

.results li.ok::before
		{	content: "‽ ";
			font-weight: bold;
			padding-right: 0.5em;
			font-size: 125%;
			line-height: 0; }

/* END Results Lists */
/* ================================================================================================== */





/* ================================================================================================== */
/* Dark Mode */

@media screen and (prefers-color-scheme: dark) {

	#Unset kbd
		{	border-color: #999;
			box-shadow: 0.1em 0.1em 0.1em rgb(255 255 255 / 15%), 0 0.1em 0.1em rgb(255 255 255 / 15%), 0.1em 0 0.1em rgb(255 255 255 / 15%);
			background-color: #0a0a0a;
			background-image: linear-gradient(to bottom, #111, #222, #111);
			background-image: radial-gradient(circle farthest-side at bottom center, #222 30%, #111 70%);
			color: #fff; }

}

#Dark kbd	{	border-color: #999;
			box-shadow: 0.1em 0.1em 0.1em rgb(255 255 255 / 15%), 0 0.1em 0.1em rgb(255 255 255 / 15%), 0.1em 0 0.1em rgb(255 255 255 / 15%);
			background-color: #0a0a0a;
			background-image: linear-gradient(to bottom, #111, #222, #111);
			background-image: radial-gradient(circle farthest-side at bottom center, #222 30%, #111 70%);
			color: #fff; }

/* END Dark Mode */
/* ================================================================================================== */




/* ================================================================================================== */
/* Theme Toggles */

#ThemeLinks a
		{	display: inline-block; }

footer[role=contentinfo] button[aria-pressed], #ThemeLinks a
		{	background-repeat: no-repeat;
			background-size: 1.5em 1.5em;
			background-position: .25em center;
			padding: .5em .5em .5em 2em;
			margin: 0 0 0 .5em;
			color: #fff;
			background-color: transparent;
			font: inherit;
			border: .1em solid var(--detail-color);
			border-radius: .5em; }

footer[role=contentinfo] button[aria-pressed=true], #ThemeLinks a.true
		{	border-color: transparent; }

footer[role=contentinfo] button[aria-pressed]:focus, footer[role=contentinfo] button[aria-pressed]:hover, #ThemeLinks a.true:focus, #ThemeLinks a.true:hover
		{	box-shadow: 0.1em 0.1em 0 #fff, -0.1em -0.1em 0 #fff, 0.1em -0.1em 0 #fff, -0.1em 0.1em 0 #fff;
			color: #fff;
			outline: none; }

footer[role=contentinfo] button[aria-pressed]#ThemeUnset, #ThemeLinks a#ThemeLinkUnset
		{	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='17 -18 100 100'%3E%3Cpath d='M67-1.3c4.2 0 4.2 0 4.2-4.2v-8.3c0-4.2 0-4.2-4.2-4.2s-4.2 0-4.2 4.2v8.3c0 4.2 0 4.2 4.2 4.2zM37.6 8.4c2.9 2.9 2.9 2.9 5.8 0 3-2.9 3-2.9 0-5.9l-5.8-5.8c-3-3-3-3-5.9 0-2.9 2.9-2.9 2.9 0 5.8zM67 57a25 25 0 0024.1-31.6l-7.4 7.5-15.8 15.8-7.5 7.5c2.1.5 4.4.8 6.6.8zm-14.6-4.7l6.1-6A16.6 16.6 0 0150.3 32c0-9.2 7.5-16.7 16.7-16.7 6.1 0 11.4 3.3 14.3 8.2l6-6A24.95 24.95 0 0042 32c0 8.4 4.1 15.8 10.4 20.3zM21.2 36.2h8.3c4.2 0 4.2 0 4.2-4.2s0-4.2-4.2-4.2h-8.3c-4.2 0-4.2 0-4.2 4.2s0 4.2 4.2 4.2zm10.5 31.1c2.9 2.9 2.9 2.9 5.9 0l64.8-64.8c3-3 3-2.9 0-5.8-2.9-3-2.8-2.9-5.8 0L31.7 61.4c-3 3-2.9 3 0 5.9z' fill='%23fff'/%3E%3C/svg%3E"); }

footer[role=contentinfo] button[aria-pressed]#ThemeLight, #ThemeLinks a#ThemeLinkLight
		{	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='17 -18 100 100'%3E%3Cpath d='M43.4 55.6c-3-2.9-3-2.9-5.9 0l-5.9 5.9c-2.9 3-2.9 3 0 5.9s2.9 2.9 5.9 0l5.9-5.9c3-3 3-3 0-5.9zm59-59c-2.9-2.9-2.9-2.9-5.9 0l-5.9 5.9c-2.9 2.9-2.9 2.9 0 5.9 3 2.9 3 2.9 5.9 0l5.9-5.9c2.9-2.9 2.9-2.9 0-5.9zm-11.8 59c-2.9 3-2.9 3 0 5.9l5.9 5.9c3 2.9 3 2.9 5.9 0s2.9-2.9 0-5.9l-5.9-5.9c-3-3-3-3-5.9 0zm-59-59c-2.9 2.9-2.9 2.9 0 5.9l5.9 5.9c2.9 2.9 2.9 2.9 5.9 0 2.9-3 2.9-3 0-5.9l-5.9-5.9c-2.9-2.9-2.9-2.9-5.9 0zM67 65.3c-4.2 0-4.2 0-4.2 4.2v8.3c0 4.2 0 4.2 4.2 4.2s4.2 0 4.2-4.2v-8.3c0-4.2 0-4.2-4.2-4.2zM67-18c-4.2 0-4.2 0-4.2 4.2v8.3c0 4.2 0 4.2 4.2 4.2s4.2 0 4.2-4.2v-8.3c0-4.2 0-4.2-4.2-4.2zm33.3 50c0 4.2 0 4.2 4.2 4.2h8.3c4.2 0 4.2 0 4.2-4.2s0-4.2-4.2-4.2h-8.3c-4.2 0-4.2 0-4.2 4.2zM17 32c0 4.2 0 4.2 4.2 4.2h8.3c4.2 0 4.2 0 4.2-4.2s0-4.2-4.2-4.2h-8.3c-4.2 0-4.2 0-4.2 4.2zm50 16.7c-9.2 0-16.7-7.5-16.7-16.7S57.8 15.3 67 15.3 83.7 22.8 83.7 32 76.2 48.7 67 48.7zm0 8.3a25 25 0 000-50 25 25 0 000 50z' fill='%23fff'/%3E%3C/svg%3E"); }

footer[role=contentinfo] button[aria-pressed]#ThemeDark, #ThemeLinks a#ThemeLinkDark
		{	background-size: .75em .75em;
			background-position: .5em center;
			background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23fff'/%3E%3C/svg%3E"); }

/* Windows High Contrast Mode styles */
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {

	footer[role="contentinfo"] [role="group"]
		{	display: none; }

}

/* END Theme Toggles */
/* ================================================================================================== */




/* ================================================================================================== */
/* Home Page */

div.front 	{	margin: 2em auto; }

@media screen {

	div.front main h2
		{	margin: 2em 0 0 0;
			opacity: .5;
			line-height: 1.1;
			font-size: 220%; }

}

@media screen and (min-width:60em) {

	div.front main
		{	max-width: 60em;
			margin: 0 auto;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: auto;
			grid-template-areas:
				"Intro Intro Words"
				"Posts Posts Words"
				"Posts Posts Contr"
				"Posts Posts Contr"
				"Posts Posts Contr"
				"Posts Posts Contr"
				"Posts Posts Contr"
				"Posts Posts Contr"
				"Posts Posts Contr";
			gap: 2em 3em;
			place-items: start; }

	div.front main h2
		{	margin: 0; }

	div.front main #Posts ul + h2
		{	margin-top: 2em; }

}

div.front main p
		{	margin: 0; }

#Content	{	grid-area: Intro;
			line-height: 1.9;
			border: .1em solid var(--detail-color);
			box-shadow: 0 0 0.5em var(--detail-color);
			border-radius: .5em;
			padding: .5em 1em; }

@media screen and (min-width:60em) {

	#Content
		{	border-radius: 2em;
			padding: 2em 3em; }

}

#Posts		{	grid-area: Posts; }

#Posts br	{	display: none; }

#Posts ul	{	list-style-type: none;
			margin: 0 0 2em 0;
			padding: 0;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
			gap: 2em;
			align-items: start; }
  
#Posts li	{	display: grid;
			grid-template-columns: 1fr 2fr;
			gap: 1em;
			position: relative;
			margin: 0; }
  
#Posts li strong, #Posts li > a
		{	grid-column: 1 / span 2;
			font-size: 110%;
			line-height: 1.4; }
  
#Posts li span	{	font-size: 90%;
			grid-column: 2;
			grid-row: 2; }
  
#Posts li img	{	grid-column: 1;
			grid-row: 2; }
  
#Posts li a[href]::after
		{	content: "";
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0; }

@media print, (min-width:40em) and (max-width:59.99em) {

	#Words	{	display: grid; }

}

#Updated + ul li em:last-of-type
		{	display: block; }

#Words		{	grid-template-columns: 1fr 1fr 1fr;
			gap: 1em 2em;
			grid-area: Words; }

#Words h2	{	grid-column: 1 / span 2; }

#Words p	{	grid-row: 2; }

#Words p:nth-of-type(3n), #Words div:nth-of-type(3n)
		{	grid-column: 3; }
  
#Words p:nth-of-type(3n-1), #Words div:nth-of-type(3n-1)
		{	grid-column: 2; }
  
#Words p:nth-of-type(3n-2), #Words div:nth-of-type(3n-2)
		{	grid-column: 1; }

#Thumb		{	margin: 1em auto;
			max-width: 40%; }

.words_thumbs	{	width: 220px;
			margin: 1em auto;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr; }
  
#Words img	{	transform: rotate(-10deg);
			transition: all .1s ease-in-out;
			box-shadow: 0 0 0.25em #000; }
  
.words_thumbs :nth-child(1)
		{	grid-column: 1 / span 2;
			grid-row: 1 / span 2; }
  
.words_thumbs :nth-child(2)
		{	grid-column: 3 / span 2;
			grid-row: 1 / span 2; }
  
.words_thumbs :nth-child(3)
		{	grid-column: 5 / span 2;
			grid-row: 1 / span 2; }
  
.words_thumbs :nth-child(4)
		{	grid-column: 2 / span 2;
			grid-row: 2 / span 2; }
  
.words_thumbs :nth-child(5)
		{	grid-column: 4 / span 2;
			grid-row: 2 / span 2; }

#Contributions	{	grid-area: Contr; }

#Contributions ul
		{	list-style-type: none;
			margin: 0;
			padding: 0;
			line-height: 0; }

#Contributions li
		{	text-align: center; }

#Contributions li img
		{	padding: .5em;
			background-color: #eee;
			max-height: 3em;
			max-width: 9em; }

@media print, (max-width:60em) {

	#Contributions ul
		{	display: grid;
			grid-template-columns: repeat(auto-fill, minmax(25vw, 1fr));
			gap: 2vw; }

	#Contributions li a
		{	display: unset;	}

	#Contributions li img
		{	max-width: 100%;
			max-width: calc(100% - 1em); }

}

@media print {

	#Contributions ul
		{	grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
			gap: 2em; }

}

#Contributions a:focus img, #Contributions a:hover img
		{	outline-offset: .1em; }

#Contributions a.id24 img
		{	background-color:#ffe400; }

#Contributions a.ala img
		{	background-color:#ba3925 }

#Contributions a.evolt img
		{	background-color:#111; }

#Contributions a.w3c img
		{	padding: 0; }

/* END Home Page */
/* ================================================================================================== */