/*	I've tried to annotate this well enough that you can follow my process to make your own 
	responsive two-column flexbox layout, but feel free to email at hi@michaeldarling.uk if 
	you get stuck anywhere! */

/* elements by type */

@font-face {
	/* we embed our own webfonts to reduce reliance on external resources and benefit from HTTP/2 multiplexing
	easily download fonts and generate these statements: https://google-webfonts-helper.herokuapp.com/fonts/ */
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap; /* render text immediately in the fallback font and swap out when available to avoid invisible text */
	src: url('fonts/playfair-display-v21-latin-700.eot');
	src: local(''),
	url('fonts/playfair-display-v21-latin-700.eot?#iefix') format('embedded-opentype'),
	url('fonts/playfair-display-v21-latin-700.woff2') format('woff2'),
	url('fonts/playfair-display-v21-latin-700.woff') format('woff'),
	url('fonts/playfair-display-v21-latin-700.ttf') format('truetype'),
	url('fonts/playfair-display-v21-latin-700.svg#PlayfairDisplay') format('svg');
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('fonts/playfair-display-v21-latin-900.eot');
	src: local(''),
	url('fonts/playfair-display-v21-latin-900.eot?#iefix') format('embedded-opentype'),
	url('fonts/playfair-display-v21-latin-900.woff2') format('woff2'),
	url('fonts/playfair-display-v21-latin-900.woff') format('woff'),
	url('fonts/playfair-display-v21-latin-900.ttf') format('truetype'),
	url('fonts/playfair-display-v21-latin-900.svg#PlayfairDisplay') format('svg');
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/montserrat-v15-latin-regular.eot');
	src: local(''),
	url('fonts/montserrat-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
	url('fonts/montserrat-v15-latin-regular.woff2') format('woff2'),
	url('fonts/montserrat-v15-latin-regular.woff') format('woff'),
	url('fonts/montserrat-v15-latin-regular.ttf') format('truetype'),
	url('fonts/montserrat-v15-latin-regular.svg#Montserrat') format('svg');
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/montserrat-v15-latin-500.eot');
	src: local(''),
	url('fonts/montserrat-v15-latin-500.eot?#iefix') format('embedded-opentype'),
	url('fonts/montserrat-v15-latin-500.woff2') format('woff2'),
	url('fonts/montserrat-v15-latin-500.woff') format('woff'),
	url('fonts/montserrat-v15-latin-500.ttf') format('truetype'),
	url('fonts/montserrat-v15-latin-500.svg#Montserrat') format('svg');
}

@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/montserrat-v15-latin-italic.eot');
	src: local(''),
	url('fonts/montserrat-v15-latin-italic.eot?#iefix') format('embedded-opentype'),
	url('fonts/montserrat-v15-latin-italic.woff2') format('woff2'),
	url('fonts/montserrat-v15-latin-italic.woff') format('woff'),
	url('fonts/montserrat-v15-latin-italic.ttf') format('truetype'),
	url('fonts/montserrat-v15-latin-italic.svg#Montserrat') format('svg');
}

html {
	font-size: 18px;
	height: 100%;
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit; /* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
}

html, body, p, ul, li, h1, h3, h4, h5, h6, button {
	/* reset browser defaults */
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	font-family: "Montserrat", ui-sans-serif, sans-serif;
	font-size: 1rem;
	text-align: left;
	height: 100%;
}

section {
	width: 1280px;
	max-width: 100%;
	margin: 4rem auto 2.5rem;
	padding: 2.5rem;
}

footer {
	padding: 2rem 4rem 1rem 4rem;
	font-size: 0.8rem;
}

h1, h2, h3, button {
	font-family: "Playfair Display", ui-serif, serif;
}

h1 {
	display: inline-block;
	font-size: 5rem;
	line-height: 5rem;
	font-weight: 900;
	box-shadow: inset 0 -2rem 0 0 yellow;
	padding: 0 2rem;
	margin: 0 3% 1rem;
}

h2 {
	font-size: 4rem;
	font-weight: 700;
	line-height: 3.2rem;
	margin: 0;
	padding: 1rem 0 0 3rem;
	border: 0;
}

