@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@600&display=swap");
:root {
	--black0: #121212;
	--black1: #1a1a1a;
	--black2: #2c2c2c;
	--accent: #61f2ea;
}
* {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
		Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
body {
	background-color: var(--black1);
	color: white;
}

nav.main {
	height: 4rem;
	background-color: var(--black1);
	display: flex;
	align-items: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	position: relative;
	a {
		display: block;
		padding: 0 1.5rem;
		display: flex;
		align-items: center;
		height: 100%;
		margin: 0 0.5rem;
		color: white;
		text-decoration: none;
		font-family: "Lexend", sans-serif;
		transition-duration: 150ms;
		// font-size: 16px;
		&:hover {
			background-color: var(--black0);
		}
		&:focus {
			outline: none;
			background-color: var(--black0);
		}
		&:last-of-type {
			background-color: #c0c0c0;
			color: var(--black1);
			margin-left: auto;
			margin-right: 0;
			&:hover,
			&:focus {
				background-color: #909090;
			}
		}
	}
	.logo {
		margin: 0 1rem 0 1rem;
		--size: 4rem;
		width: var(--size);
		height: var(--size);
	}
}

section.banner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 28rem;
	h1,
	p {
		position: fixed;
		text-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
	}
	h1 {
		font-size: 3.5rem;
	}
	p {
		margin-top: 6rem;
	}
	div {
		// filter: blur(0.2rem);
		width: 100%;
		height: 100%;
		background-size: cover;
		background-color: var(--black0);
	}
}