@font-face {
	font-family: "Yaro";
	src: url("font/Yaro.woff2");
}

@font-face {
	font-family: "YaroBold";
	src: url("font/YaroBold.woff2");
}

body {
	color: #fff;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: #101010;
}

#wallpaper {
	top: 0;
	left: 0;
	width: 100%;
	height: 150%;
	opacity: 0;
	z-index: -10;
	position: fixed;
	object-fit: cover;
	transition: opacity 300ms ease;
}

#navigation {
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background: #00000040;
	backdrop-filter: blur(20px);
	position: fixed;
	line-height: 50px;
	border-bottom: 2px solid #000000a0;
}

#navigation label.siteName {
	top: 0;
	height: 50px;
	display: inline-block;
	padding: 0 10px;
	font-size: 18px;
	font-weight: bold;
}

#navigation label.siteName img {
	width: 30px;
	margin-right: 10px;
	vertical-align: middle;
}

#content {
	padding: 50px;
}

div.project {
	border: 2px solid #000000a0;
	background: #00000040;
	border-radius: 20px;
	backdrop-filter: blur(100px);
	display: inline-block;
	padding: 20px;
}

div.project h2 {
	margin: 0;
}