h3 {
	font-size: 1.5rem;
	font-weight: 700;
	padding-bottom: 1rem;
}

picture {
	height: 100%;
	margin: 0 auto; /* centre horizontally where too thin to fit parent edge-to-edge */
}

p {
	text-align: left;
	line-height: 1.4rem;	
	padding-bottom: 1rem;
}

p:nth-last-of-type(1) {
	padding-bottom: 0;
}

a {
	color: #000;
	font-weight: 500;
	text-decoration-thickness: 0.125rem;
	text-underline-offset: 0.025rem;
}

a:hover {
	text-decoration-color: yellow;
	text-decoration-thickness: 0.5rem;
	text-underline-offset: -0.5rem;
	text-decoration-skip-ink: none;
}

header nav {
	margin-top: 4rem;
}

nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}

nav li {
	flex-grow: 1; /* navigation links fill their row */
}

nav a {
	display: block;
	padding: 0.7rem;
	font-family: "Playfair Display", ui-serif, serif;
	font-weight: 700;
	text-decoration: none;
	color: black;
	transition: box-shadow 0.3s;
}

nav a:hover {
	box-shadow: inset 0 -0.25rem 0 0 yellow;
}

@media (max-width: 1024px) {
	nav li {
		flex-basis: 22%; /* max 4 buttons per row, minus a little to fit view button */
	}
}

@media (max-width: 900px) {
	h1 {
		font-size: 4rem;
		line-height: 4rem;
	}
	
	h2 {
		font-size: 3rem;
		line-height: 2.4rem;
		padding-left: 2rem;
	}
	
	header nav {
		margin-top: 3rem;
	}
	
	section {
		margin-top: 1rem;
		padding-left: 2rem;
		padding-right: 2rem;
	}
	
	footer {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media (max-width: 600px) {
	h2 {
		font-size: 2.8rem;
		line-height: 2.3rem;
		padding-left: 1rem;
	}
	
	nav li {
		flex-basis: 33%; /* max 3 buttons per row */
	}
	
	section {
		padding: 1.5rem;
	}
}

@media (max-width: 450px) {
	h1 {
		font-size: 3rem;
		line-height: 3rem;
		margin-left: 8%;
		margin-right: 8%;
	}
	
	section {
		padding: 1rem 0;
	}
}

@media (min-width: 1921px) {
	/* all bets are off now,
	   go in proportion you
	   crazy diamond		*/
	section {
		width: auto;
		margin-left: 16%;
		margin-right: 16%;
	}
	html {
		font-size: 1.88vmin;
	}
}

/* section-specific */

#about {
	text-align: center;
	padding-bottom: 0;
	margin-bottom: 0;
}

#about .section-intro, footer {
	background-color: #eee;
}

#print .section-content, #print .carousel-buttons, nav .print {
	background-color: #FF89D7;
}

#print .carousel-buttons button, #print .icon-circle li:before, #print .circle, .toggle-view a {
	background-color: yellow;
}

#web .section-content, #web .carousel-buttons, nav .web {
	background-color: #70FFB5;
}

#web .carousel-buttons button, #web .icon-circle li:before, #web .circle {
	background-color: #FFA196;
}

#photo .section-content, #photo .carousel-buttons, nav .photo {
	background-color: #D07DFF;
}

#photo .carousel-buttons button, #photo .icon-circle li:before, #photo .circle {
	background-color: #7D70FF;
}

#video .section-content, #video .carousel-buttons, nav .video {
	background-color: #FFCE70;
}

#video .carousel-buttons button, #video .icon-circle li:before, #video .circle {
	background-color: #96C3FF;
}

#software .section-content, #software .carousel-buttons, nav .software {
	background-color: #83D2EB;
}

#software .carousel-buttons button, #software .icon-circle li:before, #software .circle {
	background-color: #EDE147;
}

#hardware .section-content, #hardware .carousel-buttons, nav .hardware {
	background-color: #EB726A;
}

#hardware .carousel-buttons button, #hardware .icon-circle li:before, #hardware .circle {
	background-color: #7975EB;
}

#education .section-content, #education .carousel-buttons, nav .education {
	background-color: #EBE663;
}

