@import url("fonts.css");

@import url("footer.css");
@import url("header.css");

@import url("text.css");

:root {
	--primary: #001b2e;
	--secondary: #545163;
	--tertiary: #294c60;

	--header-color: #001b2e;

	--text: #adb6c4;
	--text-hover: #b6f6ff;

	--external-link: #5cafe7;
	--external-link-hover: #82cef9;

	--black: #000;
	--white: #fff;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background-color: var(--primary);
	color: var(--text);
	font-family: "PP Radio Grotesk", "Arial", sans-serif;
	font-size: 1.1rem;
}

::selection {
	background-color: var(--text);
	color: var(--primary);
}

.container {
	padding: 0 16px;
}

article {
	flex-grow: 1;
	margin: 16px 0 32px 0;
}

ul {
	padding-left: 20px;
}

@media screen and (min-width: 800px) {
	.container {
		max-width: 800px;
		margin: 0 auto;
	}

	article {
		margin-top: 32px;
	}
}