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

body {
	--blue-dark: #45567a;
	--blue-light: #6d87bd;
	--petrol-dark: #2c7987;
	--petrol-light: #39979c;
	--accent-dark: var(--blue-dark);
	--accent-light: var(--blue-light);
	--nav-height: 6rem;

	background: #f7f2e6;
	font-family: "Montserrat", sans-serif;
	/*font-family: "Lora", serif;*/
	/*font-family: "Cormorant", serif;*/
	font-size: 1.1rem;
	font-optical-sizing: auto;
	font-weight: 400;
}

nav, main, section, h1, h2, h3, p, ul, li, blockquote, a {
	box-sizing: border-box;
} 

.page {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

nav {
	height: var(--nav-height);
    display: flex;
	align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
	background: #fff;
	border-bottom: 1px solid #666;
	box-shadow: 4px 4px 4px #ccc;
	color: var(--accent-dark);
	font-size: 1.2rem;
}

nav .logo {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
    
}

nav .logo .name {
	font-weight: bold;
}

nav .logo .subject {
	font-style: italic;
	font-weight: normal;
}

nav ul {
	box-sizing: border-box;
    display: flex;
    padding: 0;
    margin: 0;
	list-style: none;
	gap: 1.6rem;
}

nav .menuBurger {
    cursor: pointer;
    display: none;
}

nav #menuCheckbox {
    display: none;
}

@media (max-width: 1000px) {
    nav .menuBurger {
		display: block;
		order: 1;
    }

	nav .menuBurger i {
		font-size: 2rem;
    }

    nav ul {
		position: fixed;
		top: var(--nav-height);
		right: -20rem;
		padding: 1rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: start;
		transition: all 0.3s;
		background: white;
		border: 1px solid gray;
		border-top: none;
		box-shadow: 4px 4px 4px lightgray;
		gap: 1rem;
    }

	#menuCheckbox:checked ~ ul {
		right: 0;
    }
	
	#menuCheckbox:checked ~ .menuBurger .fa-bars {
		display: none;
    }
	
	:not(#menuCheckbox:checked) ~ .menuBurger .fa-close {
		display: none;
    }
}

main {
	flex: 1;
	height: 100%;
	overflow: auto;
	scroll-behavior: smooth;
	scroll-padding-top: 2rem;
}

section {
	max-width: 50rem;
	padding: 0 2rem;
	margin: 0 auto;	
	margin-bottom: 2rem;
	/*text-align: justify;*/
}

h2, h3 {
	color: var(--accent-dark);
	font-weight: bold;
}

h2 {
	margin: 2rem 0 1rem 0;
	font-size: 1.4rem;
	border-bottom: 1px dotted var(--accent-dark);
}

h3 {
	margin: 0.6rem 0;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
}

ul {
	margin: 0.5rem 0;
	padding-left: 1.1rem;
	font-size: 1.0rem;
}

blockquote {
	margin: 1rem 0.5rem;
	text-align: center;
	font-size: 1.2rem;
	font-style: italic;
	color: var(--accent-dark);
}

blockquote .from {
}

i.fas {
	color: var(--accent-dark);
}

a, a:visited {
	color: var(--accent-dark);
	text-decoration: none;
    /*transition: color 0.5s;*/
	white-space: nowrap;
}

a:hover {
	text-decoration: underline;
	/*color: var(--accent-light);*/
}