:root {
	--darkbackground: rgb(56, 56, 56);
	color-scheme: light dark;
}

body {
	background-image: url("background.png");
	background-repeat: no-repeat;
	/*width: 98%;*/
	/* max-width: 850px; */
	max-width: 100ch;
	padding: 2ch;
	font-family: "Atkinson Hyperlegible","Trebuchet MS","Tahoma","Ubuntu","Verdana","Arial","Helvetica","sans-serif";
	text-rendering: optimizeLegibility;
	margin: auto;
	/* https://www.tumfatig.net/20110811/automatic-html-numbered-headings/ */
	counter-reset: H2;	/* if we want to number h2 headings */
	counter-reset: H3;	/* if we want to number h3 headings */
	counter-reset: H4;	/* if we want to number h4 headings */
}

body.nobackgroundimage {
	background-image: none;
}

@media (prefers-color-scheme: dark) {
body {
	background-image: none;
	background-color: var(--darkbackground);
	color: white;
}
}

.footer1 {
	background-image: none;
	border: 0;
	border-style: none;
	width: 100%;
	max-width: 90ch;
}

.postfooter {
	width: 100%;
	max-width: 90ch;
}

/* https://www.w3schools.com/cssref/css_colors.asp */
/* background from http://www.freestockphotos.biz/stockphoto/3034 */
/* https://www.w3schools.com/cssref/pr_background-image.asp */

