*, *:after, *:before {
	box-sizing: border-box;
	border-collapse: collapse;
}

html {
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
	color: #611e1e;
}
body, ul {
	margin: 0;
}

.layout {
	display: grid;
	height: 100vh;
	grid-template-columns: 1fr 250px;
	grid-template-rows: 2fr 40fr 1fr;
	max-width: 1000px;
	margin: 0 auto 0 auto;

	border: 0px solid #611e1e;
	border-width: 0 1px;
}


.layout > * {
	border: 0px solid #611e1e;
}

.header {
	grid-column: 1 / span 2;
	border-bottom-width: 1px;
	display: flex;
	justify-content: space-around;
    align-items: center;
}

.header > ul:nth-of-type(1) {
	order: 0;
}

.header > .logo {
	order: 1;
	font-size: 2.5rem;
	font-family: "Sawarabi Mincho";
	/*	font-family: "Kokoro"; */
	/*	font-family: "Hannari"; */
}

.header > ul:nth-of-type(2) {
	order: 2;
}


.header > ul {
	list-style-type: none;
	list-style-position: inside;
	padding: 0;

	height: 100%;
	display: flex;

	align-items: center;
	justify-content: space-evenly;
}

.header > ul > li {
	cursor: pointer;
	padding: 0 1rem;
}

.content {
	font-family: "Delius";
/*	font-family: "Kalam"; */
/*	font-family: "Neucha"; */
/*	font-family: "Aladin"; */
/*	font-family: "Delius Swash Caps"; */
/*	font-family: 'Shadows Into Light'; */

	grid-column: 1 / span 1;

	padding: 1rem;

	border-bottom-width: 1px;
	overflow: auto;
}

.content-footer .tag, .content-footer .category {
	display: inline-block;
	padding: 1px 5px;
	margin: 2px;
	border-radius: 8px;
	border: 1px solid #a15e5e;
	background-color: #fff8f8;
}


.menu {
	grid-column: 2 / span 1;

	border-bottom-width: 1px;
	border-left-width: 1px;
}

.menu > ul {
	list-style-type: none;
	list-style-position: inside;
	padding: 0;

	margin: 1rem;
}

.footer {
	grid-column: 1 / span 2;
	border-bottom-width: 1px;
}