* {
	box-sizing: border-box;
}

hr {
	margin: 1em 0;
}

body {
	background-color: #e6e6e6;
	font-family: monospace;
	font-size: 1.2em;
	margin: 0;
	padding: 0;
}

aside {
	align-items: center;
	display: flex;
	flex-flow: column;
	gap: 0.5lh;
}

h1,
h2,
h3 {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	margin: 0;
}
h1 {
	font-size: 1.8em;
	view-transition-name: page-title;
}
h2 {
	font-size: 1.4em;
	color: #666;
}

footer {
	text-align: center;
}

.page {
	margin: 1em auto;
	width: min(1200px, calc(100% - 1em));
}

.container {
	background-color: #eee;
	box-shadow: 0px 0px 10px #0004;
	border-radius: 0.5em;
	gap: 1em;
	padding: 1em;
}

button {
	border-radius: 0.25em;
	border: 1px solid #0004;
	cursor: pointer;
	padding: 0.5em;

	&:hover {
		outline: 2px solid #f59c32;
	}
}

#profile {
	view-transition-name: profile-picture;
}

@view-transition {
	navigation: auto;
}