/* GLOBAL STYLES */
@import url('https://fonts.googleapis.com/css2?family=Autour+One&display=swap'); /* "Autour One" */
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap'); /* "Caveat Brush" */
@import url('https://fonts.googleapis.com/css2?family=Playwrite+DE+Grund:wght@100..400&display=swap'); /* "Playwrite DE Grund" */

:root {
	--background: #2951a6;
	--shadow: #2525af66;
	--navi-bg: var(--background);
	--navi-current: #add4eb;
	--accent: #94e3fe;
	--text: #fff;
	--links: #b08ceb;
	--gradient1: linear-gradient(#2365b1, #3059b1);
	--gradient2: linear-gradient(#1c80997e, #3059b1);
	--block-padding: 1rem;
	--wrapper-width: 1000px;
	--border-radius: 2rem;
}

/* Structure */
body {
	background-color: var(--background);
	background: repeat url(images/bg1.png);
	margin: 0
}
.wrapper {
	width: 80%;
	background-color: var(--background);
	border-radius: var(--border-radius);
	max-width: 1000px;
	margin: 0 auto;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.hero {
	margin: 0;
	padding: 0 0 2rem;
}
.hero > img {
	background-color: var(--background);
	width: 100%;
}
.span-image {
	background-color: var(--background);
	display: flex;
	margin: 1rem auto;
}

/* Global text formatting */
body {
	color: var(--text);
	font-family: "Playwrite DE Grund", Ubuntu, Arial, sans-serif;
	font-weight: 400;
	font-size: 135%;
	text-shadow: 0 0 15px var(--shadow);
	line-height: 1.4em;
	padding-bottom: 4rem;
}
a {
	text-decoration: none;
	color: var(--links);
}
h1, h2, h3 {
	font-family: "Caveat Brush";
	font-size: 250%;
	font-weight: 200;
	line-height: 1.4em;
	margin: 0;
}
h1 {
	font-size: 300%;
}
h2 {
	font-size: 240%;
}
h3 {
	font-size: 180%;
}

.hero {
	font-size: 120%;
	line-height: 1.4em;
}
.callout {
	border-radius: var(--border-radius);
	/* border: 0.15rem solid lightblue; */
	padding: var(--block-padding);
	min-height: 4rem;
	display: flex;
	flex-direction: column;
	background: var(--gradient2)
}

.subtext {
	font-size: 66%;
	color: lightgray;
}

/* Global object formatting */
.hero-image img, .span-image img {
	width: 100%;
	max-height: 100%;
	max-width: calc(var(--wrapper-width) * 1.3);
	margin: 0 auto;
	border-radius: var(--border-radius);
}

.thumb-small, .thumb-mid, .thumb-small-right, .thumb-mid-right {
	border-radius: var(--border-radius);
	margin: var(--block-padding);
}
.thumb-small, .thumb-small-right {
	max-width: 200px;
}
.thumb-mid, .thumb-mid-right {
	max-width: 400px;
}
.thumb-mid-right, .thumb-small-right {
	display: inline;
	float: right;
	position: static;
	margin: 1rem;
}

.avatar {
	max-width: 150px;
	border-radius: 75px;
}
.emoji {
	font-size: 80%;
	vertical-align: top;
}

/* Flexbox styles */
.grid-1col, .grid-2col, .grid-3col {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	max-width: inherit;
	align-items: baseline;
}
.grid-1col, .grid-3col {
	justify-content: center;
}
.grid-2col {
	justify-content: left;
}
.grid-2col > .grid-item {
	border-radius: var(--border-radius);
	border: 0.5rem solid var(--background);
	padding: var(--block-padding);
	width: 28rem;
	min-height: 4rem;
	display: flex;
	flex-direction: column;
	font-size: 80%;
	background: var(--gradient1)
}
.grid-3col > .grid-item {
	border-radius: var(--border-radius);
	border: 0.5rem solid var(--background);
	padding: var(--block-padding);
	width: 28rem;
	min-height: 4rem;
	display: flex;
	flex-direction: column;
	background: var(--gradient1)
}

/* NAVBAR */

.navi {
	position: sticky;
	top: 0px;
	margin: 0 0 2rem;
	background: var(--navi-bg);
	display: flex;
	justify-content: center;
	box-shadow: 0 0 15px var(--shadow);
}
.navi #navi-links {
	display: flex;
	background-color: var(--background);
}
.navi a {
	color: white;
	padding: 14px 1.5rem;
	text-decoration: none;
	font-size: large;
	font-weight: bold;
	display: block;
}
/* .navi a:hover {
	background-color: #dfc5e7;
	color: var(--background);
} */
.navi #current {
	color: var(--navi-current);
}
.navi-logo {
	overflow: visible;
	height: 1rem;
}
.navi-logo a {
	padding: 0 2rem 0;
}
.navi img {
	height: 5rem;
	margin: 0;
	overflow: visible;
	/* background-color: var(--navi-bg); */
	border-radius: 50px;
}

/* PAGE-SPECIFIC STYLES */

.timeline-item {
	border: var(--image-border);
	border-radius: 10px;
	display: flex;
	gap: 1em;
	background: var(--gradient2);
	min-height: 32px;
}
.block-timeline > a > .timeline-item {
	transition: var(--box-glow-transition);
	background: var(--gradient3);
}
.block-timeline > a > .timeline-item:hover {
	box-shadow: var(--box-glow);
}

.timeline-item p {
	padding: 0 0.5em;
}