/*
	colours:
	* body bg, blockquote border, div panel bg  282e13
	* border-left, borders, hr, blockquote bg  1a2208
	* color  e0ddc0
	  * strike  a09a80
	  * strong  dade90
	* h1, footer  da86b0
	* h2  889990
	  * h2 border  1a2208
	* h3  b08090
	* h4  ff90d7
	  * h4 border  a09a80
	* a color  ccfff4
	* a hover  ffd0ed
	* button col  fffff0
	* button bg  aabbcc
	* textarea bg  304050
	* textarea col  a09080
	* preview pic hover border  202830
*/



html{
	background-color:#1a2208;
	font-size:clamp(12px,2.8vw,18pt);
}
body{
	background-color:#282e13;
	border-left:dashed 1.8em #1a2208;
	border-right:dashed 1.2em #1a2208;
	color:#e0ddc0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	margin-bottom:0;
	padding-left:0.9em;
	padding-right:0.9em;
	padding-top:2em;
	padding-bottom:6em;
	font-family:Atkinson Hyperlegible,sans-serif;
	width:auto;
	height:auto;
}


/* heading types */

h1,h2,h3,h4{
	z-index:1;
	font-weight:normal;
}
h1{
	color:#da86b0;
	position:relative;
	font-size:2.4em;
	letter-spacing:0.1em;
	overflow:visible;
	font-variant:small-caps;
	font-family:Linux Libertine,Georgia,serif;
}
h2{
	color:#889990;
	border-top:0.2em solid #1a2208;
	padding-top:0.6em;
	font-size:1.8em;
	letter-spacing:-0.02em;
	margin-top:1.6em;
	line-height:0.7;
	font-family:Linux Libertine,Georgia,serif;
}
h3{
	color:#b08090;
	border-bottom: 0.38em dotted #1a2208;
	font-size:1.2em;
	font-style:italic;
	letter-spacing:-0.02em;
	line-height:0;
	margin-top:1.8em;
	text-align:right;
	margin-right:10%;
	font-family:Linux Libertine,Georgia,serif;
}
h4{
	color:#ff90d7;
	border-bottom: 0.1em solid #1a2208;
	font-size:0.9em;
	font-weight:normal;
	margin-bottom:-1em;
	margin-left:-0.2em;
	padding-bottom:0;
	line-height:1.1em;
	letter-spacing:0.1em;
	font-family:Linux Libertine,Georgia,serif;
}



/* arbitrary markers for some things */
bluetext{
	color:#d0e0f0;
}
.subblock{
	padding-left:1.0em;
	border-left:0.6em solid #1a2208;
}


/* regular body text */
p{
	padding-bottom:1.0em;
}
p,a,ul,ol,div{
	line-height:1.4em;
}
p.dropcap::first-letter{
	font-size:3.3em;
	float:left;
	letter-spacing:0.1em;
}
.footer{
	color:#da86b0;
	font-size:2.6em;
	text-align:center;
	letter-spacing:0.2em;
	padding:0.1em;
	background-image:url("sapronym-footer.webp");
	background-repeat:no-repeat;
	background-position:center;
	background-size:auto 1.5em;
	min-height:1.5em;
}
hr{
	margin-top:2em;
	margin-bottom:3em;
	height:0em;
	border:solid 0.2em #1a2208;
	max-width:32%;
}

li{
	padding-bottom:1em;
	padding-left:2em;
}
blockquote{
	border-top:0.3em dashed #282e13;
	border-bottom:0.3em dashed #282e13;
	background:#1a2208;
	line-height:1.2em;
	padding:0.6em;
}
strong,em,q,blockquote{
	color:#dade90;
	font-size:0.9em;
}
q,blockquote{
}
strong{
	font-weight:bold;
}
em,q{
	font-style:italic;
}
strike{
	color:#a09a80;
}
ol.alph{
	list-style-type:lower-alpha;
	padding-top:1em;
}


/* clickable links */
a{
	color:#ccfff4;
	font-size:0.9em;
}
a:visited{
	color:#88cfbe;
}
a:hover{
	color:#ffd0ed;
	text-decoration:none;
	background-color:#1a2208;
}


/* input thingies */
button{
	background-color:#454a43;
	color:#e0ddc0;
	border:0.4em dashed #1a2208;
	padding:0.3em;
	cursor:pointer;
}
textarea,input[type=text]{
	background-color:#1a2208;
	color:#da86b0;
	border:none;
	padding:0.3em;
	font-family:monospace;
}
textarea{
	padding:0.6em;
	font-size:1.2em;
}


/* little preview pics for some links */
#pic{
	display:block;
	min-height:6.4em;
}
#pic a .large{
	display:block;
	position:absolute;
	border:0px;
	width:1px;
	height:1px;
	left:-1px;
	top:-1px;
}
#pic a img{
	border:0.05em solid #202830;
	margin:0.3em;
	height:6.4em;
	width:4.8em;
}
#pic a.p1, #pic a.pl:visited{
	display:block;
}
#pic a.p1:hover{
	display:block;
}
#pic a.p1:hover .large{
	border:0.1em solid #202830;
	display:block;
	position:fixed;
}


#pic a.p1:hover .large{
	height:40%;
	width:auto;
	left:1em;
	top:1em;
}



/* don't spill over *too* wide */
@media screen and (min-width:90em){
	html{
		margin-left:calc(100vw - min(100vw,90em));
	}
}
/* enables the sidebar summary and left border */
@media screen and (min-width:60em){
	html{
		font-size:clamp(12px,1.8vw,14pt);
	}
	body{
		margin-right:18em;
		border-right:dashed 2em #1a2208;
		border-left:dashed 3em #1a2208;
		min-height:100%;
		padding-right:3em;
		padding-left:2em;
	}
	div.panel{
		background-color:#4e3328;
		border:dashed 0.3em #1a2208;
		padding:0.7em;
		bottom:1em;
		left:auto;
		right:1em;
		max-width:15em;
		max-height:100%;
		padding:0.4em;
		padding-top:0.7em;
		line-height:1em;
		position:fixed;
	}
	h1{margin-left:-0.5em;}
	h1::first-letter{
		font-size:1.6em;
		float:left;
		letter-spacing:-0.01em;
		margin-bottom:0.3em;
	}
	h2{margin-left:-0.2em;}
	h3{margin-left:1.2em;}

	#pic a.p1:hover .large{
		width:18em;
		height:24em;
		top:2em;
		left:auto;
		right:0.7em;
	}
}