/* Common styles */

nav ul, nav ul li
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

nav ul
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

nav ul li
{
	flex-grow: 0;
	flex-shrink: 0;
}

nav ul li a
{
	display: block;
	padding: 1rem 1.1rem;
	text-decoration: none;
}

nav ul li a, nav ul li a:active, nav ul li a:visited {
	color: #fff;
}


/* Home page styles */

.home
{
	background-color: #000;
	color: #fff;
	text-align: center;
}

.home .background
{
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: -1;
	
	background-image: url(../images/background.jpg);
	background-position: center center;
	background-size: cover;
	
	filter: blur(4px);
	opacity: 0.4;
}

.home .outer, .home .outer .hero
{
	display: flex;
	flex-direction: column;
}

.home .outer
{
	justify-content: start;
	min-height: calc(100vh - 4rem);
}

.home .outer .hero
{
	flex: 1;
	justify-content: center;
}

.home .outer .hero h1 {
	font-size: 4rem;
}

.home .outer .hero p.lead {
	font-size: 2.5rem;
}

.home .outer .hero p:last-child
{
	font-size: 1.25rem;
	margin-top: 5rem;
	margin-bottom: 0;
}


/* Other pages' styles */

body.type-page, .footer {
	background-color: #f7f7f7;
}

body.type-page .outer {
	background-color: #fff;
}

body.type-page nav {
	background-color: #1489e3;
}

.header
{
	background-image: url(../images/background.jpg);
	background-position: center center;
	background-size: cover;
	padding-bottom: 12rem;
}

.page h1
{
	display: inline-block;
	background-color: #95c038;
	padding: 2.5rem 4rem;
	margin: 0;
	
	font-size: 3rem;
	line-height: 3rem;
	
	position: relative;
	top: -4rem;
}

.page h2
{
	margin-top: 4rem;
	margin-bottom: 2rem;
}

.page h3
{
	font-size: 1.1rem;
	font-weight: bold;
	
	margin-top: 3rem;
	margin-bottom: 1rem;
}

.page hr
{
	margin: 4rem 0;
	opacity: 1;
}

.page ul li {
	margin: 1.25rem 0;
}

.page .wrapping-columns
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 3rem;
}

.page .wrapping-columns div
{
	flex: 1;
	min-width: 40%;
}

@media (max-width: 767px)
{
	.page .wrapping-columns div {
		min-width: 80%;
	}
}

.page figure
{
	margin: 4rem 0;
	text-align: center;
}

.page figure figcaption
{
	font-weight: bold;
	margin-top: 2rem;
}

.page figure img {
	max-width: 90%;
}

.page .table-wrapper {
	overflow-x: auto;
}

.page table {
	border-collapse: collapse;
}

.page table th, .page table td
{
	border: 1px solid #ccc;
	padding: 1rem;
}

.page table th {
	background: #ddd;
}

.page .videos
{
	margin-top: 4rem;
	text-align: center;
}

.page .videos iframe
{
	display: inline-block;
	margin: 0.5rem;
	max-width: 90%;
	width: 35rem;
	height: auto;
	aspect-ratio: 16/9;
}

.page .videos iframe.video-large {
	width: 50rem;
}

.page .comparison
{
	margin: 4rem 0;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 3rem;
}

.page .comparison figure
{
	margin: 0;
	width: 50%;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.page .comparison figure .image-wrappper
{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.page .comparison figure .image-wrappper img {
	max-width: 100%;
}

.page .comparison figure figcaption
{
	flex-grow: 0;
	flex-shrink: 0;
	margin-top: 0;
}

.footer
{
	text-align: center;
	margin-top: 4rem;
}

.footer .container {
	padding: 2rem 0;
}

.footer .container p {
	margin: 0;
}

.footer .container p + p {
	margin-top: 1rem;
}

.section-links, .bottom-links
{
	text-align: center;
	margin: 4rem 0;
}

.section-links .buttons
{
	width: 50rem;
	max-width: 90%;
	
	display: inline-flex;
	flex-direction: row;
	justify-content: stretch;
	gap: 1rem;
}

.section-links .buttons a, .bottom-links .buttons a
{
	flex: 1;
	padding: 1rem 0;
}

.bottom-links .buttons a {
	width: 25rem;
}

body.type-page div.page div.content > *:first-child {
	margin-top: 0;
}


/* Project page styles */

.driving-question
{
	background-color: #5dc0e8;
	border-radius: 1rem;
	border-bottom-left-radius: 0;
	text-align: center;
	padding: 2rem 2rem;
}

.driving-question .prefix, .driving-question .question {
	display: block;
}

.driving-question .prefix
{
	font-size: 1.1rem;
	font-weight: bold;
}

.driving-question .question
{
	font-size: 1.25rem;
	margin-top: 0.5rem;
}


/* Presentation page styles */

ul.checkmarks li {
	padding-left: 1rem;
}

ul.checkmarks li::marker {
	content: "✅";
}