@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Quicksand&display=swap');

::selection
{
	background: white;
}

:root
{
	--main-color: white;
	--light-color: #bbbbbb;
	--background: #222222;
	--background-dark: #1a1a1a;
	--background-light: #303030;

	--offset: 2%;
	--margin: 10px;

	--icon-size: 300px;
}

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Quicksand';
}

body
{
	height: 100svh;
	width: 100svw;
	background: var(--background);
	color: var(--main-color);
}

#main-page
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}


nav
{
	width: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 50px;
	z-index: 10;
}

nav ul li *, a
{
	text-decoration: none;
}

nav a
{
	position: relative;
	margin: var(--margin);
	border: 2px solid #00000000;
}

a
{
	color: var(--main-color);
	transition: text-shadow .5s;
}

a:hover {
	text-shadow: 1px 1px 2px white;
}

nav ul
{
	display: flex;
	justify-content: center;
}

nav ul li
{
	margin: var(--margin);
	font-size: 1.5em;
}

li
{
	list-style: none;
	color: var(--main-color);
}

footer
{
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 50px;
	z-index: 10;
}

#content
{
	position: relative;
}

#title
{
	padding: 20px:
}

#home
{
	font-size: 1.5em;
}

.icon
{
	width: var(--icon-size);
}

.vert-center
{
	top: calc(50% - (var(--icon-size) / 2));
}

@media (max-width: 600px)
{
	nav
	{
		flex-direction: column;
	}

	nav ul li
	{
		font-size: 5svw;
	}
}