#education .carousel-buttons button, #education .icon-circle li:before, #education .circle {
	background-color: #EB8B6A;
}

#other .section-content, #other .carousel-buttons, nav .other {
	background-color: #67E9EB;
}

#other .carousel-buttons button, #other .icon-circle li:before, #other .circle {
	background-color: #BE75EB;
}

#page-footer {
	padding-bottom: 0;
}

/* layout classes */

.section-container {
	overflow: hidden; /* hide inactive slides to left & right */
}

.row {
	flex: 0 0 100%;
	display: flex;
	align-items: flex-start; /* vertical align child columns to top */
	flex-flow: row wrap; /* child columns can stack on multiple lines on small screens */
}

.column {
	display: flex;
	flex-flow: row wrap;
	max-width: 69%; /* just enough to not break column two before the layout stacks */
	justify-content: space-between; /* extend column contents to left & right edges, leaving space between elements */
	overflow: hidden;
}

.column:nth-of-type(1) {
	height: 66vh; /* left-hand content gets fixed height */
}

.column:nth-of-type(2) {
	flex: 1; /* right-hand description extends to fit longest caption when collapsed on mobile (set height: 100% to align top, else centres vertically when collapsed) */
}

.column:nth-of-type(1) img {
	height: 100%; /* prefer to fit entire image height */
	max-width: 100%; /* but fill width if possible */
	object-fit: cover; /* prefer displaying entire image over cropping */
}

.column .full-width {
	flex-basis: 100%; /* extend a column to left & right edges, cropping top & bottom if necessary */
	width: 100%;
}

.grid-item {
	/* 2x2 grid with gaps between elements (apply full-width to .grid-item/img or full-height to .column for 1x2 or 2x1) */
	flex: 0 1 49%;
	height: 49%;
	margin-bottom: 2%;
}

.grid-item img {
	width: 100%; /* in a grid, prefer to fit entire image width */
	max-height: 100%; /* but fill height if possible */
}

.wide-first .grid-item:nth-of-type(1) {
	flex: 1 1 100%; /* apply wide-first to .column to make first image in grid fill entire width */
}

.offset .grid-item {
	flex-basis: 60%; /* offset grid with narrower first & last items */
}

.offset .grid-item:nth-of-type(1), .offset .grid-item:nth-last-of-type(1) {
	flex-basis: 38%;
}

.full-height .grid-item {
	height: 100%;
	margin-bottom: 0;
}

.inner-wide {
	flex: 0 1 74%; /* one image fills entire row height and most of width */
	height: 100%;
	margin-right: 2%;
}

.inner-wide img {
	width: 100%;
}

.inner-2 {
	/* remaining items stack vertically */
	flex: 0 1 24%;
	height: 100%;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
}

.column .inner-2 picture {
	flex: 0 1 49%;
}

.column .inner-2 picture:nth-of-type(1) {
	margin-bottom: 8%; /* leave a vertical gap between remaining items */
}

.column .inner-2 img {
	width: 100%;
}

#video .column:nth-of-type(1) {
	/* video-specific to align top and fit to aspect ratio of placeholder thumbnail */
	align-items: flex-start;
	height: auto;
}

#video .column:nth-of-type(1) img {
	height: auto;
	object-fit: contain;
}

#print .column:nth-of-type(1) {
	height: 55vh; /* shorter row to better fit wider print content */
}

@media (max-width: 1279px) {
	.column, .column.wider {
		/* collapse into one-column layout */
		flex: 1 0 100%;
		max-width: 100%;
	}
	
	.column:nth-of-type(1) {
		height: 55vh; /* shorter rows to fit viewport better on smaller screens */
	}
	
	.column:nth-of-type(2) {
		overflow: visible; /* don't hide content if too tall/wide to fit container */
	}
}

@media only screen and (max-width: 1279px) and (orientation: landscape) {
	/* taller rows on smaller screens in landscape orientation */
	.column:nth-of-type(1) {
		height: 80vh;
	}
	
	#print .column:nth-of-type(1) {
		height: 60vh;
	}
}

/* item classes */

.position-top {
	object-position: top; /* choose where images should be cropped from */
}

.position-bottom {
	object-position: bottom;
}

.position-left {
	object-position: left;
}

