/* ============================================ */
/* FONTS										*/
/* ============================================ */

	@font-face {
		font-family: "Source Sans 3";
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src:
			local("Source Sans 3 Regular"),
			local("SourceSans3-Regular"),
			url("/fonts/source-sans-3-400.woff2") format("woff2");
			}

	@font-face {
		font-family: "Source Sans 3";
		font-style: normal;
		font-weight: 500;
		font-display: swap;
		src:
			local("Source Sans 3 Medium"),
			local("SourceSans3-Medium"),
			url("/fonts/source-sans-3-500.woff2") format("woff2");
		}

	@font-face {
		font-family: "Source Sans 3";
		font-style: normal;
		font-weight: 600;
		font-display: swap;
		src:
			local("Source Sans 3 SemiBold"),
			local("SourceSans3-SemiBold"),
			local("Source Sans 3 Semibold"),
			local("SourceSans3-Semibold"),
			url("/fonts/source-sans-3-600.woff2") format("woff2");
		}

	@font-face {
		font-family: "Source Sans 3";
		font-style: normal;
		font-weight: 700;
		font-display: swap;
		src:
			local("Source Sans 3 Bold"),
			local("SourceSans3-Bold"),
			url("/fonts/source-sans-3-700.woff2") format("woff2");
		}

	@font-face {
		font-family: "Roboto Slab";
		font-style: normal;
		font-weight: 700;
		font-display: swap;
		src:
			local("Roboto Slab Bold"),
			local("RobotoSlab-Bold"),
			url("/fonts/roboto-slab-700.woff2") format("woff2");
		}

	@font-face {
		font-family: "Source Code Pro";
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src:
			local("Source Code Pro Regular"),
			local("SourceCodePro-Regular"),
			url("/fonts/source-code-pro-400.woff2") format("woff2");
		}

/* ============================================	*/
/*	VARIABLES									*/
/* ============================================	*/

	:root {
		color-scheme: light dark;

		--color-foreground: light-dark(#333333, #333333);
		--color-background: light-dark(#FFFFFF, #FFFFFF);

		--color-ui-lightest: light-dark(#9FA7AC, #9FA7AC);
		--color-ui-lighter: light-dark(#848E95, #848E95);
		--color-ui-neutral: light-dark(#6A747B, #6A747B);
		--color-ui-darker: light-dark(#535A60, #535A60);
		--color-ui-darkest: light-dark(#3B4144, #3B4144);

		--color-accent-lightest: light-dark(#DE8080, #DE8080);
		--color-accent-lighter: light-dark(#C47171, #C47171);
		--color-accent-neutral: light-dark(#AA6262, #AA6262);
		--color-accent-darker: light-dark(#915454, #915454);
		--color-accent-darkest: light-dark(#814B4B, #814B4B);

		--color-secondary-lightest: light-dark(#F3F5F8, #F3F5F8);
		--color-secondary-lighter: light-dark(#E7EBEF, #E7EBEF);
		--color-secondary-neutral: light-dark(#C7D1D9, #C7D1D9);
		--color-secondary-darker: light-dark(#AAB9C5, #AAB9C5);
		--color-secondary-darkest: light-dark(#8CA0B1, #8CA0B1);

		--font-sans: "Source Sans 3", "Verdana", "Arial", sans-serif;
		--font-serif: "Roboto Slab", "Times New Roman", serif;
		--font-code: "Source Code Pro", "Courier New", monospace;
		}

/* ============================================	*/
/*	ATTRIBUTES									*/
/* ============================================	*/

	[data-theme="light"] { color-scheme: light; }
	[data-theme="dark"]  { color-scheme: dark; }

/* ============================================	*/
/*	GLOBALS										*/
/* ============================================	*/

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

	[hidden] {
		display: none !important;
		}

/* ============================================	*/
/*	BASE CONTAINERS								*/
/* ============================================	*/

	html {
		scroll-behavior: smooth;
		}

	body {
		background: var(--color-secondary-lighter);
		color: var(--color-foreground);
		font: 400 1.125rem/1.6 var(--font-sans);
		}

/* ============================================	*/
/*	ELEMENTS									*/
/* ============================================	*/

	p {
		line-height: 1.6;
		margin: 0 0 1.5rem 0;
		}

/* ============================================	*/
/*	SITE HEADER									*/
/* ============================================	*/

		body > header {
			background-color: var(--color-ui-neutral);
			color: var(--color-background);
			}

			body > header .container {
				display: flex;
				align-items: center;
				}

		.logo {

			}