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

body {
	margin:0;
	width:100vw;
	height:100vh;
	overflow:hidden;
	font-family: 'McLaren', cursive;
}

nav {
	position:absolute;
	top:0;
	right:0;
	display:flex;
	flex-direction:row-reverse;
	width:40vw;
	height:50px;
	align-items:center;
	justify-content:flex-start;
	gap: 20px;
	margin-right:20px;
}

nav a {
	color:black;
	text-decoration:none;
	padding:0.5em;
	cursor:pointer;
}

nav a img {
	width:32px;
	height:32px;
	border-radius:50%;
	object-fit: cover;
	background-color:white;
}

nav a:hover {
	background-color:#ffffff75;
	color:black;
	border-radius:3px;
}

main {
	background-image:url(wallpaper.png);
	background-size:cover;
	background-position:50% 50%;
	width:100vw;
	height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

main div {
	margin:0 1em;
	text-align:left;
	background-color: #ffffff75;
	border-radius:10px;	
	padding:20px;
	box-sizing:border-box;
	height:auto;overflow-y:auto
}

main div > img {
	width:200px;
	height:200px;
	object-fit:contain;
}

main h1 {
	font-size:50px;
	color:#752f00;
}

main h2 {
	font-size:30px;
}

main h3 {
	font-size:20px;
}

main form {
	display:flex;
	flex-direction:column;
	gap:20px;
	margin-bottom:20px;
	width:320px;
}

main form input {
	width:100%;
	padding:1em;
	box-sizing:border-box;
	border-radius:3px;
	border:none;
}

main form input[type=submit]:hover {
	background-color:#dfdfdf;
	cursor:pointer;
}

footer {
	position:absolute;
	bottom:0;
	left:0;
	height:50px;
	width:100vw;
	display:flex;
	align-items:center;
	justify-content:center;
	color:white;
}