@import url(/fonts/Comfortaa/comfortaa.css);
@import url(/fonts/PTSerif/ptserif.css);

body, html { 
	height: 100%;
	margin: 0; 
	padding: 0; 
}

.article section, body.article, .article div {
	height: auto !important;	
}

section {
	margin: 0;
	padding: 0;
	height: 100vh;
	font-family: 'PT Serif', serif;
}

section:first-of-type h1 {
	text-align: center;
}

section.dark {
	background-color: black;
	color: white;	
}

p {
	padding: 0;
	margin: 0;
}
footer p {
	text-align: right;	
}
footer p, h1 {
	padding: 0;
	margin: 0 1ch 0 1ch;
}

h1 {
	font-family: Comfortaa;
	font-weight: normal;
	font-size: 2.4em;
}

h2 {
	font-size: 3vh;
	margin: 0;
	margin-bottom: 1.8vh;
	padding: 0;
}
ul {
	margin: 0;
	margin-bottom: 1.8vh;	
}

div.text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 58vh;
	margin: 8vh 18vw 8vh 18vw;
	font-size: 1.4em;
	line-height: 1.6em;
}

header, footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0;
	margin: 0;
	background-color: black;
	color: white;
	padding: 12pt 0 12pt 0;
}

footer {
height: calc(100vh - (16vh + 48pt + 58vh + 2.4em));
}

footer p:first-child {
font-weight: bold;
}

a {
	color: #789ecf;
	text-decoration: none;
}

.dark a {
	color: #3465a4;
}

.text a {
	color: #3465a4;
}

.dark .text a {
	color: #789ecf;
}

.dark header, .dark footer {
	background-color: white;
	color: black;
}

@media screen and (max-device-width: 640px) and (orientation: portrait) {
	section {
	}
	header {
		padding: 10pt 0 10pt 0;
	}
	h1 { 
		font-size: 1.4em;
	}
	div.text {
		font-size: 0.8em;
		height: 60vh;
		margin: 1ch 6pt 1ch 6pt;
	}
	footer {
		padding: 0 0 0 0;
		height: calc(100vh - ( 32pt + 60vh + 1.75em));
		font-size: 0.8em;
	}
}