:root {
	--background-dark: #101010;
	--background-light: #EFEFEF;
	--background-color: var(--background-dark);
	--footer-dark: #181818;
	--footer-light: #EBEBEB;
	--footer-color: var(--footer-dark);
	--card-color: var(--footer-color);

	--primary-color: #64A2FF;
	--primary-accent-color: #A5C8FF;
	--unhighlighted-color: #959596;

	--primary-color-filter: brightness(0) saturate(100%) invert(74%) sepia(29%) saturate(7490%) hue-rotate(191deg) brightness(100%) contrast(104%);;
	--primary-accent-color-filter: brightness(0) saturate(100%) invert(70%) sepia(14%) saturate(1560%) hue-rotate(190deg) brightness(109%) contrast(103%);
	--unhighlighted-color-filter: brightness(0) saturate(100%) invert(67%) sepia(8%) saturate(36%) hue-rotate(202deg) brightness(89%) contrast(83%);

	--navbar-vertical-padding: 2rem;
	--navbar-height: calc(var(--navbar-vertical-padding) * 2 + 1rem);
}

* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

html, body {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	scroll-behavior: smooth;
	font-size: 100%;
	background-color: var(--background-color);
}

#navigation-bar {
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	padding: 0 calc(15vw + 1rem) 0 calc(15vw + 2rem);
	box-sizing: border-box;
	position: fixed;
	top: 0;
	background-color: var(--background-color);
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.75);
	z-index: 100;
}

#nav-home {
	color: var(--primary-color);
	text-decoration: none;
	font-size: 1.5rem;
	font-weight: bold;
}

#nav-logo-container {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

#nav-list {
	list-style: none;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}

#nav-list > li {
	padding: var(--navbar-vertical-padding) 0;
	color: var(--unhighlighted-color);
	cursor: pointer;
}

#nav-list > li.highlight {
	font-weight: bold;
	color: var(--primary-color);
}

#nav-list > li > a {
	position: relative;
	top: 0;
	text-decoration: none;
	padding: var(--navbar-vertical-padding) 1rem;
	color: inherit;
	transition: top 300ms ease;
}

#nav-list > li:hover > a {
	top: -0.5rem;
	color: var(--primary-accent-color);
}

#nav-list > li.highlight:hover > a {
	top: -0.5rem;
	color: var(--primary-color);
}

#nav-button {
	display: none;
}

footer {
	background-color: var(--footer-color);
	color: var(--unhighlighted-color);
	padding: 2rem calc(15vw + 2rem);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

footer a {
	color: var(--unhighlighted-color);
}

.footer-content {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.footer-contact > .name {
	font-weight: bold;
}

.footer-links {
	margin-top: 2rem;
}

.footer-copyright {
	display: flex;
	flex-direction: column;
	justify-content: end;
}