/*color variables*/
:root {
	overscroll-behavior: none;
	
	--text-scale: 1;
	
	--text-light-color: 40, 15, 2;
	--text-light-accent-color-one: 212, 15, 73;
	--text-light-accent-color-two: 245, 152, 39;
	--background-light-color: 255, 249, 222;
	
	--text-dark-color: var(--background-light-color);
	--text-dark-accent-color-one: 245, 152, 39;
	--text-dark-accent-color-two: 212, 15, 73;
	--background-dark-color: var(--text-light-color);
}

@font-face {
	font-family: "Ancizar Serif";
	font-style: normal;
	font-weight: 500;
	src: 
	url(../../ui/AncizarSerif.ttf) format("truetype"),
	url(../../ui/AncizarSerif-Italic.ttf) format("truetype"),;
}

body {
	font-family: 'Ancizar Serif', Georgia, Serif;
	font-size: 26px;
	margin:0;
	background: rgb(var(--background-light-color));
	background-repeat: repeat;
}

h1 {
	margin: 0;
	font-weight: 900;
	font-size: 1.6em;
	line-height: 1.3em;
}

h2 {
	margin: 0;
	font-size: 1.4em;
	line-height: 1.2em;
}

h3 {
	margin: 0;
	font-size: 1.2em;
	line-height: 1em;
	color: rgb(var(--text-main-color));
}

p {
	margin: 0;
}

.dark-mode-checkbox {
	position: absolute;
	display: none;
}

.label {
  cursor: pointer;
  z-index: 1;
}

.header {
	position: sticky;
	box-shadow: 0 15px 15px rgb(var(--c-background));
	top: 0;
}

.container {
	--c-text: var(--text-light-color);
	--c-background: var(--background-light-color);
	--c-text-accent-two: var(--text-light-accent-color-two);
	color: rgb(var(--c-text));
	background-color: rgb(var(--c-background));
}

.dark-mode-checkbox:checked ~ .container{
	--c-text: var(--text-dark-color);
	--c-background: var(--background-dark-color);
	--c-text-accent-two: var(--text-dark-accent-color-two);
}

.accent-two {
	color: rgb(var(--c-text-accent-two));
}

.wrapper {
	margin: auto;
	width: 32em;
}

.textbox {
	/*font-size: 1.125em;
	line-height: 1.375em;*/
	
	font-size: 1em;
	line-height: 1.25em;
	
	p {
		text-indent: 1em;
	}
}

p {
	text-indent: 1em;
}

dd {
	margin-left: 1em;
}

hr {
	display: block;
	margin: 1em 0 1em 0;
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
	border-width: 1px;
	border-color: rgb(var(--c-text-accent-two));
}

.scene-break {
	width: 100%;
	display: block;
}

.scene-art {
	max-width: 100%;
	max-height: 75vh;
	margin: 0 auto 0 auto;
	display: block;
}

.story-title {
	text-align: center;
}

.storypage-nav {
	font-size: 1.375em;
	margin: 1em auto 1em auto;
	text-align: center;
}

@media (max-width: 1000px) {
	
	.wrapper{
		width: 100%;
		box-shadow: 1em 0 0 rgb(var(--c-background)), -1em 0 0 rgb(var(--c-background));
		max-width: 24em;
		padding: 0;
	}
	
	.header {
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		max-width: 100%;
	}

	.header-title {
		text-align: center;
		width: 100%;
	}
}