body, html {
	margin: 0;
	padding: 0;
	background: #000;
}
html {
	height: 100%;
}
@media (orientation: landscape) {
	body {
		background-image: url(/assets/rectangl-desktop.png);
		background-size: contain;
		background-repeat: no-repeat;
		min-height: 100%;
	}
}
@media (orientation: portrait) {
	body {
		background-image: url(/assets/rectangl-mobile.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position-x: center;
		min-height: 100%;
	}
}
@keyframes glows {
	from {
		backdrop-filter: blur(3px) saturate(200%) contrast(100%);
		
	}
	to {
		backdrop-filter: blur(9px) saturate(300%) contrast(150%);
		
	}
	
}
.projects {
	width: 90vw;
	position: fixed;
	bottom: 5vw;
	left: 5vw;
	min-height: 20vh;
	background: linear-gradient(to bottom right, rgba(255,225,225,0.35), rgba( 128, 128, 128, 0.15));
	border-radius: 16px;
	border: 4px solid rgba(255,225,225,0.75);
	padding: 16px;
	backdrop-filter: blur(4px) saturate(250%);
	animation: 4s ease-in 0s infinite alternate glows;
}
.projects h1 {
	text-align: center;
	min-height: 5vh;
}