@font-face {
	font-family: rodondo;
	src: url("Rodondo.otf") format('opentype');
}
@font-face {
	font-family: opensans;
	src: url("OpenSans-Regular.ttf") format('truetype');
}
@font-face {
	font-family: opensans;
	src: url("OpenSans-Italic.ttf") format('truetype');
	font-style: italic;
}
@font-face {
	font-family: monofur;
	src: url("monof55.ttf") format('truetype');
}

:root {
	--peas-color: #271212;
	--leaves-color: #3a6225;
}

body {
	font-family: opensans, 'arial';
	margin: auto;
	background-color: var(--bg-color);
	color: #ffffff;
}

img { 
	width: 40%;
}

.block {
	width: 100%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.chapdiv {
	width: 30%;
	margin: auto;
						
}
.chapdiv p, .chapdiv a {
	border: 0 0 0 0;
	margin-bottom: 8px;
	margin-top: 2px;
}

.centered { text-align: center; }

#content {
	top: 50%;
	left: 50%;
	margin: auto;
	width: 50%;
	background-color: var(--content-bg);
	padding: 12px 24px 12px 24px;
}

.dialog {
    border: 1px solid black;
	border-color: #666666;
    height: 18px;
    padding: 12px 12px 16px 12px;
    overflow: hidden; 
	border-radius: 6px;
	margin-bottom: 12px;
}
.dialog_btn {
	display: block;
	margin: 0 auto;
}

.chat {
	background-color: #EEEEEE;
	color: #000000;
}
.chat p {
	text-align: left;
	font-family: monofur;
}

span.chat {
	border-radius: 2px;
	padding: 2px 3px 2px 3px ;
}
.sari { color: #b00b69; }
.claw { color: #1d3776; }
.ryann { color: #660a0a; }
.mars { color: #993f10; }
.philip { color: #464646; }
.leaves { color: var(--leaves-color); }
.peas { color: var(--peas-color); }
/* .chat .sari, .chat .mars, .chat .ryann, .chat .claw, .chat .philip, .chat .leaves, .chat .peas {margin: 0 0 4 0; } */

@media (max-width:800px) {
	#content {
		width: calc(90% - 24px);
	}
}

a:link { color: var(--link-color); }

a:visited { color: var(--link-visited); }

.title {
	font-family: 'rodondo';
	margin: auto;
}

.title a {
	color: #ffffff;
}

.action, .chapter { text-align: center; }

.choice p {
	text-align: left;
	font-size: 20px;
	margin-bottom: 0px;
	margin-top: 0px;
}

.choice p::before { 
	content: "> ";
	color: #fff;
}
.choice p:last-of-type::before { content: "=> "; }

.hidden {
	font-size: 18px;
	color: var(--content-bg);
}

.hlist p { display: inline; }
.hlist p::after { content:" |" ;}
.hlist p:last-child::after { content:""; }

.hlist { text-align:right; }

footer {
	padding-top: 24px;
	padding-bottom: 12px;
}