@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap');

:root {
	/* Fonts */
	--primary-font: 'Open Sans', sans-serif;

	/* Colours */
	--black-col: #000;
	--white-col: #fff;
	--primary-col: #0000b5;
	--secondary-col: #000075;
	--light-col: #ececec;
	--dark-col: #211e1e;
	--dark-red-col: #9b0000;
	--light-red-col: #ff9999;
	--dark-green-col: #005c00;
	--light-green-col: #00f000;

	/* Containers */
	--container-xsmall: 540px;
	--container-large: 1024px;
}

/* Element Styles */
html {
	box-sizing: border-box;
	font-size: 10px;
	scroll-behavior: smooth;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	background: var(--light-col);
	color: var(--dark-col);
	font-family: var(--primary-font);
	font-size: 1.6rem;
	line-height: 1.2;
}

a {
	text-decoration: none;
}
/* Element Styles End */

/* Utilities Styles */
/* === Colours === */
.text-col-primary {
	color: var(--primary-col);
}

/* === Spacing === */
.my-5 {
	margin: 20px 0;
}

.mt-5 {
	margin-top: 20px;
}

.mb-5 {
	margin-bottom: 20px;
}

/* === Font sizes === */
.fs-26 {
	font-size: 2.6rem;
}

.fs-32 {
	font-size: 3.2rem;
}

.fs-40 {
	font-size: 4rem;
}

/* === Font weights === */
.fw-bold {
	font-weight: 700;
}

.fw-med {
	font-weight: 500;
}

/* === MISC === */
.container {
	max-width: var(--container-large);
	margin: 0 auto;
	padding: 0 20px;
}

.text-link {
	color: var(--secondary-col);
	text-decoration: underline;
}
/* Utilities Styles End */

/* Header Block */
.header__nav-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.header__nav-list-link {
	color: var(--secondary-col);
}
/* Header Block End */

@media (min-width: 768px) {
	.fs-32-md {
		font-size: 3.2rem;
	}

	.fs-40-md {
		font-size: 4rem;
	}

	.header__nav-list {
		flex-direction: row;
	}
}

@media (min-width: 1024px) {
	.fs-36-lg {
		font-size: 3.6rem;
	}

	.fs-48-lg {
		font-size: 4.8rem;
	}
}