:root {
	--background-color: #fffffa;
	--main-color: #ec4e20;
	--secondary-color: #7d70ba;
	--tertiary-color: #7d70ba;
	--text-color: #000022;
}

@font-face {
	font-family: "WorkSans";
	src: url("../font/WorkSans.ttf");
	font-weight: 400 800;
	font-style: normal;
}

body {
	width: 100vw;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;

	color: var(--text-color);
	background-color: var(--background-color);

	font-family:
		"WorkSans", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji";
	font-size: 1.5em;
	line-height: 1.8rem;
}

h1 {
	margin-top: 0;

	color: var(--main-color);

	font-size: 2.5rem;
	line-height: 3rem;
}

h2 {
	font-size: 2rem;
	line-height: 2.5rem;
	margin: 1rem 0;
}

a {
	color: var(--text-color);

	font-weight: 800;
}

a:hover {
	color: var(--tertiary-color);
}

main {
	width: 100%;
}

#index-body {
	min-height: 90vh;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
}

#links {
	width: 100%;

	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;

	margin-top: 4rem;
}

#links a {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;

	cursor: pointer;
	color: var(--main-color);
	text-decoration: none;
}

#blog-body {
	height: 100vh;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

#blog-post-list {
	height: 100%;
	margin-top: 2rem;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 2rem;
}

.blog-post-list-header {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
}

.post-body {
	min-height: 100vh;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.post-body > header {
	width: 90vw;

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.post-body > footer {
	margin-top: auto;
}

@media screen and (orientation: portrait) {
	body {
		padding: 0;
		align-items: stretch;
	}

	main {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		padding: 2rem;
		margin: 0;

		min-height: 90vh;

		border-radius: 0;
		box-shadow: none;
	}
}