/* Vars. */
@import "/styles/vars.css";

/* Site-wide. */
@import "/styles/typeography.css";
@import "/styles/armour.css";

/* Pages. */
@import "/styles/hero.css";
@import "/styles/experience.css";
@import "/styles/projects.css";

*:before,
*,
*:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	color: var(--color-Text);
}

body {
	display: flex;
	flex-direction: column;
	height: 100dvh;
	background-color: var(--color-Crust);
}

header,
main,
footer {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
}

main {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	padding: var(--padding-normal);
}

main > section {
	width: 100%;
}

main > section > h1 {
	margin-bottom: 40px;
}