@charset "utf-8";

body {
	width: 90%;
	margin: auto;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

@media (max-width: 1224px) {
	#header {
		display: block;
		text-align: center;
		margin-bottom: 10px;
	}
}

@media (min-width: 1225px) {
	#header {
		display: grid;
		grid-template-columns: 400px auto;
		grid-template-rows: 100px 20px;
		grid-template-areas: 
			"logo title"
			"logo tagline";
		margin-bottom: 10px;
	}
}

.logo {
	grid-area: logo;
}

@media (min-width: 1225px) {
	.kektitle {
		font-size: 3em;
		text-align: center;
		line-height: 100px;
		grid-area: title;
	}
}

@media (max-width: 1224px) {
	.kektitle {
		font-size: 2.5em;
		text-align: center;
		line-height: 100px;
		grid-area: title;
	}
}

.tagline {
	font-size: 1em;
	text-align: center;
	grid-area: tagline;
}

#nav {
	width: 100%;
	height: 30px;
	line-height: 30px;
	margin:auto;
	text-align: center;
	color: aliceblue;
	background-color: #006837;
	border-radius: 5px;
}

#nav a {
	color: aliceblue;
}

#content {
	margin-top: 10px;
	column-width: 20em;
	column-count: auto;
}

.content-block {
	border: 2px solid #006837;
	border-radius: 5px;
	margin-bottom: 5px;
	break-inside: avoid-column;
}

.content-block .heading {
	padding: 5px;
	box-sizing: border-box;
	color: aliceblue;
	background-color: #006837;
}

.content-block .date {
	padding: 5px;
	box-sizing: border-box;
	border-bottom-style: solid;
	border-bottom-color: black;
}

.content-block p {
	padding: 5px;
	box-sizing: border-box;
}

.content-area {
	margin-top: 10px;
}

.centered {
	text-align: center;
}

#footer {
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	box-sizing: border-box;
	width: 100%;
	color: aliceblue;
	background-color: #006837;
	border-radius: 5px;
}