:root{
	--font-preferences: sans-serif, 'Roboto', Arial, 'Noto Color Emoji';
    --heading-color:black;

    --text-color:black;
    --text-color-dark:white;

    --page-background-color:white;
    --page-background-color-dark:#111;

    --dev-branch-background-color:yellow;
    --dev-branch-text-color:black;

}html, body{
	background:var(--page-background-color); 
	margin:0;
	padding:0;
	text-align:center;
}
@media(prefers-color-scheme: dark) {
	body {
		background:var(--page-background-color-dark); 
	}
}
body, button{
	font-family: var(--font-preferences);
}
@font-face {
	font-family: 'Noto Color Emoji';
	src: url("/fonts/NotoColorEmoji-Regular.ttf");
}
.content-container{
	height:auto;
	min-height:500px;
}
html, body{
	scroll-padding-top: 160px;
	scroll-behavior: smooth;
}
div.main-container h1, div.main-container h2, div.main-container h3, div.main-container h4, div.main-container h5, div.main-container h6, div.main-container p, div.main-container b, div.main-container span, div.main-container td, div.main-container th, div.main-container li, div.main-container figcaption{
	color:var(--text-color);
	text-decoration: none;
}
@media(prefers-color-scheme:dark){
	div.main-container h1, div.main-container h2, div.main-container h3, div.main-container h4, div.main-container h5, div.main-container h6, div.main-container p, div.main-container b, div.main-container span, div.main-container td, div.main-container th, div.main-container li, div.main-container figcaption{
		color:var(--text-color-dark);
	}
}
pre{
	width:100%;
	overflow:hidden;
}
pre:hover{
	overflow:scroll;
}
iframe{
	border-radius:10px;
}/*pageheader-light | Page header, parent style of the header  */
header.header {
	z-index:1;
	top:0;
	display: grid;
	grid-template-rows: fit-content(100%) fit-content(100%) fit-content(100%);
	row-gap:1px;
	position: sticky;
	width:100%;
	align-items: center;
	background-color: #ffffff;
	color: black;
	min-height:80px;
	border-radius:0px 0px 10px 10px;
}
div.header-main-grid-container{
	display:grid;
	width:100%;
	grid-template-columns: fit-content(100%) auto;
	margin-top:auto;
	margin-bottom:auto;
	padding-top:5px;
	padding-bottom:5px;
}
div.header-grid-container .brand-title{
	margin-left:5px;
	margin-right:5px;
	margin-top:auto;
	place-self: start;
}
div.header-psa-grid-container {
	background-color:var(--psa-bg-color, yellow);
}
div.header-psa-grid-item{
	padding-top:5px;
	padding-bottom:5px;
	border-bottom:2px solid black;
}
div.header-psa-grid-item img{
	max-width:20px;
	display: inline;
}
div.header-psa-onetime{
	display: none;
}
button.header-psa-onetime-close-button{
	border: 1.5px solid black;
	border-radius: 5px;
	font-weight:bolder;
}
div.headerPsaOneTimeEntryActive{
	display:block;
}
.sectionheader{
	width:100%;
	height:40px;
	background-color:#ffffff;
	text-align:left;
	font-size:25px;
	text-indent:15px;
}
.sectionheader *{
	margin-top:4px;
}
.sectionheader b{
	color:black;
}
.sectionheader a{
	text-decoration:none;
}
.sectionheader img{
	padding-right:5px;
}

img.sitelogo {max-width:120px; max-height:65px;}
nav.header-links {
	margin-top:auto;
	margin-bottom:auto;
	background-color: unset;
	overflow-x: scroll;
}
nav.header-links ul {
	display: flex;
	margin:0;
	padding:0;
}
nav.header-links ul li {
	text-align: center;
	background-color:#fff;
	list-style:none;
}
nav.header-links li a {
	display: block;
	text-decoration: none;
	color: black;
	padding: 1rem;
}
nav.header-links li a:hover {
	background-color: #ddd;
	border-radius:10px;
}
.dropdown, .dropbtn{
	position: flex;
	display: inline-block;
	text-decoration:none;
	color:black;
  }
