/*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, 255, 255;
	
	--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;
}

.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;
	min-height: 100vh;
}

.content {
	display: flex;
	flex-direction: column;
	background-color: rgb(var(--c-background));
	font-size: calc(1em * var(--content-text-scale));
	padding: 0 calc(1.25em * var(--text-scale)) 0 calc(1.25em*var(--text-scale));
}

a {
	text-decoration: none;
	--c-text-accent: var(--text-light-accent-color-one);
	color: rgb(var(--c-text-accent));
}

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

.header {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	font-size: calc(1em * var(--header-text-scale));
	padding: calc(1.25em * var(--text-scale));
	background-color: rgb(var(--c-background));
}

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

.header-title {
	width: 42.5%;
	text-wrap: balance;
	margin: auto 0 auto 0;
}

.header-link {
	text-align: center;
	margin: auto;
}

.index-link {
	width:100%;
	display: flex;
	text-decoration: none;
	padding: 0 0 1em 0;
	
	img {
		width: 30%;
		object-fit: cover;
	}
	
	div {
		margin: auto 0 auto 0;
		width: 70%;
	}
}

.index-link-left {
	
	img {
		padding-right: 1em;
	}
}

.index-link-right {
	text-align: end;
	
	img {
		padding-left: 1em;
	}
}

.centered {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.index {
	width:100%;
	display: flex;
	text-decoration: none;
}

.portrait {
	padding-right: 1em;
	width: 50em;
	text-align: center;
	margin: auto 0 auto 0;
	
	img {
		width: 100%;
	}
}

@media (max-width: 1000px) {
	:root {
		--content-text-scale: 0.7;
		--header-text-scale: 0.8;
	}
	
	.wrapper{
		width: 100%;
		max-width: 30em;
	}
	
	.header {
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		max-width: 100%;
		padding: 0 calc(0.75em * var(--text-scale)) 0 calc(0.75em*var(--text-scale));
	}
	
	.content {
		padding: 0 calc(0.75em * var(--text-scale)) 0 calc(0.75em*var(--text-scale));
	}

	.header-title {
		text-align: center;
		width: 100%;
		padding: 0.5em 0 0.5em 0;
	}
	
	.header-link {
		padding: 0 0 0.5em 0;
	}
	
	.index-link {
	img {
		width: 40%;
	}
	
	div {
		width: 60%;
	}
}
}