@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:		#fffedd;
	--hover: 		#000000;
	--settings:		#c8d6eb;
}

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

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

input, textarea { border-radius:5px; background-color: inherit;}
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; margin-bottom: 30px;}
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;}
#article_content img { max-width: 100%;}


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 { display: none; background-color: var(--settings); box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;}
#settings #pageurl { background-color: var(--pageurlbk); font-size: 85%;
	padding: 5px 10px; border-radius: 10px; margin-bottom: 10px; text-align:center;}

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

#settings h5 { margin: 10px 0px 0px 0px; font-size: 1.1rem; color: var(--settingslabels); font-weight: 400;}
#settings p { margin: 0px;}

#settings .settingsfield { margin-right: 20px;}
#settings .pwdbttn { font-size: 80%;}

label { display: inline-block; margin-bottom:0; font-weight: inherit;}

#editor { padding: 10px;}

@media screen and (max-width: 400px) {
	#settings { font-size: 70%;}	
	#settings h5 { font-size: 0.8rem;}
}


@media screen and (max-width: 600px) {
	#settings .settingsfield { width: 100%;}	
}