.dropdown-content {
	display: none;
	min-width: 160px;
	background-color: #fff;
	z-index: 1;
  }
.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	border-radius:unset;
}  
nav.header-links .dropdown:hover .dropdown-content{display: block;}
nav.header-links .dropdown-content {
	position: absolute;
	background-color: #ffffff;
	z-index: 1;
}
.header-links-toggle-button {
	float:right;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 21px;
	justify-self: end;
	margin-top:auto;
	margin-bottom:auto;
	margin-right:15px;
}
.header-links-toggle-button .bar {
	height: 3px;
	width: 100%;
	background-color: blue;
	border-radius: 10px;
}

@media (max-width: 800px) {
	header.header {
		flex-direction: column;
		align-items: flex-start;
	}
	div.brand-title{
		grid-area: hm-BT;
	}
	a.header-links-toggle-button{
		grid-area: hm-LTB;
	}
	nav.header-links{
		grid-area: hm-L;
	}
	div.header-main-grid-container{
		grid-template-areas:
		"hm-BT hm-LTB hm-LTB hm-LTB"
		"hm-L hm-L hm-L hm-L";
	}
	.header-links-toggle-button {
		display: flex;

	}
	nav.header-links {

		max-height:0px;
		overflow-y:scroll;
		transition:	max-height .5s cubic-bezier(0,1,.5,1);
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		width:100%;
	}
	nav.header-links.active {
		max-height:45vh;
		transition:	max-height 1s cubic-bezier(0,.75,.5,1);
		display:flex;
	}
	nav.header-links ul {
		width: 100%;
		flex-direction: column;
	}
	nav.header-links ul li {
		text-align: center;
		width: 100%;
	}
	nav.header-links ul li a {
		padding: 25px;
		width: 85vw;
		margin:auto;
	}
	nav.header-links ul li div.dropdown div.dropdown-content{
		position:relative;
	}
	nav.header-links ul li div.dropdown a.dropbtn{
		width:85vw;
	}

}
div.psa{
	font-size:100%;
	z-index:1;
	position:fixed;
	border-bottom:3px solid red;
	width:100%; 
	top:0px; 
	text-align:center;
	word-wrap: break-word;
}
div.psa * {margin-top:-10px;}
div.psa-height-00{height:0px;}
div.psa-height-20{height:20px;}
div.psa-height-40{height:40px;}
div.psa img{
	max-height:18px;
	padding:1px;
	display:inline-block;
}
@media(prefers-color-scheme: dark) {
    	/*pageheader-dark | Page header style*/
	header.header {
		background-color: #333;
		color: black;
	}	
	.sectionheader{
		background-color:#333;
	}
	.sectionheader b{
		color:white;
	}
	nav.header-links li a {
		background-color:#333;
		color:#fff;
	}
	nav.header-links ul li {
	text-align: center;
	background-color:#333;
	}
	nav.header-links li a:hover {
		background-color: #888;
	}
	.dropdown, .dropbtn{
		position: flex;
		display: inline-block;
		text-decoration:none;
		color:black;
	  }
	header.header .dropdown-content {
		display: none;
		background-color: #555
	  }
	.dropdown-content a {
		color: black;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
	}  
	nav.header-links .dropdown:hover .dropdown-content{display: block;}
	nav.header-links .dropdown-content {
		background-color: #555;
	}
	.header-links-toggle-button .bar {
		background-color: #fff;
		border-radius: 10px;
	}
	@media (max-width: 800px) {
		header.header {
			flex-direction: column;
			align-items: flex-start;
			}
		.header-links-toggle-button {
			display: flex;
			}
		nav.header-links ul li {
			text-align: center;
		}
	}   
}
@media(min-width:800px){
	nav.header-links ul li{background-color:transparent;}
}a{
   overflow-wrap: anywhere;
}
a.footnote-ref:before {
    content: "[";
}
a.footnote-ref:after {
    content: "]";
}a.button {
	display:inline-block;
	background-color:#32373C;
	color:white;
    padding: 8px 20px;
	margin:5px;
    text-decoration:none;
    font-weight:bold;
    border-radius:5px;
    cursor:pointer;
	border-radius:25px;
	border:2px solid black;
}
a.button-green {
	background: rgb(11,217,45);
}

