@import url('styles/reset.css');
@import url('styles/variables.css');

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

body {
	column-gap: var(--gap-md);
	display: grid;
	font-family: "Fira Code", monospace;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 62.5%;
	grid-template-areas: "nav content";
	grid-template-columns: 3fr 9fr;
	margin: auto;
	padding-top: var(--gap-md);
	max-width: 1200px;
}

body > header {
	border: 2px solid var(--color-bg);
	grid-area: nav;
	height: max-content;
	width: max-content;
}

body > header > .header__title {
	padding: var(--size-md) var(--size-xl);
}

body > header > .header__title {
	background-color: var(--color-bg);
	color: var(--color-on-bg);
}

body > header > .header__title > h1 {
	font-weight: 300;
	margin: 0;
}

main {
	display: flex;
	flex-direction: column;
	grid-area: content;
}

main > .post {
	width: 66%;
}

main > .post > p {
	margin: 0;
}