:root {
	color-scheme: light dark;
}

/* Light mode */
:root {
	--body-background: #fefefe;
	--body-color: #424242;
	--body-color-secondary: #777474;
	--table-alternate-row-color: #f7f7f3;
	--link-color: #EB0F0F;
	--background-color: #303030;
	--code-background-color: #f5f2f0;
	--code-border-color: #dddbcc;
	--code-text-color: #444;
	--code-comment-color: #888;
	--button-text-color: #fefefe;
	--line-color: #eee;
	--disclaimer-text-color: #000000;
	--disclaimer-background-color: #FFC6C6;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
		--body-background: #000000;
		--body-color: #FFFFFF;
		--body-color-secondary: #777474;
		--table-alternate-row-color: #323232;
		--link-color: #EB0F0F;
		--background-color: #303030;
		--code-background-color: #444;
		--code-border-color: #3D3736;
		--code-text-color: #FFFFFF;
		--code-comment-color: #FFFFFF;
		--button-text-color: #fefefe;
		--line-color: #303030;
		--disclaimer-text-color: #000000;
		--disclaimer-background-color: #FFC6C6;
   }
}

html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
article, aside, footer, header, nav, section { display: block; }
h1 { font-size: 2em; margin: .67em 0; }
figcaption, figure, main { display: block; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
dfn { font-style: italic; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: .35em .75em .625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { display: inline-block; vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details, menu { display: block; }
summary { display: list-item; }
canvas { display: inline-block; }
template { display: none; }
[hidden] { display: none; }
html, body { height: 100%; }
body {
	background: var(--body-background);
	color: var(--body-color);
	font-family: "Open Sans", arial, sans-serif; font-size: 18px;
}
h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; text-transform: none; }
h1 { font-size: 26px; margin-top: 40px; }
h2 { font-size: 22px; margin-top: 30px; }
h3 { font-size: 18px; margin-bottom: 20px; }
h4 { font-size: 16px; margin-bottom: 18px; }
h5 { font-size: 14px; margin-bottom: 15px; }
h6 { font-size: 12px; margin-bottom: 12px; }
p { line-height: 1.8; margin: 0 0 30px; }
a { color: var(--link-color); text-decoration: none; }
ul, ol { line-height: 1.4; margin: 0 0 20px; }
ul ul, ul ol, ol ul, ol ol { margin: 10px 0 0 20px; }
ul li, ol li { margin: 0 0 2px; }
ul li:last-of-type, ol li:last-of-type { margin-bottom: 0; }
blockquote { border-left: 1px dotted var(--link-color); margin: 40px 0; padding: 5px 30px; }
blockquote p { color: var(--body-color-secondary); display: block; font-style: italic; margin: 0; width: 100%; }
img { display: block; margin: 40px 0; width: auto; max-width: 100%; }
img[src$="align-center"] { margin: auto; }
img[src$="align-left"] { float: left; margin-right: 40px; }
img[src$="align-right"] { float: right; margin-left: 40px; }
pre { border: 1px solid var(--code-border-color); border-radius: 3px; margin: 0 0 20px; overflow-x: auto; padding: 10px; font-size: 16px; }
pre code { padding: 0; }
code { padding: 2px 4px; font-size: 90%; color: var(--code-text-color); background-color: var(--code-background-color); border-radius: 4px; }
hr { border: none; border-bottom: 1px dotted var(--background-color); margin: 45px 0; }
table { margin-bottom: 40px; width: 100%; }
table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th { background-color: var(--table-alternate-row-color); }
table th { padding: 0 10px 10px; text-align: left; }
table td { padding: 10px; }
table tr { border-bottom: 1px dotted var(--body-color-secondary); }
.fluid-width-video-wrapper { margin-bottom: 40px; }
.hidden { text-indent: -9999px; visibility: hidden; display: none; }
.clearfix:after { content: ""; display: table; clear: both; }
.container { margin: 0 auto; position: relative; width: 100%; max-width: 889px; }
.button { background: var(--background-color); border: none; border-radius: 3px; color: var(--button-text-color); font-size: 14px; font-weight: 700; padding: 10px 12px; }
.button:hover { background: var(--link-color); }
.button-square { background: var(--link-color); color: var(--button-text-color); line-height: 20px; float: left; height: 20px; font-size: 14px; font-weight: 600; margin: 0 0 0 10px; padding: 5px 8px 5px; }
.button-square:hover { background: var(--background-color); }
.error { text-align: center; }
.comments { margin-top: 10px; }
.site-header { padding: 40px 0 20px 0; overflow: auto; text-align: center; }
.site-header:after { border-bottom: 1px solid var(--background-color); content: ""; display: block; margin: 30px auto 0; width: 200px; }
.site-title-wrapper { display: table; margin: 0 auto; }
.site-footer-wrapper { display: table; margin: 0 auto; }
.site-title { float: left; font-size: 14px; font-weight: 600; margin: 0; }
.site-title a { float: left; background: var(--link-color); color: var(--button-text-color); padding: 5px 10px 5px; }
.site-title a:hover { background: var(--background-color); }
.site-title-bottom { float: left; font-size: 14px; font-weight: 600; margin: 0; }
.site-title-bottom a { float: left; background: var(--link-color); color: var(--button-text-color); padding: 5px 10px 5px; }
.site-title-bottom a:hover { background: var(--background-color); }
.site-nav { list-style: none; margin: 28px 0 10px; padding: 0; }
.site-nav-item { display: inline-block; font-size: 14px; font-weight: 700; margin: 0 10px; }
.post-container { margin: 0 40px; margin-right: 25px; margin-left: 25px; }
.post-header { margin: 0 0 10px; padding: 0 0 20px; text-align: center; }
.post-header:after { border-bottom: 1px solid var(--background-color); content: ""; display: block; margin: 30px auto 0; width: 200px; }
.post-title { font-size: 52px; font-weight: 700; margin: 15px 0; text-align: center; }
.post-date { color: var(--body-color-secondary); font-size: 14px; font-weight: 600; line-height: 1; margin: 25px 0 0; }
.post-date a { color: var(--body-color-secondary); }
.post-date a:hover { color: var(--link-color); }
.post-title-footer:after { border-bottom: 1px solid var(--background-color); content: ""; display: block; margin: 40px auto 0; width: 200px; }
.post-content { overflow-wrap: break-word; }
.post-content a:hover { border-bottom: 1px dotted var(--link-color); padding: 0px; }
.post-content:last-child { margin-bottom: 0; }
.post-content .footnote { border-spacing: 0; margin-bottom: 0; }
.post-content .footnote .label + td { width: 100%; }
.post-content .gist tr { border-bottom: 0; }
.post-footer { margin-top: 5px; }
.post-tags-categories { color: var(--body-color-secondary); font-size: 14px; }
.post-tags-categories span { font-weight: 600; }
.post-tags-categories { clear: both; float: left; margin: 3px 0 0; }
.post-tags-categories a:hover { border-bottom: 1px dotted var(--link-color); padding: 0px; }
.post-navigation { display: table; margin: 30px auto 10px; }
.newer-posts, .older-posts { float: left; background: var(--link-color); color: var(--button-text-color); font-size: 14px; font-weight: 600; margin: 0 5px; padding: 5px 10px 6px; }
.newer-posts:hover, .older-posts:hover { background: var(--background-color); }
.page-number { display: none; }
.post-list { list-style: none; padding: 0; margin-right: 25px; margin-left: 25px; }
.post-stub { border-bottom: 1px solid var(--line-color); margin: 0; padding-bottom: 50px; margin-bottom: 50px; position: relative; }
.post-stub:last-child { border-bottom: 0px solid var(--line-color); margin: 0; padding-bottom: 50px; margin-bottom: 50px; position: relative; }
.post-stub:first-child { padding-top: 0; }
.post-stub-title { font-size: 16px; font-weight: 700; display: inline-block; margin: 0; text-transform: none; }
.post-stub-title a { display: block; color: var(--link-color); border-bottom: 1px dotted transparent;}
.post-stub-title a:hover { color: var(--link-color); border-bottom: 1px dotted var(--link-color); }
.post-stub-date { display: inline-block; color: var(--body-color-secondary); font-size: 14px; }
.post-stub-date:before { }
.post-read-more {
  font-weight: 800;
  float: right;
}
.post-read-more a { display: block; color: var(--link-color); border-bottom: 1px dotted transparent;}
.post-read-more a:hover { color: var(--link-color); border-bottom: 1px dotted var(--link-color); }

.post-entry {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow-wrap: break-word;
}
.post-entry {
  width: 100%;
}
.footer { margin-top: 50px; margin-bottom: 30px; overflow: none; }
.footer:before { border-bottom: 1px solid var(--background-color); content: ""; display: block; margin: 0px auto 0; width: 200px; }
.footer .site-title-wrapper { margin: 20px auto 20px; }
.footer .site-footer-wrapper { margin: 20px auto 10px; }
.footer-privacy-disclaimer { color: var(--body-color-secondary); font-size: 10px; margin: 0; text-align: center; }
.footer-privacy-disclaimer a { color: var(--body-color-secondary); font-weight: 700; }
.footer-privacy-disclaimer a:hover { color: var(--link-color); border-bottom: 1px dotted var(--link-color); padding: 0px; }
.disclaimer-warning { color: var(--disclaimer-text-color); background-color: var(--disclaimer-background-color); padding: 10px; }

.clatters-info-header {
	margin-top: 80px;
	margin-bottom: 40px;
	text-align: center;
	width: 100%;
	font-size: 18px;
}
.clatters-info-header a:hover { border-bottom: 1px dotted var(--link-color); padding: 0px; }

.clatters-info {
	margin-top: 0px;
	display: table;
	width: 100%;
    table-layout: fixed;
    border-spacing: 10px;
}

.clatters-image {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}

.clatters-image > a > img {
	margin: 0;
} 

.clatters-image-small {
    display: table-cell;
    width: 25%;
    vertical-align: middle;
}

.clatters-image-small > a > img {
	margin: 0;
} 

.clatters-description {
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.8;
}
.clatters-description a:hover { border-bottom: 1px dotted var(--link-color); padding: 0px; }

.echarts-graph-400px { width: 100%; pointer-events: none; margin-bottom: 60px; height: 400px; }
.echarts-graph-600px { width: 100%; pointer-events: none; margin-bottom: 60px; height: 600px; }


.support-main {
    margin: 60px;
    border-width: 1px 1px;
    border-style: solid;
    border-color: var(--link-color);
    border-radius: 15px;
    padding-top: 20px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 0px;
    max-width: 800px;
}

.support-main .support-title {
    font-size: 2.0rem;
}

.support-text {
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
}

.support-image {
    display: table-cell;
    width: 50%;
    margin: 0;
    padding: 0;
}

@media only screen and (max-width: 700px) {
	.support-main {
		margin-top: 60px;
		margin-bottom: 60px;
		margin-left: 0px;
		margin-right: 0px;
	}
	
	.support-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.support-text {
		display: block;
		vertical-align: middle;
		margin-top: 40px;
	}

	.support-image {
		display: flex;
		width: 100%;
		margin: 0;
		padding: 0;
	}
}