@media (prefers-color-scheme:dark){
    a.button {
		background-color:#32373C;
		color:white;
		border-radius:5px;
		cursor:pointer;
		border-radius:25px;
		border:2px solid white;
	}
    a.button-green {
		background-color: rgb(52,153,69);
	}
}#errormessage { background:white; border-radius:10px !important; border:5px solid black;max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
.errormessage-404 {box-shadow:0px 0px 20px orange !important; border:5px solid orange !important;}
.errormessage-jsblocked {box-shadow:0px 0px 20px red !important; border:5px solid red !important;}
#errormessage h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
#errormessage h2 { color: red; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#errormessage h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#errormessage p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; border-radius:10px;}
#errormessage a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#errormessage, #errormessage a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }div.infopage{
    box-shadow:0px 0px 10px black;
    border-radius:10px;
    margin-left:auto;
    margin-right:auto;
    margin-top:15px;
    min-height:200px;
    width:80%;
    padding-top:5px;
}
@media(min-width:800px){
    div.infopage{
        max-width:800px;
    }
}
div.infopage-profile img{
    width:150px;
    background-color:white;
    aspect-ratio: 1/1;  
    object-fit: contain;
    padding:0;
    border-radius: 100%;
    border:10px black solid;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:auto;
    margin-right:auto;
    display:block;
}
button.collapsible-infopage{
    border-radius:25px;
    padding:5px !important;
    width:75%;
    max-width:600px;
    min-width:1px;
    border:3px solid black;
    background-color:#32373C;
    padding:5px;
    margin-left:auto;
    margin-right:auto;
    font-weight:bold;
    font-size:16px;
    display:inline-block;
    text-align:center;
}
@media(prefers-color-scheme: dark){
    button.collapsible-infopage{
        background-color:#32373C;
        border:2px solid white;
    }
}
a.button-infopage{
    max-width:550px;
    width:75%;
    margin:1px;
    min-width:1px;
    margin-left:auto;
    margin-right:auto;
    font-size:20px;
}
div.infopage-link-icon-container{
    float: left;
    width: 5%;
    min-height:20px;
}
div.infopage-link-name-container{
    float: left;
    width: 90%;
}
a.button-infopage:link{
    color:white;
}
a.button-infopage:visited{
    color:white;
}
button.collapsible.collapsible-infopage{
	margin-top:2.5px; margin-bottom:2.5px;
}
div.collapsible-content-infopage{
    padding: 0px 0px !important;
}div.main-container, div.footer-content-container{
    max-width:1500px;
    margin:auto;
}article.article-content div.pagetitle img.cover-image{
    height:300px;
    width:98%; 
    object-fit:cover;      border-radius: 10px;

}
@media (min-width:1000px){
    article.article-content div.pagetitle img.cover-image{
        max-width:1000px;
        object-fit:cover;   
    }
}
article.article-content div.pagetitle h1{
    word-wrap: break-word;
}
article.article-content div.pagetitle {
    border-bottom:2px solid white;
    padding-bottom: 10px;
}
/*pagecontent-page-post | Post Default Style*/
.page-post{
	text-align:left;
	padding-left:10px;
	padding-right:10px;
	box-shadow:0px 0px 10px black;
    border-radius:10px;
	margin-left:auto;
	margin-right:auto;
    margin-bottom:10px;
	width:95%;
	margin-top:10px;
	padding-top:3.5px!important;
	min-height:300px;
	max-width:1000px;
	height:auto;
}
@media(max-width:390px){
    .page-post{
        width:90%;
    }
}
.page-post p {
    text-indent: 30px;
}
.page-post h1, .page-post h2, .page-post h3, .page-post h4, .page-post h5, .page-post h6{
    margin-left:5px;
    margin-right:5px;
}
.page-post figcaption {
	text-align:center;
}
.list-no-bullets li {
	list-style: none;
}
.list-align-left li {
	text-align: left;
}
.text-align-left {
	text-align: left;
}
.column-width-150px{
	max-width:150px;
}

