:root {
	--color:black;
	--content-width:800px;
}

.color-black {--color:#2B2A29;}
.color-red {--color:#EF7971;}
.color-orange {--color:#EC9B40;}
.color-blue {--color:#739DD1;}
.color-green {--color:#30AD70;}
.color-brown {--color:#A48B6A;}

* {
	margin:0;
	padding:0;
}

/* buttons */
a.home-button,
a.top-button {
	position:fixed;
	display:block;

	height:40px;
	width:40px;

	top:10px;

	z-index:10;

	border-radius:100%;
	background-color:var(--color);
}

a.home-button {
	left:10px;
}

a.top-button {
	right:10px;
}

	a.home-button img {
		padding:7px 8px 5px;
		height:calc(100% - 12px);
		width:calc(100% - 16px);
	}

	a.top-button img {
		padding:5px;
		height:30px;
		width:30px;
	}

/* heading */
header {
	height:60px;

	font-family:skautbold;

	background-color:var(--color);
}

	.header-sizer {
		display:flex;

		height:60px;
		max-width:var(--content-width);
		width:80%;

		margin:0 auto;

		flex-direction:row;
		align-items:center;
		justify-content:center;
	}

		header .num {
			height:40px;
			width:100px;

			background-image:url("../img/num.png");
			background-size:100% 100%;

			font-size:30px;
			text-align:center;

			color:var(--color);
		}

		header p {
			width:auto;

			flex-grow:1;
			
			text-align:center;
			font-size:40px;

			color:white;
		}

		header .logo {
			display:flex;

			width:50px;

			justify-content:flex-end;
		}

			header .logo img {
				max-width:50px;
				max-height:50px;
			}

/* content */
body {
	padding-bottom:50px;
}

	content img {
		max-width:calc(100% - 100px);

		padding:50px;
	}

	content > img {
		display:block;
		margin:0 auto;
	}

		content .img-wrap img {
			display:block;

			margin:20px auto 0;
			padding:0;
		}
		content .img-wrap p {
			width:100%;

			margin:5px 0 20px;

			text-align:center;
			font-style:italic;
			-webkit-column-count:1;
			-moz-column-count:1;
			column-count:1;
		}

article {
	display:block;
	width:80%;
	max-width:var(--content-width);

	margin:0 auto;

	font-family:themix;
	text-align:justify;
}

	article p {
		-webkit-column-count:2;
		-moz-column-count:2;
		column-count:2;
		-webkit-column-gap:30px;
		-moz-column-gap:30px;
		column-gap:30px;
	}

	.citation,
	.information {
		margin:20px 0;
		padding:20px;

		color:white;
		background-color:var(--color);
	}

		.citation p,
		.information p {
			font-style:italic;
			-webkit-column-count:1;
			-moz-column-count:1;
			column-count:1;
		}

		.citation img,
		.information img {
			display:block;

			max-height:80vh;
			height:auto;
			max-width:100%;
			width:auto;

			margin:20px auto 0;
			padding:0;
		}

		.citation h2::before,
		.information h2::before {
			content:"";
			display:inline-block;

			height:20px;
			width:30px;

			background-size:contain;
			background-repeat:no-repeat;
		}

		.citation h2::before {background-image:url("../img/cite.svg");}
		.information h2::before {background-image:url("../img/info.svg");}

/* various */
h1 ~ h1 {
	margin-top:20px;
}

hr {
	height:20px;
	width:80%;
	max-width:var(--content-width);

	margin:20px auto;

	clear:both;

	background-color:var(--color);
	border:none;
}

.height-maxhalf {max-height:50vh;}
.height-maxthird {max-height:33.3vh;}

.onecol {
	-webkit-column-count:1;
	-moz-column-count:1;
	column-count:1;
}

article > p:first-child {
	margin-top:20px;
	/* keep spacing */
}

/* navigation */
nav {
	display:block;

	max-width:var(--content-width);
	width:80%;

	margin:0 auto;

	font-family:themix;
}

	nav a {
		text-decoration:none;

		color:var(--color);
	}
	nav a:hover {
		text-decoration:underline;}
	nav a:last-child {
		float:right;
	}

article + nav {
	margin-top:20px;
}

/* used for index.html */
.mainnav a {
	display:block;

	margin:20px;

	text-decoration:none;

	border:1px solid var(--color);
}

	.mainnav h2 {
		padding:20px;
		text-align:center;

		color:var(--color);
	}

	.mainnav img {
		padding-top:0;
		padding-bottom:20px;
	}

/* used for chronologie.html */
.timeline h2,
.timeline h3 {
	color:var(--color);
}

.timeline h2 {
	position:relative;

	left:-35px;
}

.timeline h2.nodate {
	height:5px;
}

.timeline h2.nodate + h3 {

}

.timeline h2.act-w::before, /* world */
.timeline h2.act-c::before, /* country */
.timeline h2.act-t::before /* town */ {
	content:"";

	position:relative;
	display:inline-block;

	top:4px;
	left:-5px;

	height:25px;
	width:25px;

	margin-right:10px;

	background-size:contain;
}

.timeline h2.act-w::before {background-image:url("../img/1/act-w.svg");}
.timeline h2.act-c::before {background-image:url("../img/1/act-c.svg");}
.timeline h2.act-t::before {background-image:url("../img/1/act-t.svg");}

.timeline p {
	-webkit-column-count:1;
	-moz-column-count:1;
	column-count:1;
}

.timeline p + h2,
.timeline h3 + h2 {
	margin-top:20px;
	/* keep spacing even if event has no image */
}