.position-right {
	object-position: right;
}

.small {
	font-size: 0.8rem;
	line-height: 1.2rem;
	font-style: italic;
}

.center {
	text-align: center;
}

.section-intro {
	padding: 2rem 4rem;
}

.item-description {
	padding: 1rem 2rem;
}

nav .toggle-view {
	flex-basis: 0; /* min width as padding only */
}

nav .view-carousel {
	display: none; /* default hide view as carousel button */
}

nav .toggle-view a {
	height: 100%;
	padding: 1.36rem; /* dirty hack to square with header buttons at min */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2.25rem;
}

.carousel-buttons {
	/* position carousel buttons outside of each section */
	float: right;
	margin-top: -4rem;
	padding: 1rem;
}

.carousel-buttons button {
	height: 4rem;
	width: 4rem;
	font-size: 3rem;
	font-weight: 900;
}

.carousel-buttons button:nth-of-type(1) {
	margin-right: 1rem; /* gap between carousel buttons */
}

.carousel {
	display: flex;
	flex-flow: row nowrap; /* display carousel slides side-by-side */
	transform: translateX(-100%); /* shift left by 1 slide so last slide is immediately available for navigation */
}

.carousel-transition {
	transition: transform 0.7s ease-in-out;
}

.overlay {
	position: relative; /* allow absolute placement of iframe */
}

.overlay .thumbnail {
	display: block; /* fit everything else to the thumbnail */
}

.overlay .thumbnail-container {
	position: relative;
}

.overlay .duration {
	/* position duration in bottom-right */
	position: absolute;
	z-index: 2;
	right: 0.5rem;
	bottom: 0.5rem;
	padding: 0.2rem 0.4rem;
	background-color: rgba(0, 0, 0, 0.6);
	color: white;
}

.overlay .play-overlay {
	/* dark overlay covers thumbnail completely */
	position: absolute;
	z-index: 1;
	top: 0;
	width: 100%;
	height: 100%;
	/* add play button */
	background: rgba(0, 0, 0, 0.1) url("images/arrow.svg") no-repeat scroll center center / 3rem 3rem;
	transition: background-color 0.7s;
}

.overlay .play-overlay:hover {
	background-color: rgba(0, 0, 0, 0); /* remove dark overlay on hover */
}

.overlay iframe {
	/* iframe covers everything once added */
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
}

/* alternate view */
.view-as-list .section-content .carousel {
	flex-flow: row wrap;
	margin-bottom: -4rem; /* remove margin from last visible row (ignoring css order) */
}

.view-as-list .carousel .row {
	padding-bottom: 4rem;
}

.view-as-list .carousel-buttons, .view-as-list .view-list {
	display: none; /* hide carousel buttons and view as list button */
}

.view-as-list .view-carousel {
	display: list-item; /* show view as carousel button */
}

@media (max-width: 900px) {
	.section-intro {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	
	.carousel-buttons {
		margin-top: -3rem; /* inset carousel buttons slightly to match smaller headings */
	}
}

@media (max-width: 600px) {
	/* move carousel buttons inside section on smallest screens */
	.carousel-buttons {
		margin-top: 0;
		padding: 0 0 1rem 1rem;
	}
	
	.carousel-buttons button {
		height: 3rem;
		width: 3rem;
		font-size: 2rem;
	}
	
	.carousel-buttons button:nth-of-type(1) {
		margin-right: 0;
	}
}

/* accessibility */

@media (prefers-reduced-motion) {
	nav a {
		transition: box-shadow 0s;
	}
	
	.carousel-transition {
		transition: transform 0.01s; /* not quite 0 so transitionend still fires */
	}
	
	.overlay .play-overlay {
		transition: background-color 0s;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background: #111;
	}
	
	#about .section-intro, footer {
		background: #333;
	}
	
	#about .section-intro p, footer p, #about .section-intro a, footer a {
		color: white;
	}
	
	#about .section-intro a:hover, footer a:hover {
		text-decoration-color: #666600;
	}
	
	h1 {
		box-shadow: inset 0 -2rem 0 0 #666600;
	}
	
	h1, h2 {
		color: white;
	}
}

/* icon classes */