div.pagecontribute{
    box-shadow:0px 0px 10px black;
    border-radius:10px;
    max-width:1000px;
    width:95%;
    padding-top:15px;
    padding-bottom:15px;
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
    
}
article.list-style{
    border:3px solid black;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:auto;
    margin-right:auto;
    border-radius:4px;
}
@media(max-width:650px) {
    article.list-style{ height:100%; width:80%;}
    article.list-style div.article-cover img{
        height:100%;width:100%;
        object-fit:cover;
        border-right:2.5px solid black;
        border-bottom:2.5px solid black;
    }
    article.list-style div.article-data{
      padding-bottom:10px;
    }
}

@media(min-width:870px){
  article.list-style{ height:200px; width:600px;}
  article.list-style div.article-cover{
    float:left;
  }
  article.list-style div.article-cover img{
    height:157.5px;width:247.5px;
    object-fit:cover;
    border-right:2.5px solid black;
    border-bottom:2.5px solid black;
  }
  article.list-style div.article-title {
    text-align:left; float:right;
  }
  article.list-style div.article-title h1 {
    width:345px;
    word-wrap: break-word;
  }
  article.list-style div.article-data{
    clear:both;  
    text-align:left; 
    border:none;
  }
}
@media all and (min-width:650px) and (max-width:869px){
  article.list-style{ height:200px; width:550px;}
  article.list-style div.article-cover{
    float:left;
  }
  article.list-style div.article-cover img{
    height:157.5px;width:247.5px;
    object-fit:cover;
    border-right:2.5px solid black;
    border-bottom:2.5px solid black;
  }
  article.list-style div.article-title {
    text-align:left; float:right;
  }
  article.list-style div.article-title h1 {
    width:295px;
    word-wrap: break-word;
  }
  article.list-style div.article-data{
    clear:both;  
    text-align:left; 
    border:none;
  }
}

span.list-style-authors{
  padding-left:2.5px;
  padding-right:2.5px;
  border:0.25px black solid;
  border-radius:6.5px;
}article.box-style div.pagetitle-design{
	color:black;
	background-color:gray;
	border-radius:10px;
	border:5px solid black;
}

@media (prefers-color-scheme: dark) {
    article.box-style div.pagetitle-design{
		color:white;
		background-color:#333;
	}
}
@media(min-width:800px) {
		article.box-style { margin-left:15%;margin-right:15%;}}
@media(max-width:800px) {
		article.box-style { margin-left:5%;margin-right:5%;}}
@media(max-width:500px) {
		article.box-style {margin-left:0%;margin-right:0%;}}
