@import url("./buttons.css");
@import url("./header.css");

:root {
	/* Color palette */
	--gunmetal: #2d3142ff;
	--paynes-gray: #4f5d75ff;
	--silver: #bfc0c0ff;
	--white: #ffffffff;
	--off-white: #fcf6f1;
	--coral: #ef8354ff;
	--success-green: #16a34a;

	/* Semantic color assignments */
	--text: var(--gunmetal);
	--background: var(--off-white);
	--primary: var(--paynes-gray);
	--secondary: var(--silver);
	--accent: var(--coral);
	--success: var(--success-green);
}

body {
	font-family: "Charter", "Bitstream Charter", "Sitka Text", Cambria, serif;
	font-weight: 400;
	margin: 0;
	padding: 2rem;
	line-height: 1.6;
	background: var(--background);
	color: var(--text);
}

h1,
h2,
h3,
h4,
h5 {
	font-family: "Charter", "Bitstream Charter", "Sitka Text", Cambria, serif;
	font-weight: 600;
	line-height: 1.2;
	color: var(--text);
}

html {
	font-size: 100%;
}

/* 16px */

h1 {
	font-size: 4.21rem;
	/* 67.36px */
	margin-top: 0;
}

h2 {
	font-size: 3.158rem;
	/* 50.56px */
}

h3 {
	font-size: 2.369rem;
	/* 37.92px */
}

h4 {
	font-size: 1.777rem;
	/* 28.48px */
}

h5 {
	font-size: 1.333rem;
	/* 21.28px */
}

small {
	font-size: 0.75rem;
	/* 12px */
}

main {
	margin: 0 auto;
	max-width: 48rem;
}