@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

/* CSS variables */

:root {
	/* Width of the content on the page */
	--min-content-width: 320px;
	--max-content-width: 800px;

	/* The minimum size of buttons, for example */
	--finger-size: 35px;

	--edge-padding: 15px;

	--font: "Lato";

	--transition-duration: 100ms;

	/*
	 * The colours here are ordered lightest to darkest.
	 * Regular text should use the best contrast, either
	 * color5 on color1 or the opposite for a dark background.
	 * Use color4 on color1 for an alternative foreground
	 * (e.g. links) though it has slightly less contrast.
	 */

	/*
	 * color1: The main background colour, e.g. white
	 * color2: An alternate darker background colour
	 * color3: A bold accent colour
	 * color4: An alternate lighter text colour
	 * color5: The main text colour, e.g. black
	 */

	/* Yellowed background with green and red highlights */
	--color1: #f4f1deff;
	--color2: #f2cc8fff;
	--color3: #5b957eff;
	--color4: #bc4524ff;
	--color5: #3d405bff;

	/* White bg, dark blue-ish grey text, yellow highlights */
	--color5: #242f40ff;
	--color4: #3d405bff;
	--color3: #cca43bff;
	--color2: #e5e5e5ff;
	--color1: #ffffffff;

	--color-text: var(--color5);
	--color-content-bg: var(--color1);
	--color-footer-bg: var(--color5);

	--color-overlay-dark: #00000030;
	--color-overlay-light: #ffffff30;

	--moire-background-size: 400px;
}

* {
	font-family: var(--font);
}

body {
	min-width: var(--min-content-width);
}

/*
 * Generic classes
 */

.content-width {
	max-width: var(--max-content-width);
	position: relative;
	margin: 0 auto;
}

/* Float on the right, unless we are in mobile view */

.float-right-adaptive {
	width: 100%;
	display: block;
}

@media only screen and (width > 700px) {
	.float-right-adaptive {
		float: right;
		width: auto;
		margin-left: var(--edge-padding);
	}
}

section {
	overflow: hidden;
}

.highlight {
	background:
		linear-gradient(var(--color5) 0%, transparent 100%),
		url("/static/img/moire-dark.png") repeat,
		var(--color5);
	color: var(--color1);
	padding: var(--edge-padding);
	border-radius: 10px;
}

.highlight-mid {
	background-color: var(--color2);
	color: var(--color5);
	padding: var(--edge-padding);
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

hr {
	border: none;
	border-bottom: 1px solid var(--color2);
}

/* Flex boxes */

.flex-row {
	display: flex;
	flex-direction: row;
	gap: var(--edge-padding);
}

.flex-column {
	display: flex;
	flex-direction: column;
	gap: var(--edge-padding);
}

.flex {
	flex: 1;
}

/* Alignment */

.align-right {
	text-align: right;
}

.align-centre {
	text-align: center;
}

/* Use alternate colour for links */

a {
	color: var(--color4);
}

/* Make lists less cramped */

ul > li:not(last-child),
ol > li:not(last-child) {
	margin-bottom: 10px;
}

/* Headings */

section > h2::before {
	content: "§ ";
	color: var(--color3);
	font-size: 70%;
}

/* Moire background */

@keyframes background-scroll {
	0% {
		background-position: 0 0px;
	}
	100% {
		background-position: calc(-1 * var(--moire-background-size))
			calc(2 * var(--moire-background-size));
	}
}

.moire-background {
	background:
		url("/static/img/moire-light.png") repeat,
		var(--color-content-bg);
	background-size: var(--moire-background-size) var(--moire-background-size);
}

.moire-background.dark {
	background:
		url("/static/img/moire-dark.png") repeat,
		var(--color-footer-bg);
	background-size: var(--moire-background-size) var(--moire-background-size);
}

.moire-background.animated {
	animation: background-scroll 40s linear infinite;
}

/*
 * The document body
 */

body {
	padding: 0;
	margin: 0;
	background: var(--color-footer-bg);
	color: var(--color-text);
}

header,
#content,
#title {
	background-color: var(--color-content-bg);
}

header {
	position: relative;
	border-bottom: 1px solid var(--color2);
}

header * {
	z-index: 1;
}

header::after {
	z-index: 0;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(rgba(0, 0, 0, 0), var(--color1));
}

#content {
	padding: var(--edge-padding);
	border-bottom: 8px solid var(--color2);
	min-height: 50vh;
}

/*
 * Navigation bar
 */

header {
	padding: var(--edge-padding);
}

#nav-bar {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: 0;
}

#nav-bar > li {
	flex: 1;
	margin: 0;
}

#nav-bar > li > a {
	text-decoration: none;
	color: var(--color-text);
	line-height: var(--finger-size);
	width: 100%;
	display: block;
	border-radius: 5px;
	transition: background-color var(--transition-duration) linear;
}

@media only screen and (width > 600px) {
	#nav-bar {
		flex-direction: row;
		gap: var(--edge-padding);
	}
}

#nav-bar > li.selected > a {
	background-color: var(--color5);
	color: var(--color1);
}

#nav-bar > li:not(.selected) > a:hover {
	background-color: var(--color2);
}

/* Homepage-specific */

#headline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: calc(2 * var(--edge-padding));
	row-gap: var(--edge-padding);
	justify-content: start;
	align-items: center;
	border-bottom: 5px solid var(--color3);
	box-shadow: 0 5px 0 0 var(--color2);
}

#headline > #summary {
	flex: 1;
	min-width: 70%;
	display: flex;
	flex-direction: column;
	row-gap: var(--edge-padding);
}

#headline > #summary > * {
	margin: 0;
}

#headline > #headshot {
	min-width: 150px;
	max-width: 200px;
	width: 30%;
}

#headshot > img {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 2px solid var(--color2);
}

li.icon {
	list-style: none;
}

li.icon::before {
	content: "";
	position: relative;
	top: 0.2em;
	display: inline-block;
	height: 1.2em;
	width: 1.2em;
	margin-left: -20px;
	/* See https://codepen.io/sosuke/pen/Pjoqqp for choosing the filters */
	filter: invert(22%) sepia(33%) saturate(500%) hue-rotate(195deg)
		brightness(98%) contrast(88%);
}

li.icon.light::before {
	filter: invert(90%) sepia(12%) saturate(331%) hue-rotate(349deg)
		brightness(108%) contrast(91%);
}

li.paper::before {
	background-image: url("/static/fa/file-lines.svg");
}

li.talk::before {
	background-image: url("/static/fa/microphone.svg");
}

li.poster::before {
	background-image: url("/static/fa/person-chalkboard.svg");
}

li.workshop::before {
	background-image: url("/static/fa/user-group.svg");
}

li.mail::before {
	background-image: url("/static/fa/envelope.svg");
}

li.git::before {
	background-image: url("/static/fa/code-branch.svg");
}

li.orcid::before {
	background-image: url("/static/fa/id-badge.svg");
}

.card-mid {
	background-color: var(--color2);
	border-radius: 4px;
}

/* Footer */

footer {
	position: relative;
	padding: var(--edge-padding);
	border-top: 8px solid var(--color3);
}

@media only screen and (width > 600px) {
	footer {
		flex-direction: row;
	}
	footer > .right {
		text-align: right;
	}
}

footer * {
	flex: 1;
	color: var(--color-content-bg);
}