:root {
	--main-col-1: #5373AC;
	--main-col-2: #A85F16;
	--main-col-3: #Cf8C55;
	--main-col-4: #D8DC73;
	--main-col-5: #EECE9D;
	--main-col-6: #736A50;
	--col-shadow: #444;

	--col-body: var(--main-col-5);
	--col-body-background: var(--main-col-4);
	--col-a: var(--main-col-4);
	--col-h2: var(--main-col-3);
	--col-h2-over: var(--main-col-6);
	--col-h3: var(--main-col-5);
	--col-h3-over: var(--main-col-6);
	--col-content-background: var(--main-col-2);
	--col-header: var(--main-col-4);
	--col-header-background: var(--main-col-1);
	--col-header-h1: var(--main-col-4);
	--col-header-a-hover: var(--main-col-3);
	--col-header-a-target: var(--main-col-3); /* used in nav.html */
	--col-landing-background: var(--main-col-1);
	--col-footer: var(--main-col-4);
	--col-footer-background: var(--main-col-1);
	--col-footer-a-hover: var(--main-col-3);

	--col-a: #EECE9D;
	--col-b: #EECE9D;
	--col-c: #EECE9D;
	--col-d: #EECE9D;
	--col-e: #EECE9D;
	--col-f: #EECE9D;
	--col-g: #EECE9D;
	--col-h: #EECE9D;
	--col-i: #EECE9D;
	--col-j: #EECE9D;

	@media (width >= 800px) {
		font-size: 22px;
	}

	@media (width < 800px) {
		font-size: 18px;
	}

	@media (width < 400px) {
		font-size: 12px;
	}

	@media (width >= 650px) {
		--header-height: 3rem;
	}

	@media (width < 650px) {
		--header-height: 5.5rem;
	}
}

html {
	scroll-behavior: smooth;
}

body {
	color: var(--col-body);
	background-color: var(--col-body-background);
	margin: 0;
	font-family: Lato, Arial, sans-serif;
	overflow-x: hidden;
}

h2, h3 {
	text-shadow: 1px 1px 1px var(--col-shadow);

	:hover {
		text-shadow: 0 0 10px var(--col-shadow);
	}
}

h2 {
	color: var(--col-h2);
}

h3 {
	color: var(--col-h3);
}

a {
	color: var(--color-a);
	text-decoration: none;
}

img, object {
	box-shadow: 0 0 2px var(--col-shadow);
}

a img:hover {
	box-shadow: 0 0 10px var(--col-shadow);
}

li {
	margin: 1em;
}

object:focus {
	outline: none;
}

#landing {
	background-color: var(--col-landing-background);
	width: 100vw;
	height: 100vh;

	img {
		width: 100%;
		max-height: calc(100vh - var(--header-height)); ;
		object-fit: cover;
		margin-top: var(--landing-margin-top);

		@media (orientation: landscape) {
			object-position: 50% 0;
			margin-top: max(calc((100vh - 67vw) / 2), var(--header-height));
		}

		@media (orientation: portrait) {
			object-position: 50% 75%;
			margin-top: max(calc((100vh - 133vw) / 2), var(--header-height));
		}
	}
}

header {
	color: var(--col-header);
	text-shadow: 1px 1px 2px var(--col-shadow);
	z-index: 3;
	position: fixed;
	top: 0;
	background-color: var(--col-header-background);
	width: 100%;
	height: var(--header-height);

	a:hover {
		color: var(--col-header-a-hover);
	}
}

header h1 {
	/* width = 8rem */
	color: var(--col-header-h1);
	font-size: 2rem;
	margin: auto 0.75rem;

	a {
		vertical-align: middle;
	}

	@media (width >= 650px) {
		float: left;
	}

	@media (width < 650px) {
		text-align: center;
	}
}

nav {
	position: fixed;

	@media (width >= 650px) {
		left: 8.25rem;
		right: 6.25rem;
	}

	@media (width <= 650px) {
		width: 100vw;
	}

	ul {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0;
	}

	li {
		list-style-type: none;
		display: inline-block;
		margin: 0;
	}
}

#lang-switch {
	/* width = 2 * 0.75rem + 2 * 3/2 * 1.5rem = 6rem */
	padding: 0;
	z-index: 10;
	position: fixed;
	top: 0;
	right: 0;

	img {
		height: 1.5rem;
		margin: 0.75rem;
		margin-left: 0;
		box-shadow: 0px 0px 2px var(--col-shadow);
	}

	img:not(.selected) {
		filter: brightness(50%) contrast(50%);
	}
}

#lang-switch:hover {
	filter: drop-shadow(3px 3px 4px var(--col-shadow));
}

footer {
	background-color: var(--col-footer-background);
	color: var(--col-footer);
	text-shadow: 1px 1px 2px var(--col-shadow);
	font-size: 0.8rem;
	padding: 1em 2em;
	text-align: right;

	a {
		color: inherit;
		display: inline-block;
		margin: 0 2em;
		font-weight: bold;
	}

	a:hover {
		color: var(--col-footer-a-hover);
	}
}

#content {
	background-color: var(--col-content-background);
	box-shadow: 1px 1px 10px var(--col-shadow);
	max-width: 800px;

	@media (width >= 1400px) {
		max-width: 1000px;
	}

	margin: auto;
	padding: 1em;

	p {
		text-align: justify;
	}

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

	h2, h3 {
		scroll-margin-top: calc(1em + var(--header-height));
		margin-top: 2em;
		clear: left;

		a {
			color: inherit;
		}

		a:hover {
			color: inherit;
		}
	}
}

.music-sample {
	display: block;
	margin: 0.5em auto;
	width: 100%
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	vertical-align: middle;
	gap: 10px;

	img {
		vertical-align: middle;
	}
}

.profile {
	display: flex;
	align-items: center;

	@media (width < 650px) {
		flex-direction: column;
	}

	img {
		border-radius: 50%;

		@media (width >= 650px) {
			margin-right: 1em;
		}
	}
}