@import url('https://fonts.googleapis.com/css2?family=Domine:wght@600&family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap');

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

html {
	--size-max: 1100px;
	--figure-max-width: 800px;
	--table-max-width: 800px;
	--font-sans: Open Sans, sans-serif;
	--font-serif: Domine, serif;
	--font-mono: Roberto Mono, monospace;
	--font-size-body: var(--font-size-1);
	--font-size-h1: var(--font-size-5);
	--font-size-h2: var(--font-size-4);
	--font-size-h3: var(--font-size-3);
	--font-size-h4: var(--font-size-2);
	--brand-light: var(--indigo-9);
	--text-1-light: var(--stone-10);
	--text-2-light: var(--stone-8);
	--surface-highlight-light: var(--indigo-0);
	--surface-00-light: #FFF;
	--surface-0-light: var(--stone-0);
	--surface-1-light: var(--stone-1);
	--surface-2-light: var(--stone-2);
	--surface-3-light: var(--stone-3);
	--surface-4-light: var(--stone-4);
	--surface-5-light: var(--stone-5);
	--brand-dark: var(--indigo-3);
  --text-1-dark: var(--stone-3);
  --text-2-dark: var(--stone-5);
	--surface-highlight-dark: var(--cyan-1);
	--surface-00-dark: var(--stone-12);
	--surface-0-dark: var(--stone-11);
  --surface-1-dark: var(--stone-10);
  --surface-2-dark: var(--stone-9);
  --surface-3-dark: var(--stone-8);
  --surface-4-dark: var(--stone-7);
	--surface-4-dark: var(--stone-6);
	--shadow: 0 1px 2px -1px hsl(220 40% 2% /calc(25% + 9%));
	--icon-external-link: url('data:image/svg+xml,<svg\ xmlns=\"http://www.w3.org/2000/svg\"\ viewBox=\"0\ 0\ 20\ 20\"><g\ style=\"stroke:rgb\(35,82,124\);stroke-width:1\"><line\ x1=\"5\"\ y1=\"5\"\ x2=\"5\"\ y2=\"14\"\ /><line\ x1=\"14\"\ y1=\"9\"\ x2=\"14\"\ y2=\"14\"\ /><line\ x1=\"5\"\ y1=\"14\"\ x2=\"14\"\ y2=\"14\"\ /><line\ x1=\"5\"\ y1=\"5\"\ x2=\"9\"\ y2=\"5\"\ \ /><line\ x1=\"10\"\ y1=\"2\"\ x2=\"17\"\ y2=\"2\"\ /><line\ x1=\"17\"\ y1=\"2\"\ x2=\"17\"\ y2=\"9\"\ /><line\ x1=\"10\"\ y1=\"9\"\ x2=\"17\"\ y2=\"2\"\ style=\"stroke-width:1.5\"\ /></g></svg>');
}

/* tablet definitions */
@media screen and (max-width: 869px) {
	html {
		--size-max: 100%;
		--figure-max-width: 100%;
		--table-max-width: 100%;
		--font-size-body: var(--font-size-1);
		--font-size-h1: var(--font-size-3);
		--font-size-h2: var(--font-size-2);
		--font-size-h3: var(--font-size-2);
		--font-size-h4: var(--font-size-2);
	}
}

/* mobile definitions */
@media screen and (max-width: 480px) {
	html {
		--size-max: 100%;
		--figure-max-width: 100%;
		--table-max-width: 100%;
		--font-size-body: var(--font-size-fluid-0);
		--font-size-h1: var(--font-size-fluid-2);
		--font-size-h2: var(--font-size-fluid-1);
		--font-size-h3: var(--font-size-fluid-1);
		--font-size-h4: var(--font-size-fluid-1);
	}
}


/* light theme by default */
:root {
  --brand: var(--brand-light);
  --text-1: var(--text-1-light);
  --text-2: var(--text-2-light);
	--surface-highlight: var(--surface-highlight-light);
	--surface-00: var(--surface-00-light);
	--surface-0: var(--surface-0-light);
  --surface-1: var(--surface-1-light);
  --surface-2: var(--surface-2-light);
  --surface-3: var(--surface-3-light);
  --surface-4: var(--surface-4-light);
	--surface-5: var(--surface-5-light);
}

body {
	background-color: var(--gray-0);
	color: var(--gray-10);
	font-family: var(--font-sans);
	margin: 0; padding: 0;
}

header {
	background: linear-gradient(0deg, var(--blue-6) 0%,var(--blue-9) 100%);
	color: var(--gray-0);
	padding: 0 0 0.5em 0;
	text-align: center;
	width: 100%;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
	position: sticky;
	top: 0;
	h1 {
		text-align: left;
	}
	p {
		text-align: right;
	}
	a {
		color: white;
		text-decoration: none;
	}
}

#info-bar {
	background: var(--yellow-5); 
	color: var(--gray-10);
	text-align: center;
	padding: 10px;
	font-size: var(--font-size-1);
	font-weight: bold;
	width: 100%;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

main, .container {
	width: 100%;
	max-width: 1100px;
	margin: auto;
	padding: 0 1em;
	.breadcrumbs {
		padding: 0.5em 0;
	}
}

.cols {
	display: grid; 
	grid-template-columns: 50% 50%;
	grid-gap: 10px;	
	align-items: center;
}

/* default typography */
body, p, li {
	font-family: var(--font-sans);
	font-weight: var(--font-weight-4);
	font-size: var(--font-size-body);
	line-height: var(--font-lineheight-4);
}

h1,h2,h3,h4,h5 {
	font-family: var(--font-serif);
	font-weight: var(--font-weight-6);
	line-height: var(--font-lineheight-1);
}

h1 { 
	font-size: var(--font-size-h1);
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
}

h4, h5 {
	font-size: var(--font-size-h4);
}

li p {
	margin: 0;
}

a:not(h1 a,.breadcrumbs a) {
	background: var(--blue-11); 
	color: var(--gray-0);
	padding: 8px 12px;
	text-decoration: none;
	border-radius: 5px;
	display: inline-block;
	font-weight: bold;
	&:hover {
		background: var(--blue-10) 
	}	
}


@media screen and (max-width: 480px) {
	
	
}