body {
	background-color: #F2F2F2;
	font-family: Futura, sans-serif;
	font-size: 12pt;
}

h1 {
	font-size: 16pt;
	margin-bottom: 0px;
}

a {
	color: black;
	text-decoration: underline;
	text-underline-offset: 4px;
}

h1 a {
	text-decoration: none;
}

.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}

#current_page {
	color: white;
	background-color: black;
	text-decoration: none;
}

#sidebar {
	position: sticky;
	top: 0;

	background-color: rgba(242, 242, 242, 1);

	border-bottom: 1px solid black;
	padding-bottom: 16px;
	margin-bottom: 16px;
}

#sidebar>h1 {
	text-align: center;
}

.subtitle {
	font-size: 10pt;
	text-align: center;
}

#nav_links {
	text-align: center;

	display: flex;
	flex-flow: wrap;
}

.nav_link {
	padding-bottom: 8px;
	width: 33%;
}

.nav_link.last{
	width: 100%;
}

#content {
	font-size: 14pt;
	column-gap: 2%;
}

.block {
	padding-right: 16px;
	padding-left: 16px;
	padding-bottom: 32px;
	padding-top: 16px;

	margin-bottom: 48px;
	
	box-sizing: border-box;
	width: 100%;

	border-radius: 32px;
	border: 1px solid #ccc;
	box-shadow: 20px 20px 20px #ddd;
}

.block_halfW {
	aspect-ratio : 1/1;
	box-shadow: 0px 20px 20px #ddd;
}

.block_fullW {
	aspect-ratio : 1/1;
}

.block_image {
	width: 100%;
	aspect-ratio: 1/1;
	background-size: contain;
	margin-bottom: 16px;
}

#portfolioimg_65x24 { background-image: url('portfolio-assets/65x24.avif'); }
#portfolioimg_trichromy { background-image: url('portfolio-assets/trichromy.avif'); }
#portfolioimg_tools { background-image: url('portfolio-assets/tools.avif'); }

.read_more {
	padding-top: 16px;
}

#work_intro {
	text-align: center;
}

.section {
	margin-bottom: 48px;
}

.section_lead_image {
	text-align: center;
}

.section_lead_image img {
	width: 30%;
}

.section_separator {
	text-align: center;
	font-size: 24pt;
	padding-top: 12pt;
	padding-bottom: 24pt;
}

.gallery {
	width: 100%;
}

.gallery_3img img {
	width: 49%;
}

.gallery_2img img {
 	width: 49%;
}

.appstore_badge {
	text-align: center;
}
.appstore_badge img {
	width: 200px;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: black;
		color: #F2F2F2;
	}

	a {
		color: #F2F2F2;
	}

	#current_page {
		background-color: white;
		color: black;
	}

	#sidebar {
		background-color: black;
		border-bottom: 1px solid white;

		background-color: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(32px);
		-webkit-backdrop-filter: blur(32px);

	}

	.invertible {
		filter: invert();
	}

	.block {
		box-shadow: none;
		border: 1px solid #444;
	}
}


@media (min-width:800px)  {
	#main {
		display: flex;
	}

	#sidebar {
		width: 300px;
		padding-right: 36px;

		height: 350px;
		border-bottom: 0px;

		background-color: rgba(242, 242, 242, 0.6);

		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);

		mask: linear-gradient(black, black, transparent);
	}

	#sidebar h1 { text-align: right; }
	.subtitle { text-align: right; }
	.nav_link {
		width: 100%;
		text-align: right;
		padding-bottom: 0px;
	}

	#content {
		padding-top: 16px;
		width: 800px;
		margin-right: auto;
	}

	.block_fullW { aspect-ratio: 2/1; }
	.block_halfW { width: 49%; }
	.block_fullW>.block_image { aspect-ratio: 2/1; }

	.gallery { margin-bottom: 16px; }
	.gallery_3img img { width: 32%; }

	#work_intro {
		text-align: left;
		height: 150px;
		padding-top: 85px;
	}
	
	#portfolioimg_trichromy { background-image: url('portfolio-assets/trichromy_full.avif'); }
	#portfolioimg_65x24 { background-image: url('portfolio-assets/65x24_full.avif'); }
	#portfolioimg_noize { background-image: url('portfolio-assets/noize_full.avif'); }

	.section_lead_image {
		z-index: -1;
		width: 300px;
		position: relative;
		left: -220px;
		margin-bottom: -100px;
	}

	.about-full-offset {
		margin-top: 105px;
	}

	.contact-full-offset {
		margin-top: 145px;
	}

	.portfolio-full-offset {
		margin-top: 65px;
	}
}

@media (min-width:800px) and (prefers-color-scheme: dark) {
	#sidebar {
		background-color: rgba(0, 0, 0, 0.3);
	}
}