@import url(https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700|literata:500);
:root {
	--pageurlbk : #e0ffcd;
	--settingslabels: #b45c2f;
	--settingsbk:	#e2e2dd;
	--menutext: 	#b3b3b3;
	--main: 		#111111;
	--bkgrd:		#fff9e1;
	--hover: 		#000000;
}

@media (prefers-color-scheme: dark) {
	:root {
	--pageurlbk : #345a1f;
	--settingslabels: #a1542d;
	--settingsbk:	none;
	--menutext: 	#b3b3b3;
	--main: 		#8d8d8d;
	--bkgrd:		#000000;
	--hover: 		#FFFFFF;
	}
}

*,html,body { font-family: 'Atkinson Hyperlegible',Arial,sans-serif; color: var(--main); box-sizing:border-box; background-color: var(--bkgrd); }

input, textarea { border-radius:5px;}
a:hover, nav #menu li a:hover {color: var(--hover);}

.container { max-width: 1200px; margin: 0 auto; padding: 0px 20px;}
.content { clear: both;  font-size:1.25em}
article textarea { width:100%; height: 400px; }

article h1 { margin-bottom:0px; }
article h1, article h2, article h3, article h4 { font-family: 'literata',Arial,sans-serif;}

article a { text-decoration: none; border-bottom: 1px dashed; color: inherit;}
article #dates { font-size: 0.7em;}
article #dates span { margin-right:20px;}

#article_content { margin-top: 30px;}
#article_content .guide { margin: 5px; font-size: 0.8em; color: var(--menutext);}
#article_content .guide a {  color: var(--menutext); border-bottom: 1px dotted;}


nav #logo { float:left;}
nav #logo a { color:var(--menutext); border-bottom: none; text-decoration: none;}
nav #menu { float:right;}
nav #menu li { display: inline-block; padding: 3px 10px;}
nav #menu li a { color: var(--menutext); border-bottom: none; text-decoration: none;}
nav #menu li a:hover { color: var(--hover); }

input[type=text],input[type=password],input[type=email] { width: 100%;}

#settings #pageurl { background-color: var(--pageurlbk);
	padding: 5px 10px; border-radius: 10px; margin-bottom: 10px; text-align:center;}

#settings  { padding: 20px 20px; border-radius: 10px; margin-bottom: 40px; display: none; border: 2px dotted }

#settings h5 { margin: 10px 0px 0px 0px; font-size: 1.1rem; color: var(--settingslabels);}
#settings p { margin: 0px;}
label { display: inline-block; margin-bottom:0; font-weight: inherit;}

#editor { padding: 10px;}