:root {
	--color-red: #ff595e;
	--color-yellow: #ffca3a;
	--color-green: #8ac926;
	--color-blue: #1982c4;
	--color-purple: #6a4c93;
	--color-bcu-blue: #0b377e;
	--color-light-blue: #b2f8fa;
	
	--color-body-bg: #ffffff;
	--color-body: #0c0c0c;
	--color-header-bg: var(--color-bcu-blue);
	--color-header: #f8f8f8;
	--color-footer-bg: #606060;
	--color-footer: white;
	--color-button-bg: var(--color-bcu-blue);
	--color-button-border: var(--color-button-bg); /* Border only for contrast in dark theme. */
	--color-button: white;
	--color-link: var(--color-bcu-blue);
	
	--font-body: 'Rubik', sans-serif;
	--font-heading: 'Montserrat', sans-serif;
	
	--header-max-height: 100px;
	--header-min-height: 50px;
	--header-padding: 20px;
	--section-padding: 10px;
	--footer-padding: 15px;
	--button-margin: 10px;
	--button-padding: 5px 10px;
	--button-corner-radius: 25px;
	
	--ui-transition-duration: 0.2s;
}
@media (prefers-color-scheme: dark) {
	:root {
		--color-body-bg: #333;
		--color-body: white;
		--color-footer-bg: #0c0c0c;
		--color-button-border: #1464bc;
		--color-link: var(--color-light-blue);
	}
}
@media (min-width: 40rem) { /* 640px default */
	:root {
		--section-padding: 15px;
	}
}

body {
	margin: 0;
	border: 0;
	padding: 0;
	
	font-family: var(--font-body);
	background-color: var(--color-body-bg);
	color: var(--color-body);
}


/* ======== General typography ======== */

h1,
h2,
h3 {
	font-family: var(--font-heading);
	font-weight: normal;
}
h1 {
	text-align: center;
	font-weight: bold;
}
h2 {
	font-size: 1.5em;
}

a:any-link {
	color: var(--color-link);
}
a,
button {
	transition: filter var(--ui-transition-duration);
	
	&:active {
		filter: brightness(1.25);
	}
}

table, th, td {
	border: 1px dotted;
	border-collapse: collapse;
	padding: 0.4em;
	text-align: center;
	margin-left: auto;
  	margin-right: auto;
}

button,
a:any-link.link-button {
	display: inline-block;
	margin: var(--button-margin);
	padding: var(--button-padding);
	border: 1px solid var(--color-button-border);
	border-radius: var(--button-corner-radius);
	text-decoration: none;
	text-align: center;
	
	background-color: var(--color-button-bg);
	color: var(--color-button);
}

li {
	margin-bottom: 1em;
}


/* ======== General page layout ======== */
html {
  scroll-padding-top: var(--header-max-height) + 10px;
}
header {
	margin-block-end: var(--header-padding);
	padding: var(--header-padding);
	background-color: var(--color-header-bg);
	color: var(--color-header);
	
	+ header {
		margin-block-start: calc(-1 * var(--header-padding));
	}
}
#header-stripe {
	position: sticky;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding-block: 0;
	
	.logo {
		height: var(--header-max-height);
	}
	h1 {
		font-size: 3rem;
		font-weight: bold;
	}
}

main,
section {
	margin-inline: auto;
	margin-block-end: var(--section-padding);
	padding-inline: var(--section-padding);
	
	h1:first-child,
	h2:first-child,
	h3:first-child {
		margin-block-start: 0;
	}
}
	main {
		max-width: 40rem; /* 640px default */
	}
	section {
		max-width: 80rem; /* 1280px default */
	}

footer {
	padding: var(--footer-padding);
	margin-block-start: var(--footer-padding);
	background-color: var(--color-footer-bg);
	color: var(--color-footer);
	
	a:any-link {
		color: var(--color-light-blue);
	}
}


/* ======== Other page pieces ======== */

figure {
	margin: 0;
}
figcaption {
	text-align: center;
	font-size: smaller;
}

img {
	max-width: 100%;
	object-fit: contain;
}

iframe {
	border: 0 none;
}

.multi-column-row {
	display: flex;
	justify-content: stretch;
	flex-wrap: wrap;
	gap: var(--section-padding);
	
	> * {
		flex-basis: 17.5rem; /* 280px default */
		
		&[columns="1"] {
			flex-grow: 1;
		}
		&[columns="2"] {
			flex-grow: 2;
		}
		&[columns="3"]{
			flex-grow: 3;
		}
		&[columns="4"] {
			flex-grow: 4;
		}
		&[columns="5"] {
			flex-grow: 5;
		}
		&[columns="6"] {
			flex-grow: 6;
		}
	}
}

.featured-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	button,
	a.link-button {
		width: 22rem;
		max-width: calc(100% - (2 * (var(--button-margin))));
		
		big {
			display: block;
		}
		small {
			display: block;
		}
	}
}

.full-width-frame-container {
	display: flex;
	justify-content: center;
	overflow: visible;
	
	iframe {
		width: calc(100vw - (4 * var(--section-padding)));
		max-height: calc(100vh - var(--header-max-height));
		flex-shrink: 0;
	}
}