/* The Lost Satchel */

:root {
	--page-background : #000;
	--page-background : #59553a url(darkwood.jpg);
	--scroll-color    : #302a10;
	--border-color    : #864;
	--logo-color      : #2f1c01;
	--title-offset    : 2px;
	--title-color     : #372302;
	--title-outline   : #8c6a18;
}

@font-face {
	font-family:blackscript;
	src:url('Augusta.ttf');
}

.hidden { display:none !important; }

body.debug * { outline:dashed 1px #f0f; }

* { margin:0; padding:0; box-sizing:border-box; }
html { background:var(--page-background); color:var(--scroll-color); }
body {
	max-width:48em; margin:50px auto; padding:1em 6em 2em;
	background:url(scroll_mid.png); max-width:879px;
	font-family:blackscript; font-size:19px;
	text-align:center;
	line-height:1.4;
	position:relative;
}
body::before {
	content:''; display:block; text-align:right;
	position:absolute; bottom:100%; left:-27px;
	width:955px; height:36px;
	background:url(scroll_top.png);

}
body::after {
	content:''; display:block;
	position:absolute; top:100%; left:0px;
	width:890px; height:38px;
	background:url(scroll_btm.png);
}

h1 {
	font-size:1.35em;
	position:relative;
	font-family:blackscript;
	font-weight:normal;
	margin:2em 0;
}
h1 img { display:block; margin:0 auto 1em; }
h1 big {
	font-size:1.75em;
	font-weight:bold;
}
h1 small {
	font-size:0.8em;
}
.gilded {
	--o:var(--title-outline);
	color:var(--title-color); text-align:center;
	font-weight:normal;
	text-shadow:
		1px  0 var(--o),
		-1px 0 var(--o),
		0 1px  var(--o),
		0 -1px var(--o) ;
}
h2 big { font-size:1.5em; }
h3 { color:var(--title-color); text-align:center; font-family:blackscript; }
h2, p, ul, ol, li, summary { text-align:left; margin:1em 0; }
h2 { font-size:1.15em; font-weight:normal; margin-top:3em; }
q { user-select:text; }
ol { list-style-type:none; }
ul { list-style-type:disc; margin-left:2em; }

.traded { display:block; margin:0.5em 0 2em; font-size:0.65em; }
.maxim { text-align:center; }
.signature { position:relative; margin:3em auto 10em; width:25em; padding-right: 120px; }
.signature::before {
	content:'';
	position:absolute; right:0em;
	width:120px;
	height:181px;
	background:url(seal_sextant.png);
}

hr {
	border:solid 1px #630; border-width:1px 0;
	height:3px;
	background:#ca0;
	margin:2em 5em;
}



@media (max-width:995px) {
	html { overflow-x:hidden; }
	body { margin:0 auto; padding:1em 12% 2em; }
	body::before, body::after { display:none; }
	#status { bottom:unset; top:0; right:1em; }
}
@media (max-width:895px) {
	body { --m:calc(max(calc(100vw - 895px), -20px) / 2); margin:0 var(--m); }
}

#status img { vertical-align:middle; }