.aquafadebody {
	background-image: url("background.png"), linear-gradient(white 0%, #ecffff 100%);
}

@media (prefers-color-scheme: dark) {
.aquafadebody {
	background-image: none;
	background-color: var(--darkbackground);
	color: white;
}
}

.yellowgreenfadebody {
	background-image: url("background.png"), linear-gradient(#FDFDF0 0%, #E8EFD0 100%);
}

@media (prefers-color-scheme: dark) {
.yellowgreenfadebody {
	background-image: none;
	background-color: var(--darkbackground);
	color: white;
}
}

.bluefadebody {
	background-image: url("background.png"), linear-gradient(white 0%, #eff6f6 100%);
}

@media (prefers-color-scheme: dark) {
.bluefadebody {
	background-image: none;
	background-color: var(--darkbackground);
	color: white;
}
}

.pinkfadebody {
	background-image: linear-gradient(lightpink 0%, #eff6f6 100%);
}

@media (prefers-color-scheme: dark) {
.pinkfadebody {
	background-image: none;
	background-color: var(--darkbackground);
	color: white;
}
}






@media (prefers-color-scheme: dark) {
input {
	background-color:var(--darkbackground);
	color: white;
}
}

@media (prefers-color-scheme: dark) {
button {
	background-color:var(--darkbackground);
	color: white;
}
}







a {
	min-height: 44px;	/* to satisfy mobile */
}

img {
	object-fit: contain;
}

img.startbig {
	float: right;
	height: 1rem;
	width: 1rem;
}

img.startsmall {
	float: right;
	height: 1rem;
	width: 1rem;
}

img.phishresultclose {
	float: right;
}

div.fromelsewhere {
	margin:auto;
	border-radius: 5px;
	border: 1px solid #4C3C1B;
	box-shadow: 2px 2px blue;
	padding: 3px 3px 3px 3px;
	background-color: #FFFFEE;
	width: 95%;
	max-width: 95%;
	font-family: "Atkinson Hyperlegible","Trebuchet MS",Tahoma,sans-serif;
}
@media (prefers-color-scheme: dark) {
div.fromelsewhere {
	background-image: none;
	background-color: var(--darkbackground);
	color: white;
	font-family: "Atkinson Hyperlegible","Trebuchet MS",Tahoma,sans-serif;
}
}

div.myexperience {
	margin-left:5%;
	border-radius: 5px;
	border: 1px solid #4C3C1B;
	box-shadow: 2px 2px gold;
	background-color: #f8ecf6;
	padding: 3px 3px 3px 3px;
	width: 95%;
	max-width: 95%;
}
@media (prefers-color-scheme: dark) {
div.myexperience {
	background-image: none;
	background-color: rgb(30, 30, 30);
	color: white;
}
}

div.phishresult {
	display: table;
	margin: 0 auto;
	border-radius: 5px;
	border: 2px solid #4C3C1B;
	background-color: #f8ec06;
	padding: 3px 3px 3px 3px;
	width: 95%;
	max-width: 95%;
	display: none;
}
@media (prefers-color-scheme: dark) {
div.phishresult {
	background-image: none;
	background-color: rgb(43, 78, 78);
	color: white;
}
}

div.phishbody {
	margin-left: auto;
	margin-right: auto;
	max-width: 600px;
	padding: 10px;
	border-style: solid;
	border-width: 2px;
	background-color: white;
	border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
div.phishbody {
	background-color: rgb(43, 78, 78);
	color: white;
}
}

div.section {
/* used https://testdrive-archive.azurewebsites.net/Graphics/CSSGradientBackgroundMaker/Default.html */
	background-image: linear-gradient(to bottom, white 0%, #eff6f6 100%);
	border: 1px outset lightblue;
	box-shadow: 2px 2px lightgreen;
	padding: 3px 3px 3px 3px;
	width: 98%;
	max-width: 98%;
	border-width: 2px;
}
@media (prefers-color-scheme: dark) {
div.section {
	background-image: none;
	background-color: rgb(83, 71, 78);
	color: white;
	border-width: 2px;
}
}

div.subsection1 {
/* used https://testdrive-archive.azurewebsites.net/Graphics/CSSGradientBackgroundMaker/Default.html */
	background-image: linear-gradient(to bottom, #EFFAEE 0%, #E8FAE7 100%);
	border: 1px ridge black;
	box-shadow: 2px 2px pink;
	padding: 3px 3px 3px 3px;
	width: 98%;
	max-width: 98%;
	font-family: "Atkinson Hyperlegible",Geneva,Tahoma,Helvetica,sans-serif;
	border-width: 2px;
}
@media (prefers-color-scheme: dark) {
div.subsection1 {
	background-image: none;
	background-color: rgb(42, 68, 87);
	color: white;
	font-family: "Atkinson Hyperlegible",Geneva,Tahoma,Helvetica,sans-serif;
	border-width: 2px;
}
}

div.subsection2 {
/* used https://testdrive-archive.azurewebsites.net/Graphics/CSSGradientBackgroundMaker/Default.html */
	background-image: linear-gradient(to bottom, white 0%, #eff6ff 100%);
	border: 1px solid #4C3C1B;
	box-shadow: 2px 2px orange;
	padding: 3px 3px 3px 3px;
	width: 95%;
	max-width: 95%;
	border-width: 2px;
}
@media (prefers-color-scheme: dark) {
div.subsection2 {
	background-image: none;
	background-color: rgb(24, 84, 92);
	color: white;
	border-width: 2px;
}
}

div.subsection3 {
/* used https://testdrive-archive.azurewebsites.net/Graphics/CSSGradientBackgroundMaker/Default.html */
	background-image: linear-gradient(to bottom, #D0FAE7 0%, #E6FAE7 100%);
	border: 1px ridge aquamarine;
	box-shadow: 2px 2px purple;
	padding: 3px 3px 3px 3px;
	width: 95%;
	max-width: 95%;
	border-width: 2px;
}
@media (prefers-color-scheme: dark) {
div.subsection3 {
	background-image: none;
	background-color: rgb(30, 68, 57);
	color: white;
	border-width: 2px;
}
}

div.aside {
	margin-left: 50px;
	margin-right: 50px;
	background-color: #E4FCFC;
	border-style: double;
	border-width: 3px;
	padding: 3px 3px 3px 3px;
	width: 95%;
	max-width: 95%;
	border-width: 2px;
}
@media (prefers-color-scheme: dark) {
div.aside {
	background-image: none;
	background-color: rgb(14, 59, 25);
	color: white;
	border-width: 2px;
}
}

div.logday {
	margin-top: 40px;
	background-attachment: scroll;
	padding: 13px 3px 13px 3px;
	font-weight: bold;
	font-size: larger;
	background-color:#C6F7F8;
}
@media (prefers-color-scheme: dark) {
div.logday {
	background-image: none;
	background-color: grey;
	color: white;
}
}


.cli {
	font-family: Consolas,Monaco,monospace;
	color:white;
	background:#454545;
	/*white-space: pre-wrap;    wrap text inside the box */
	margin-top: 3px;
	margin-bottom: 3px;
	padding-left: 6px;
	overflow: auto;
}

.code {
	font-family: Consolas,Monaco,monospace;
	color:black;
	background:lightgrey;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-left: 6px;
	overflow: auto;
}
@media (prefers-color-scheme: dark) {
.code {
	font-family: Consolas,Monaco,monospace;
	background-color:grey;
	color: white;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-left: 6px;
	overflow: auto;
}
}
.wrap {
	white-space: pre-wrap;
}


.http {
	font-family: Consolas,Monaco,monospace;
	color:black;
	background:lightpink;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-left: 6px;
	overflow: auto;
}






.redborder {
	border-style: solid;
	border-width: 3px;
	border-color: red;
	border-radius: 5px;
}

.greenborder {
	border-style: solid;
	border-width: 3px;
	border-color: green;
	border-radius: 5px;
}

.blueborder {
	border-style: solid;
	border-width: 3px;
	border-color: blue;
	border-radius: 5px;
}

.protocolstack {
	font-family: Consolas,Monaco,monospace;
	font-size: 75%;
	text-align: center;
	color: green;
}


.log {
	font-family: "Atkinson Hyperlegible","Trebuchet MS","Tahoma","Ubuntu","Verdana","Arial","Helvetica","sans-serif";
	color: white;
	background: black;
}




div.center {
	display: table;
	margin: 0 auto;
}

div.centerthinborderyellow {
	display: table;
	margin: 0 auto;
	border-style: solid;
	border-width: 1px;
	border-radius: 28px;
	background-color:lightgoldenrodyellow;
	padding: 12px 12px 12px 12px;
}


div.tilecontainer {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

div.tileitem {
	width: 150px;
	padding: 10px;
	text-align: center;
}

div.bigtileitem {
	padding: 10px;
	text-align: center;
}

@media screen and (max-width: 768px) {
	div.tilecontainer {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 480px) {
	div.tilecontainer {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 300px) {
	div.tilecontainer {
		grid-template-columns: 1fr;
	}
}


div.searchinput {
	float: left;
	width: 400px;
}

div.center {
	/*display:center;*/
	/*float:center;*/
	padding: 8px 8px 8px 8px;
}

div.diary {
	/*display:center;*/
	margin: 0 auto;
	border: 0;
	border-style: none;
	font-family: Consolas,Monaco,monospace;
	font-weight: 500;	/* 400 == normal */
}

div.pagetoptitle20 {
	display: inline;
	float:left;
	width:20%;
}
div.pagetopimage20 {
	display: inline;
	float:left;
	width:20%;
}
div.pagetoptitleandimage20 {
	display: inline;
	float:left;
	/*display: grid;*/
	/*place-content: center;*/
	width:20%;
}
div.pagetoptitleandimage40 {
	display: inline;
	float:left;
	width:40%;
}
div.pagetoptitleandimage60 {
	display: inline;
	float:left;
	width:60%;
}
div.pagetopsections60 {
	background-color:lightgoldenrodyellow;
	float:left;
	display: inline;
	width:60%;
}
div.pagetopsections80 {
	background-color:lightgoldenrodyellow;
	float:left;
	display: inline;
	width:80%;
}
@media (prefers-color-scheme: dark) {
div.pagetopsections60 {
	background-image: none;
	background-color: rgb(90, 90, 90);
	color: white;
	float:left;
	display: inline;
	width:60%;
}
}
div.pagetopsections40 {
	background-color:lightgoldenrodyellow;
	float:left;
	display: inline;
	width:40%;
}
@media (prefers-color-scheme: dark) {
div.pagetopsections40 {
	background-image: none;
	background-color: rgb(90, 90, 90);
	color: white;
	float:left;
	display: inline;
	width:40%;
}
}

h1.pagetitle {
	font-size:larger;
	font-weight:bold;
}

div.pagesectionlinks {
	background-color:lightgoldenrodyellow;
}
@media (prefers-color-scheme: dark) {
div.pagesectionlinks {
	background-color: rgb(90, 90, 90);
	color: white;
}
}

img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
}

img.center90mw {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 90px;
}

img.center175h275wnone {
	display: none;
	margin-left: auto;
	margin-right: auto;
	height: 175px;
	width: 275px;
}

button.b40h120w {
	height: 40px;
	width: 120px;
}

span.center {
	display: table;
	margin: 0 auto;
}

.red {
	color: red;
}

.centerfont200 {
	font-size: 200%;
	display: table;
	margin: 0 auto;
}

.font150 {
	font-size: 150%;
}

.centerfont60 {
	font-size: 60%;
	display: table;
	margin: 0 auto;
}

table.border0cellpadding12center {
	border: 0;
	border-style: none;
	display: table;
	margin: 0 auto;
}

table.border0cellpadding12center td {
	padding: 12px 12px 12px 12px;
}

table.border0cellpadding0center {
	border: 0;
	border-style: none;
	display: table;
	margin: 0 auto;
}

table.border0cellpadding0center td {
	border: 0;
	border-style: none;
	padding: 0px 0px 0px 0px;
}

table.border0cellpadding0spacing0 td {
	border: 0;
	border-style: none;
	padding: 0px 0px 0px 0px;
	border-spacing: 0;
}

table.border1 {
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
}

table.border1 td {
	border-style: solid;
	border-width: 1px;
}

table.border1center {
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
	display: table;
	margin: 0 auto;
}

table.border1center td {
	border-style: solid;
	border-width: 1px;
}

table.border1cellpadding3center {
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
	display: table;
	margin: 0 auto;
}

table.border1cellpadding3center td {
	border-style: solid;
	border-width: 1px;
	padding: 3px 3px 3px 3px;
}


table.border1c0cellpadding3center {
	border-style: solid;
	border-width: 1px;
	display: table;
	margin: 0 auto;
}

table.border1c0cellpadding3center td {
	border-style: none;
	padding: 3px 3px 3px 3px;
}

td.boldcenterpadding3 {
	display: table;
	text-align: center;
	font-weight: bold;
	padding: 3px 3px 3px 3px;
}

.floatleft {
	float: left;
}

.border1 {
	border-style: solid;
	border-width: 1px;
}

.border4 {
	border-style: solid;
	border-width: 4px;
}






input.how {
	background-color:lightgreen;
	border-radius: 28px;
}

input.expandall {
	background-color:lightgreen;
	border-radius: 28px;
}
@media (prefers-color-scheme: dark) {
input.expandall {
	background-color: rgb(100, 100, 100);
	color: white;
}
}

input.search {
	background-color:lightgreen;
	border-radius: 28px;
}
@media (prefers-color-scheme: dark) {
input.search {
	background-color: rgb(100, 100, 100);
	color: white;
}
}

button.share {
	background-color:lightgreen;
	border-radius: 28px;
}
@media (prefers-color-scheme: dark) {
button.share {
	background-color: rgb(100, 100, 100);
	color: white;
}
}


span.emphasize {
	font-size: 150%;
	font-weight: bold;
}

h2 {
	background-color: lightblue;
	counter-reset: H3;	/* if we want to number h3 headings */
}
@media (prefers-color-scheme: dark) {
h2 {
	background-color: rgb(18, 20, 32);
	color: white;
}
}
h2.numbered:before {
  content: counter(H2) ". "; 	/* Print the number */
  counter-increment: H2; 		/* Add 1 */
}

.hidden {
  display: none;
}

/* Sometimes want an h2 to look h3, but have browser and SEO treat as h2 */
/* Usually used for terms / definitions / TL;DR before first real h2 */
h2.small {
	font-weight: bold;
	font-size: large;
	/* eliminate extra line after heading: */
	padding: 0px;
    margin: 0px;
	background-color: white;
}
@media (prefers-color-scheme: dark) {
h2.small {
	background-color: rgb(18, 20, 32);
}
}

h3 {
	font-weight: bold;
	font-size: large;
	/* eliminate extra line after heading: */
	padding: 0px;
    margin: 0px;
	counter-reset: H4;	/* if we want to number h4 headings */
}
@media (prefers-color-scheme: dark) {
h3 {
	background-color: rgb(18, 20, 32);
	color: white;
}
}
h3.numbered:before {
  content: counter(H3) ". "; 	/* Print the number */
  counter-increment: H3; 		/* Add 1 */
}

h4 {
	font-weight: bold;
	font-size: large;
	/* eliminate extra line after heading: */
	padding: 0px;
    margin: 0px;
}
@media (prefers-color-scheme: dark) {
h4 {
	background-color: rgb(18, 20, 32);
	color: white;
}
}
h4.numbered:before {
  content: counter(H4) ". "; 	/* Print the number */
  counter-increment: H4; 		/* Add 1 */
}

h5 {
	font-weight: bold;
	font-size: large;
	/* eliminate extra line after heading: */
	padding: 0px;
    margin: 0px;
}
@media (prefers-color-scheme: dark) {
h5 {
	background-color: rgb(18, 20, 32);
	color: white;
}
}


/*
	https://www.w3schools.com/cssref/css_colors.asp
	BlueViolet
*/

/* tricky: sometimes nested lists result in changing list
	type from ul to ol or vice-versa !  Interior list
	inherits style-type from parent list, unless you
	specify class name.
*/

ul.ulfirst {
	list-style-type: circle;
	list-style-image: url('bluelistmarker.png');
}

ul.ulsecond {
	list-style-type: circle;
	list-style-image: url('greenlistmarker.jpeg');
}

ul.ulthird {
	list-style-type: circle;
	list-style-image: url('yellowlistmarker.png');
}

ol.olfirst {
/*	display: list-item;  */
	list-style-type: decimal;
	list-style-image: none;
}

ol.olsecond {
/*	display: list-item;  */
	list-style-type: lower-alpha;
	list-style-image: none;
}

ol.olloweralpha {
/*	display: list-item;  */
	list-style-type: lower-alpha;
	list-style-image: none;
}

ol.oldecimal {
/*	display: list-item;  */
	list-style-type: decimal;
	list-style-image: none;
}






/* a link, in superscript style */

a.tinylink {
	font-family: Consolas,Monaco,monospace;
	font-size: x-small;
	vertical-align: super;
}






/* a permalink point, in normal text or in a header; NOT USED */

a.permalink {
	font-family: Consolas,Monaco,monospace;
	font-size: x-small;
	vertical-align: super;
	float: right;
}





/* adapted from https://www.w3schools.com/howto/howto_css_breadcrumbs.asp */

/* Style the list */
ul.breadcrumb {
	list-style: none;
/*	background-color: pink;  */
}

/* Display list items side by side */
ul.breadcrumb li {
	display: inline;
}

/* Add a symbol before/behind each list item */
ul.breadcrumb li+li:before {
/*  content: "/\00a0"; */
	content: "\003e\00a0";
}






/* adapted from https://www.w3schools.com/howto/howto_js_navbar_sticky.asp */

/* Style the navbar */
div.navbar {
	overflow: hidden;
/*	background-color: #333;  */
}

@media (prefers-color-scheme: dark) {
div.navbar {
	background-image: none;
	background-color: rgb(90, 90, 90);
	color: white;
}
}

/* Navbar links */
a.navbar {
	float: left;
	display: block;
/*	color: #f2f2f2;  */
	text-align: center;
	padding: 14px;
	text-decoration: none;
}

.navstyle {
	background-color:lightgoldenrodyellow;
}
@media (prefers-color-scheme: dark) {
.navstyle {
	background-color: rgb(90, 90, 90);
	color: white;
}
}

.navlink {
	background-color:lightgoldenrodyellow;
	display: block;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 14px;
	padding-right: 14px;
}
@media (prefers-color-scheme: dark) {
.navlink {
	background-color: rgb(90, 90, 90);
	color: white;
}
}

.navarea {
	background-color:lightgoldenrodyellow;
	max-width: 600px;
	margin-left:auto;
	margin-right:auto;
}
@media (prefers-color-scheme: dark) {
.navarea {
	background-image: none;
	background-color: rgb(90, 90, 90);
	color: white;
}
}







/* photo gallery pages */
/* https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/ */
/* lazy loading with https://github.com/ApoorvSaxena/lozad.js */

body.singlepicbody {
	background-image: none;
}

div.photofull {
	display: none;
}

img.photofull {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-height: 95vh;
	max-width: 100vw;
}

div.photothumbnails {
	display: initial;
}



/*
https://www.paritybit.ca/blog/styling-external-links.html
a[href^="http"]:where(:not([href*="billdietrich.me/"]))::after{
    content: "︎↗"
}
a::after{
    content: "" !important
}
*/


/* catch-alls */

@media (prefers-color-scheme: dark) {
img {
	filter: brightness(0.8) contrast(1.2);
}
a:link {
	color: rgb(138, 180, 248);
}
a:visited {
	color: rgb(138, 150, 248);
}
}

@media print {
body {
	background-image: none;
	background-color: transparent;
}
div {
	background-image: none;
	background-color: transparent;
}
input {
	background-color: transparent;
}
}







/* following https://www.youtube.com/watch?v=WJZ-Tr9p8SM&list=PLwoh6bBAszPrES-EOajos_E9gvRbL27wz&index=20 */

.row {
	width: 96%;
	max-width: 850px;
	display: flex;
}

.row::after {
	display: block;
	clear: both;
	content: "";
}

/* divide row into 12ths; max 100% is 850px */
.col-1 { width: 8% ; max-width: 70px; }
.col-2 { width: 16% ; max-width: 140px; }
.col-3 { width: 24% ; max-width: 210px; }
.col-4 { width: 32% ; max-width: 280px; }
.col-5 { width: 40% ; max-width: 350px; }
.col-6 { width: 48% ; max-width: 420px; }
.col-7 { width: 56% ; max-width: 490px; }
.col-8 { width: 64% ; max-width: 560px; }
.col-9 { width: 72% ; max-width: 630px; }
.col-10 { width: 80% ; max-width: 700px; }
.col-11 { width: 88% ; max-width: 770px; }
.col-12 { width: 96% ; max-width: 840px; }

* {
	box-sizing: border-box;
}

/*
[class*="col-"] {
	float: center;
}
*/