.icon-inline {
	/* apply to an img to place inline with text */
	position: relative;
	top: -0.125rem;
	vertical-align: middle;
	width: 1rem;
	height: 1rem;
}

.circle {
	/* optionally give inline icons a circular background */
	border-radius: 50%;
}

.icon-circle {
	list-style: none; /* unstyle lists so we can replace bullets with icons */
	padding-top: 1rem;
	position: relative;
}

.icon-circle li {
	position: relative;
	font-size: 0.8rem;
	padding: 0.4rem 0 0.5rem 2rem; /* some dirty hacks to centre icons nicely with text */
	min-height: 1.5rem;
}

.icon-circle li:before {
	/* add circular background to list icons */
	content: '';
	position: absolute;
	left: 0;
	top: 0.125rem;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
}

.icon-circle .camera:before {
	/* add images to list items */
	background-image: url('symbols/icon_camera.svg');
}

.icon-circle .phone:before {
	background-image: url('symbols/icon_phone.svg');
}

.icon-circle .lens-portrait:before {
	background-image: url('symbols/icon_lens_portrait.svg');
}

.icon-circle .lens-pancake:before {
	background-image: url('symbols/icon_lens_pancake.svg');
}

.icon-circle .lens-zoom:before {
	background-image: url('symbols/icon_lens_zoom.svg');
}

.icon-circle .lens-macro:before {
	background-image: url('symbols/icon_lens_macro.svg');
}

.icon-circle .microphone:before {
	background-image: url('symbols/icon_microphone.svg');
}

.icon-circle .flash:before {
	background-image: url('symbols/icon_flash.svg');
}

.icon-circle .sun:before {
	background-image: url('symbols/icon_sun.svg');
}

.icon-circle .ps:before {
	background-image: url('symbols/icon_ps.svg');
}

.icon-circle .lr:before {
	background-image: url('symbols/icon_lr.svg');
}

.icon-circle .pr:before {
	background-image: url('symbols/icon_pr.svg');
}

.icon-circle .ae:before {
	background-image: url('symbols/icon_ae.svg');
}

.icon-circle .ai:before {
	background-image: url('symbols/icon_ai.svg');
}

.icon-circle .id:before {
	background-image: url('symbols/icon_id.svg');
}

.icon-circle .wp:before {
	background-image: url('symbols/icon_wp.svg');
}

.icon-circle .php:before {
	background-image: url('symbols/icon_php.svg');
}

.icon-circle .python:before {
	background-image: url('symbols/icon_python.svg');
}

.icon-circle .selenium:before {
	background-image: url('symbols/icon_selenium.svg');
}

.icon-circle .odk:before {
	background-image: url('symbols/icon_odk.svg');
}

.icon-circle .r:before {
	background-image: url('symbols/icon_r.svg');
}

.icon-circle .shell:before {
	background-image: url('symbols/icon_shell.svg');
}

.icon-circle .twilio:before {
	background-image: url('symbols/icon_twilio.svg');
}

.icon-circle .bootstrap:before {
	background-image: url('symbols/icon_bootstrap.svg');
}

.icon-circle .mikrotik:before {
	background-image: url('symbols/icon_mikrotik.svg');
}

.icon-circle .xenserver:before {
	background-image: url('symbols/icon_xenserver.svg');
}

.icon-circle .notepad:before {
	background-image: url('symbols/icon_notepad.svg');
}

.icon-circle .globe:before {
	background-image: url('symbols/icon_globe.svg');
}

.icon-circle .mysql:before {
	background-image: url('symbols/icon_mysql.svg');
}

.icon-circle .location:before {
	background-image: url('symbols/icon_location.svg');
}

.icon-circle .xibo:before {
	background-image: url('symbols/icon_xibo.svg');
}

.icon-circle .paper:before {
	background-image: url('symbols/icon_paper.svg');
}

.icon-circle .sqlite:before {
	background-image: url('symbols/icon_sqlite.svg');
}

.icon-circle .github:before {
	background-image: url('symbols/icon_github.svg');
}

.view-list a {
	background-image: url('symbols/icon_view-list.svg');
}

.view-carousel a {
	background-image: url('symbols/icon_view-carousel.svg');
}