div.tag-snippet{
    border:2px solid black;
    padding:5px;
    width:auto;
    display:inline-block;
    border-radius:15px;
    background-color:white;
}
div.tag-snippet b{
    color:black;
}
@media(prefers-color-scheme: dark){
    div.tag-snippet{
        background-color:#333;
    }
    div.tag-snippet b{
        color:white;
    }
}div#pagecomments{
    max-width:1000px;
    margin-top: 30px;
    margin-bottom:30px;
    margin-left:auto;
    margin-right:auto;
    width:95%;
    height:inherit;
    border-radius:10px;
    box-shadow:0px 0px 10px black;
    border-radius:10px;
	padding-left:10px;
	padding-right:10px;
}
@media(max-width:390px){
    div#pagecomments{
        width:90%;
    }
}
#disqus_thread p {
    color: black;
}
@media(prefers-color-scheme:dark){
    div#pagecomments{background-color: rgba(0, 0 , 0, 0.85); color:white;}
    #disqus_thread p {
        color: white !important;
    }
}
/*pagecontent-light-collapsablecontent | collapsable content for lists */
.collapsible {
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
  	padding:5px;
  	margin-left:auto;
  	margin-right:auto;
  	background-color: #888;
  	color: white;
  	cursor:pointer;
	width:50%;
  	padding:27px;
	border:10px;
  	text-align: left;
  	outline: none;
}
.collapsible-notbig{
	padding-left:5px;
	padding-right:5px;
	padding:2.5px;
} 
.collapsible-fullwidth{
	width:100%;
}
@media(min-width:600px){
	.collapsible-fullwidth{
		width:75%;
	}
}
@media(min-width:900px){
	.collapsible-fullwidth{
		width:50%;
	}
}
.active, .collapsible:hover {
  	background-color: #666;
}
div.collapsible-content{
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.45s ease-in-out;
	background-color: none;
	display:none;
}figure.author-info-snippet{
    border:2px black solid;
    border-radius:10px;
    max-width:1000px;
    width:75%;
    height:inherit;
    margin-left:auto;
    margin-right:auto;
}/*pagecontent-light-border | Border Default Style */
div.border{
	border-top: 2px solid gray;
	border-bottom: 2px solid gray;
}
@media (prefers-color-scheme: dark){
    div.border{
		border-top: 2px solid lightgray;
		border-bottom: 2px solid lightgray;
	}
}/*pagecontent-both-column | Column Style */
.row {
	display: flex;
  }
  .column {
	flex: 50%;
	margin-top:auto;
	margin-bottom:auto;
	padding:15px;
}
@media (max-width: 600px) {
	.row {
		display: block;
	}
}div.padding{
	padding-top:100px;
	padding-bottom:100px;
	padding-left:50px;
	padding-right:50px;
}
@media(max-width:500px){
	div.padding{
		padding-left:25px;
		padding-right:25px;
	}
}
@media(max-width:350px){
	div.padding{
		padding-left:15px;
		padding-right:15px;
	}
}
@media(max-width:300px){
	div.padding{
		padding-left:0px;
		padding-right:0px;
	}
}

div.padding-bottom{
	padding-bottom:100px;
}
div.pagetitle{
	padding-top:50px;
}
div.page-post{padding-top:10px;padding-bottom:10px;}
/*pagecontent-both-table | Table Default Style */
table, tr, th, td {
	border: 2.5px solid black;
	border-radius:10px;
	border-collapse: collapse;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	padding:5px;
}div#pagecontent img:not(.style-exclude){width:90%; padding-top:25px; padding-bottom:25px}
@media (min-width: 800px) {
	div#pagecontent img:not(.style-exclude){ display:inline-flex; width:45%!important; }
}div#pagecontent table{margin-top:15px; margin-bottom:15px; border-collapse:collapse;}
table.no-table-border, .no-table-border td, .no-table-border th {
	border-style: none;
}div#pagecontent li{text-align:left; margin-left:auto; margin-right:auto;}
div#pagecontent ol{display:inline-block; text-align:center;}div.marquee{
	position:static;
	display:block;
	-moz-transform: translateX(100%);
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	-moz-animation: scroll-left 20s linear infinite;
	-webkit-animation: scroll-left 20s linear infinite;
	animation: scroll-left 20s linear infinite;
}footer#pagefooter{
	background-color: #222; 
	margin-bottom:-20px; 
	padding:20px; 
	color:white;
	word-wrap: break-word;
}
#pagefooter a{color:skyblue;}    
.footer-links-grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
@media(max-width:480px){
	.footer-links-grid-container {
		display: block;
		word-wrap: break-word;
	}
}
.footer-links-grid-item {
	list-style: none;
	padding:5px;
}
.footer-links-grid-item *{
	text-align:left;
}
.footer-links-grid-item li{
	text-indent:5px;
}
.footer-links-grid-item ul {
	margin:0;
	list-style: none;
	overflow-wrap:break-word;
}
.footer-links-grid-item ul li {
	word-wrap: break-word;
	text-indent: -25px;
}div.dev-branch-notice{
	background-color:var(--dev-branch-background-color); 
	width:100%;
	z-index:1;
	border-radius:10px 10px 0px 0px;
}
div.dev-branch-notice b{
	color:var(--dev-branch-text-color);
}div#pagenotice{
	position:fixed;
	width:100%;
	background-color:yellowgreen;
	bottom:0;
}