@import url('https://waps.l3s.uni-hannover.de/live/cs_/https://fonts.cdnfonts.com/css/frutiger');

:root {
	--common-gap-size: 15px;
	--small-gap-size: 8px;
	--shiny-button-background: rgba(76, 187, 23, 0.8);
	--shiny-button-background-shade: rgba(53, 131, 16, 0.72);
	--shiny-button-foreground: rgba(18, 29, 13, 0.8);
	--shiny-button-lime-background: rgba(237, 255, 33, 0.8);
	--shiny-button-lime-background-shade: rgba(185, 202, 0, 0.72);
	--shiny-button-lime-foreground: rgba(41, 43, 14, 0.8);
	--shiny-block-border: rgba(0, 191, 255, 0.5);
	--shiny-block-background-start: rgba(2, 104, 177, 0.36);
	--shiny-block-background-end: rgba(4, 148, 252, 0.36);
	--shiny-block-highlight: radial-gradient(farthest-corner at bottom center, rgba(255, 255, 255, 0.35), transparent);
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
	font-family: Frutiger;
}

body {
	display: grid;
	width: 100%;
	background: linear-gradient(
		#C2E2BA,
		#76CCA4,
		#6FBC79,
		#8DAF7B
	);
	background-attachment: fixed;
}

body:after {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	content: "";
	background: linear-gradient(#FFFFFF5B 0.175vh, transparent 0px);
	background-size: 100% 0.7vh;
}

header {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	padding: 10px 25px;
	background: linear-gradient(to bottom, rgba(58, 204, 217, 0.8), rgba(56, 154, 173, 0.8) 49%, rgba(0, 105, 140, 0.8) 51%, rgba(0, 47, 114, 0.8));	
	box-shadow:
		inset 0px 2px 1px rgba(214, 255, 244, 0.3),
		inset 0px -2px 1px rgba(2, 33, 124, 0.4),
		0px 10px 15px rgba(0, 0, 0, 0.4);
}

header > p {
	font-size: 2rem;
	font-weight: bold;
}

nav {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
}

footer {
	margin: 0px 0.5em;
	border-width: 1px 1px 0px 1px;
	border-radius: 5px 5px 0px 0px;
	font-size: 0.75rem;
}

a {
	text-decoration: none;
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 100px auto;
	gap: 5px;
	width: 100%;
}

.tile-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

h2 {
	font-weight: normal;
	font-size: 32px;
}

h3 {
	font-weight: normal;
	font-size: 20px;
}

blockquote {
	position: relative;
	padding: 0.5rem 0;
	padding-left: 1.5rem;
	margin: 1rem 0;
}

blockquote::before {
	content: '';
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
}

pre, .shiny-block-no-resize, .shiny-block, blockquote {
	padding: 25px;
	border: 1px solid var(--shiny-block-border);
	border-radius: 15px;
	box-shadow:
		inset 0px 2px 1px rgba(214, 255, 244, 0.6),
		inset 0px -2px 1px rgba(2, 33, 124, 0.3),
		0px 4px 4px rgba(0, 0, 0, 0.4);
	background: var(--shiny-block-highlight), linear-gradient(to bottom, var(--shiny-block-background-start), var(--shiny-block-background-end));
	backdrop-filter: blur(1px);
}

pre, .shiny-block {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

code {
	font-family: monospace;
}

.shiny-button {
	position: relative;
	padding: 0.5em 1em;
	border: 1px solid var(--shiny-button-background);
	border-radius: 3em;
	text-wrap: nowrap;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
	background: var(--shiny-block-highlight), linear-gradient(to bottom, var(--shiny-button-background-shade), var(--shiny-button-background));
	color: var(--shiny-button-foreground);
	text-shadow: 0 2px 0.5em #0003;
	cursor: pointer;
	transition: all 300ms;
}

.shiny-button > p {
	position: relative;
	z-index: 1;
}

.shiny-button::after {
	position: absolute;
	top: 4%;
	left: 0px;
	width: calc(100% - 1em);
	height: 40%;
	margin: 0px 0.5em;
	content: "";
	border-radius: 3em;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1));
	transition: background 400ms;
}

.shiny-button:hover {
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

.shiny-button:active {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.shiny-button-lime {
	--shiny-button-background: var(--shiny-button-lime-background);
	--shiny-button-background-shade: var(--shiny-button-lime-background-shade);
	--shiny-button-foreground: var(--shiny-button-lime-foreground);
}

.horizontal-list {
	display: flex;
	justify-content: center;
	gap: var(--common-gap-size);
}

.glossy-tile {
	--yes-1: rgba(237, 255, 33, 0.95);
	--yes-2: rgba(185, 202, 0, 0.95);
	--yes-3: rgba(41, 43, 14, 0.8);

	display: block;
	cursor: pointer;
	padding: 28px 20px;
	position: relative;
	user-select: none;
	border-radius: 15px;
	background:
		radial-gradient(ellipse 140% 70% at center 20%, rgba(255, 255, 255, 0.4) 50%, transparent 51%),
		radial-gradient(circle at center top, var(--yes-2) 50%, var(--yes-1) 100%);
	box-shadow:
		inset 0px 2px 1px rgba(244, 255, 214, 0.6),
		inset 0px -2px 1px rgba(2, 56, 15, 0.3),
		0px 4px 4px rgba(0, 0, 0, 0.4);
}

.navigation-button, #navigation-button {
	display: none;
}

@media (max-width: 720px) or (orientation: portrait) {
	header {
		justify-content: center;
	}

	.tile-container {
		display: flex;
		flex-direction: column;
	}
	
	.navigation-button {
		display: block;
	}

	.navigation-icon, .navigation-icon::before, .navigation-icon::after {
		display: block;
		background-color: rgba(0, 0, 0, 0.8);
		box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
		z-index: 1;
	}

	.navigation-icon {
		position: relative;
		height: 2px;
		width: 18px;
	}

	.navigation-icon::before, .navigation-icon::after {
		content: "";
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
	}

	.navigation-icon::before {
		top: -5px;
	}

	.navigation-icon::after {
		top: 5px;
	}

	nav {
		display: none;
		position: relative;
		top: 100%;
		z-index: 1;
	}

	nav a {
		margin: 0;
		display: block;
		padding: 0px 20px;
	}

	#navigation-button:checked + nav {
		position: absolute;
		justify-content: center;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		padding: 25px;
		border: 1px solid var(--shiny-block-border);
		border-radius: 0px 0px 15px 15px;
		box-shadow:
			inset 0px 2px 1px rgba(214, 255, 244, 0.6),
			inset 0px -2px 1px rgba(2, 33, 124, 0.3),
			0px 4px 4px rgba(0, 0, 0, 0.4);
		background: var(--shiny-block-highlight), linear-gradient(to bottom, var(--shiny-block-background-start), var(--shiny-block-background-end));
		backdrop-filter: blur(3px);
	}
}