@font-face {
	font-family: boecklins-universe;
	src: url(boecklins-universe.regular.ttf);
}

::-webkit-scrollbar {
	display: none;
}

:root {
	--header-text-colour: #83382e;
	--primary-text-colour: #052e13
}

html {
    height: 100%;
}

body {
	background-color: #f3e8d4;
	height: 100%;
	margin: 0;
}

.container {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

a {
	color: var(--header-text-colour);
	text-decoration: none;
}

li {
    list-style: none;
}

.course-flyer-list {
    text-align: center;
}

.course-flyer-list li {
    font-family: georgia;
}

.course-flyer-list p {
    font-family: georgia;
}

.course-flyer-list li {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

header {
	overflow: auto; /* Forces div height to match content although it still registers as having height 0. Slightly hacky.*/
	font-family: boecklins-universe;
	color: var(--header-text-colour);
	text-align: justify;
	height: 13%;
}

#header-title {
	margin: auto;
	width: fit-content;
}

nav {
	margin: auto;
	width: fit-content;
}

nav ul {
	list-style-type: none;
	margin: auto;
	padding: 0 1em;
}

nav ul li {
	float: left;
	margin: 0 1em 1em 1em;
}

nav ul li a {
	color: var(--header-text-colour);
	text-align: center;
}

#post-body {
	font-family: boecklins-universe;
	margin: auto;
	color: var(--primary-text-colour);
	overflow-y: scroll;
	height: 70%;
	text-align: justify;
	top: 14%;
	width: 100%;
	position: absolute;
}

#post-body h2 {
    text-align: center;
}

#post-body h3 {
    text-align: center;
}

#post-body h4 {
    text-align: center;
}

article {
    max-width: 500px;
    margin: auto;
}

#post-content a {
    text-decoration: none;
    color: var(--header-text-colour);
}

p {
    font-family: georgia;
}

footer {
	position: absolute;
	height: 16%;
	width: 100%;
	display: flex;
	justify-content: center;
	bottom: 0;
}

#footer-image {
	max-height: 100%;
	max-width: 100%;
}

#newsletter-input {
    background-color: #f3e8d4;
    border-radius: .3em;
    color: var(--primary-text-colour);
    font-family: inherit;
}

#newsletter-submit {
    background-color: #f3e8d4;
    border-radius: .3em;
    color: var(--primary-text-colour);
    font-family: inherit;
}

/* Mobile design */
@media screen and (max-width: 500px) {
    h1 {
        margin: 0;
    }
    article {
        margin: 0 1em;
    }
}