* {
	box-sizing: border-box;
	margin:0;
	padding:0;
}
@media not (prefers-reduced-motion: reduce) {
	/* TODO: Get this to work: https://css-tricks.com/toe-dipping-into-view-transitions/ */
	.blogpagetitle {view-transition-name: post-title;}
}
li {
	margin-left:1em;
}
p {
	margin-top:0.6em;
	margin-bottom:0.6em;
}
h2 {
	margin-top:1em;
}
:root {
	--sidebar-w:14em;
}
.sidebar_link {
	display:inline-block;
	margin-right:1em;
}
#sidebar {
	position:relative;
	width:100vw;
	min-height:var(--sidebar-w);
	text-align:center;
}
#content_container {
	position:relative;
	/*top:var(--sidebar-w);*/
	width:100vw;
	min-height:calc(100vh - var(--sidebar-w));
	background:light-dark(#ccc,#000);
}
#profileimg {
	width:10em;
	height:10em;
	border-radius:50%;
	object-fit:cover;
}
.header_block {
	display:block;
	margin-top:0.5em;
}
@media (orientation: landscape){
	#sidebar {
		position:fixed;
		left:0;
		top:0;
		width:var(--sidebar-w);
		height:100vh;
		overflow-y:scroll;
		
		/* TODO: Get position:sticky; working - see https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky */
	}
	#content_container {
		position:absolute;
		top:0;
		right:0;
		width:calc(100vw - var(--sidebar-w));
		min-height:100vh;
	}
	.sidebar_link {
		display:block;
		margin-right:0;
	}
	.header_block {
		margin-top:1em;
	}
}
@media (orientation: portrait){
	#profileimgcontainer {
		float:left;
	}
	#header_blogname {
		display:none;
	}
}
.content_entry {
	margin:20px;
	margin-bottom:40px;
}
#sidebar, .content_entry {
	background:light-dark(#fff,#1c1b22);
}
.content_preview {
	max-height:15em;
	overflow-y:hidden;
	color:#666;
}
a-a {
	color:#66b;
}
.content_preview img {
	opacity:0.5;
}
code {
	display:inline-block;
	white-space:pre-wrap;
	background:light-dark(#dde,#37373c);
	color:light-dark(#003,#aaf);
}
.multilinecode {
	display:block;
	max-height:19.7em;
	overflow-y:scroll;
	line-height:1em;
}
q, blockquote {
	font-style:italic;
	background:light-dark(#ddd,#282825);
}
blockquote {
	margin:1em;
	margin-left:2em;
	padding:1em;
	border-left:1px solid #554;
}
.marginnote {
	margin:1em;
	margin-left:2em;
	padding:1em;
}
.content_preview, .marginnote {
	background:light-dark(#eee,#223);
}
.blogpagetitle {
	font-size:3em;
	margin-top:20px;
	margin-bottom:20px;
	margin-left:20px;
}

figure {
	display:inline-block;
	width:fit-content;
	min-width:45%;
	max-width:100%;
	overflow-x:scroll;
}
figcaption {
	display: table-caption;
	caption-side: bottom;
	background:light-dark(#ddd,#444);
	font-style:italic;
	width:100%;
	margin-bottom:1em;
}
/* already done  figure > img {
	margin-bottom:0;
} */
.blogimg_small {
	width:auto;
	height:10em;
}
.blogimg_mediumsmall {
	width:auto;
	height:15em;
}
.blogimg_medium {
	width:auto;
	height:20em;
}
.blogimg_mediumheight {
	height:20em;
}
.blogimg_largeheight {
	height:30em;
}
.imgcontainer_2wide {
	/*display:grid;
	grid-template-columns:repeat(2, 1fr);*/
	display:flex;
	flex-wrap:wrap;
}
.imgcontainer_2wide > figure {
	flex-grow:1;
	flex-shrink:0;
	flex-basis:45%;
}
.maxwidth100pc {
	max-width:100%;
}
.width100pc {
	width:100%;
}

a {
	color:#38f;
}
a:visited {
	color:#00f;
}
a[href^=mailto] {
	height:1em;
}
/*a[href^=mailto]:hover::after, :where(h1,h2):hover + a[href^=mailto]::after {
	content:"Send me feedback about this section";
	color:#44f;
	font-style:italic;
}*/
.mailfeedbackinstruction {
	color:#fff;
}
a:hover > .mailfeedbackinstruction, :where(h1,h2):hover + a > .mailfeedbackinstruction {
	color:#00f;
}
:where(a[href^="http://"], a[href^="https://"]):hover::after {
	content:" (external link)";
	color:red;
	background:grey;
	position:absolute;
}

.hl1 {
	background:light-dark(#fcc,#600);
}
.hl2 {
	background:light-dark(#cfc,#060);
}
.hl3 {
	background:light-dark(#ccf,#006);
}











:root {
	--maxcontentw:calc(100vw - var(--sidebar-w) - 40px);
}
/* index.html */
.squaremenu {
	display:flex;
	flex-wrap:wrap;
	--squaresz:calc(var(--maxcontentw) * 0.333333);
}
.lessdarktheme {
	background:#333;
	color:white;
}
.squaremenu_entry {
	background:#333;
}
.squaremenu_entry:hover {
	background:#999;
	opacity:0.5;
}
.squaremenu_title {
	display:none;
	position:absolute;
	/*margin-left:calc(var(--squaresz) * -1);*/
	max-width:var(--squaresz);
	/*margin-top:calc(var(--squaresz) * 0.5 - 0.75em);*/
	font-size:calc(var(--squaresz) * 0.2);
	text-align:center;
	pointer-events:none;
}
.squaremenu_title_smallertext {
	font-size:calc(var(--squaresz) * 0.15);
}
.squaremenu_container:hover > .squaremenu_title {
	display:unset;
}
@media (orientation: landscape){
	#frontpagesquaremenu {
		--squaresz:calc(var(--maxcontentw) * 0.2);
	}
	.repo_container {
		max-width:1012px;
		margin-left:auto;
		margin-right:auto;
		--maxcontentw:1012px;
	}
}
.squaremenu_entry {
	width:var(--squaresz);
	height:var(--squaresz);
}
.squaremenu_container {
	display:flex;
	justify-content:center;
	align-items:center;
}


.content_entry:not(:has(figure)):not(:has(code)):not(:has(ul)) {
	container-type: inline-size;
	column-width: 30em;
}
h2,h3,h4,h5,h6,.content_preview {
	column-span:all;
}