@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300&family=Rajdhani:wght@300;400;500;600;700;800&display=swap');

/* @view-transition {
	navigation: auto;
} */

:root {
	--hue1: 40;
}


body {
	font-family: "Rajdhani", sans-serif;
	font-weight: 300;
	background-image:
	url(images/bg.png),
	linear-gradient(90deg,
		hsl(var(--hue1), 100%, 40%) 30%,
		hsl(var(--hue1), 80%, 60%) 100%
	);
	background-blend-mode: soft-light, hard-light;
	background-size: cover, cover;
	background-attachment: fixed, local;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	color: black;
	z-index: 1;
	min-height: 100vh;
	box-sizing: border-box;
	display: grid;
	grid-template-rows: 1fr auto auto;
	max-width: 1000px;
	margin: 0 auto;
}

header, section, footer {
	box-sizing: border-box;
	padding: 0 1em;
	overflow: auto;
}

header {
	letter-spacing: 3px;
	display: grid;
	/* align-content: center; */
	color: rgba(0, 0, 0, 0.7);
}

h1, h2, h3 {
	font-weight: normal;
	line-height: 0.9em;
}

header > div {
	margin: 0 auto;
}

.full-width {
	width: 100%;
}

header > div > h1 {
	font-size: 3.2em;
	margin-block: 1.5rem 0.1em;
	animation: slideUp .6s forwards;
}

header > div > h2 {
	margin-top: 0;
	margin-bottom: 2em;
	font-size: 1.1em;
	animation: slideUp 1.2s forwards;
}
header article > h3 {
	margin-top: 2em;
	margin-bottom: 0;
	font-size: 1em;
	font-weight: 800;
}
header article > p {
	margin-top: 0
}


header > div > p {
	font-size: 1.1rem;
	text-align: left;
}

nav#menu {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.9);
	color: white;
	z-index: 2;
	transform: translateX(100vw);
	transition: transform 0.6s;
}
nav#menu.open {
	transform: none;
}

nav#menu a {
	font-size: 2em;
	/* color: inherit; */
	color: hsl(var(--hue1), 80%, 60%);

	text-shadow: none;
	text-decoration: none;
	padding: 0.25em 0.5em;
}

#menuToggler {
	font-size: 1.2em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: fixed;
	top: 1em;
	right: 1em;
	width: 1.5em;
	height: 1.5em;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 0.25em;
	z-index: 3;
	box-sizing: border-box;
}
#menuToggler div {
	height: 0.2em;
	width: 100%;
	background-color: white;
	transition: 0.2s;
}
nav#menu.open + #menuToggler div:nth-of-type(1) {
	transform: translateY(0.4em) rotate(45deg);
}
nav#menu.open + #menuToggler div:nth-of-type(2) {
	filter: opacity(0);
}
nav#menu.open + #menuToggler div:nth-of-type(3) {
	transform: translateY(-0.4em) rotate(-45deg);
}

.mug {
	border-radius: 50%;
	shape-outside: circle();
	width: 10em;
	margin: 1.25em;
}
.mug.flt {
	float: left;
}

.contact {
	border-radius: 50%;
	max-width: 12em;
	margin-top: 1.5rem;
}
.row {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

main {
}

p {
	font-family: "Merriweather", serif;
	letter-spacing: 0px;
	line-height: 1.5em;
}

p a {
	color: inherit;
}

p a:hover {
	text-decoration: none;
	color: black;
}

footer {
	font-family: "Merriweather", serif;
	font-size: 0.7em;
	padding: 1rem;
	text-align: right;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	flex-wrap: wrap;
}

footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}


footer nav a {
	color: inherit;
}

.copyright {
	flex-grow: 1;
	text-align: right;
}

header > section {
	flex-basis: 50%;
}

section.slideshow {
	display: grid;
	align-self: baseline;
	grid-template-rows: 1fr auto;
	box-sizing: border-box;
	margin-top: 1.5rem;
}

section.slideshow article {
	grid-column: 1;
	grid-row: 1;
	opacity: 0;
	text-align: center;
}
section.slideshow article.active {
	animation: fadeIn 1.8s forwards;
}

section.slideshow article h2 {
	margin-top: 0;
}

section.slideshow article img {
	background-color: hsl(var(--hue1), 100%, 30%);
	background-blend-mode: soft-light;
	background-position: center center;
	max-width: 100%;
	max-height: 450px;
	object-fit: contain;
	padding: 0.5em;
	border-radius: 3px;
	box-sizing: border-box;
}

ul.publications {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	li {
		font-weight: 400;
		padding: 1rem 2rem;
		backdrop-filter: brightness(1.25) blur(15px);
		/* background: white; */
	
		border-radius: 3px;
		strong {
			font-weight: 500;
		}
		a {
			color: inherit;
			text-decoration: none;
			&:hover {
				text-decoration: underline;
			}
		}
	}
}

.circles {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.circles .circle {
	border: none;
	background-color: hsla(0, 0%, 0%, 0.2);
	aspect-ratio: 1;
	width: 1.5em;
	border-radius: 1em;
}

.circles .circle.active {
	background-color: hsla(0, 0%, 100%, 0.2);
}

@keyframes slideUp {
	0% {
		transform: scale(0);
		filter: opacity(0) blur(0.25em);
	}
	100% {
		transform: none;
		filter: none;
	}
}

@keyframes fadeIn {
	100% {
		opacity: 1;
	}
}
@keyframes fadeOut {
	100% {
		opacity: 0;
	}
}

@media screen and (hover: hover) {
	nav#menu a {
		transition: background-color 0.4s;
	}
	nav#menu a:hover {
		background-color: rgba(255, 255, 255, 0.1)
	}
}

@media screen and (min-width: 750px) {
	p {
		padding: 0;
	}

	nav#menu {
		font-size: 1.2em;
		transform: none;
		position: static;
		/* top: 0; */
		flex-direction: row;
		height: auto;
		/* flex-basis: 100%; */
		border-bottom-left-radius: 0.25ch;
		border-bottom-right-radius: 0.25ch;
	}
	header {
		/* margin-top: 5vh; */
		flex-wrap: wrap;
	}
	nav#menu a {
		font-size: 1.2em;
	}
	#menuToggler {
		display: none;
	}
}

@media screen and (min-width: 850px) {
	body {
		font-size: 1.2em;
	}
	header > div > h2 {
		margin-bottom: 1em;
	}
	section.slideshow article img {
		width: 450px;
		height: 350px;
	}
}

@media screen and (min-width: 1200px) {
	header {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: min-content 1fr;
	}
	nav#menu {
		grid-column: 1/3;
	}
}