:root {
	color-scheme: light dark; /* Declare that we support both schemes. */
	--article-list-lpad: 4ex;

	/* Default colors for the default light scheme */
	--text-color: #222;
	--bg-color: white;
	--code-bg-color: lightgray;
}
.dark-theme {
	--text-color: #eee;
	--bg-color:  black;
	--code-bg-color: #444;
}

/* switch the defaults if the UA prefers darkmode */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #eee;
    --bg-color: black;
	--code-bg-color: #444;
  }
  .light-theme {
    --text-color: #222;
    --bg-color: white;
	--code-bg-color: lightgray;
  }
}
#textarea-content, #iframe_preview {
	resize: both;
	width: 100%;
	aspect-ratio: 16/9;
	border: 1px solid var(--text-color);
	min-width: 10em;
	max-width: none;
	min-height: 20em;
}

@media (orientation: portrait) {
	#textarea-content, #iframe_preview {
		aspect-ratio: 1/1;
	}
}

/* Rules for small devices */
@media screen and (max-device-width: 200mm) {
	:root {
		--article-list-lpad: 2ex;
	}
	html {
		font-size: 11pt;
	}
	pre, code {
		font-size: 10pt;
	}
	ul, ol {
		padding-left: 3ex;
	}
	blockquote {
		margin-block-start: 3ex;
		margin-inline-start: 3ex;
	}
	#textarea-content, #iframe_preview {
		resize: vertical;
		font-size: 100%;
	}
}

body {
	background-color: var(--bg-color);
	color: var(--text-color);
	/*
	font-family: 'Roboto', sans-serif;
	line-height: 1.4;
	*/
	font-family: Asap, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	text-align: center;
}
a {
	color: var(--text-color);
	/* https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
}
a:hover {
	text-decoration: none;
}

textarea {
	color: var(--text-color);
	background-color: var(--bg-color);
	font-size: 120%;
}

#body-wrap {
	display: inline-block;
	width: min(100ex, 100%);
	max-width: min(100ex, 100%);
	text-align: left;
	padding: 1em 0 1em 0;
	border: 0px solid red;
}
img, iframe, picture {
	max-width: min(100ex, 100%);
}

input, select {
	padding: 0.5ex;
}

.form_row {
	margin-top: 1ex;
}

.hint {
	display: none;
	color: gray;
	font-style: italic;
}
input:focus + .hint, select:focus + .hint {
	display: inherit;
}

.article_url {
	opacity: 0.8;
	font-family: "Skolar-Light-BGR",Georgia,Times,"Times New Roman",serif;
	font-size: 150%;
	font-style: italic;
	font-weight: normal;
	display: block;
	border-width: 0.5ex;
	border-style: double;
	border-radius: 1ex;
	padding: 0.5ex 1ex 0.5ex 1ex;
	margin-top: 0.2ex;
	margin-bottom: 1ex;
	color: var(--bg-color);
	background-color: var(--text-color);
}
.article_url * {
	color: var(--bg-color);
}

.article_dates {
	display: inline-block;
	padding: 0.3ex 1ex 0.3ex 1ex;
	border: 1px solid gray;
	color: gray;
	margin-bottom: 1ex;
}

pre, code {
	background-color: var(--code-bg-color);
	font-family: 'Roboto Mono', monospace;
}

pre {
	border: 1px dotted black;
	padding: 0.5ex;
	overflow: auto;
}

.hidden {
	display: none;
}

.div-error {
	color: red;
	font-weight: bold;
	font-size: 120%;
}

.div-menu {
	margin-left: 1ex;
	margin-right: 1ex;
}

.div-tags a, #div-comment-controls a, .div-menu * {
	margin-right: 1ex;
	line-height: 1.5;
}

.article_list_entry {
	padding-left: var(--article-list-lpad);
	margin-bottom: 2ex;
}

#menu_a_login, #menu_a_logout, #menu_a_contact, #btn-darkmode, #bmenu_a_websub {
	float: right;
}
#btn-darkmode {
	border: 0;
	font-size: 110%;
	background-color: transparent;
	cursor: pointer;
	padding: 0;
}

.cmt_wrap, #cmt_form {
	margin-left: 2ex;
	border-left: 1px dotted black;
	padding-left: 2px;
}
.cmt_name_content {
	margin-top: 4px;
	display: inline-block;
	padding: 1ex;
	background-color: var(--code-bg-color);
	border-top-left-radius: 18px;
	border-top-right-radius: 18px;
	border-bottom-left-radius:18px;
	border-bottom-right-radius: 18px;
}
.cmt_content {
	white-space: pre-line;
}
#pager {
	text-align: center;
	/* Strangely the page-links borders go beyond the bottom border of the div */
	margin-bottom: 1em;
	line-height: 2.2;
}
#pager span {
	padding: 0.5ex;
	margin: 0.3ex;
}
#pager a {
	border: 1px solid var(--text-color);
	padding: 0.5ex 1.5ex 0.5ex 1.5ex;
}

#div-cookies {
	position: fixed; left: 0 ; right: 0; bottom: 0; padding: 1em;
	color: var(--bg-color);
	background-color: var(--text-color);
	text-align: center;
}
#div-cookies a {
	color: var(--bg-color);
}

.fbleafs {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 200%;
  font-weight: bold;
  color: white;
  background-color: rgb(176, 5, 6);
  background-position: center center;
  background-size: cover;
  min-height: 30ex;
  background-image: url("https://lh3.googleusercontent.com/pw/AM-JKLUv9gIH7Hn-vpdf7uqjKPp2HzljG_eY4ffn1DUqarnMFKOTTVMzLHMz6gyZW8URAfhwyV8DGEDvf4r4sMT_l_EwzDeELf5x_ApHkPkxVby2APPfjAd-wOFrigxrUxPjOPt7vQs2Ovki2x6g59oJrv3EmQ");
  padding: 0 5ex 0 5ex;
}