html, body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	background-color: var(--dark8);
}

header, footer {
	width: 100%;
	padding: 0.25rem;
	background-color: var(--gallina1);
}

header {
	height: 4rem;
	display: flex;
	align-items: center;
}

header a {
	display: flex;
	gap: var(--gapS);
	text-decoration: none;
	align-items: center;
}

header a img {
	width: 3.5rem;
}

header a span {
	color: var(--dark8);
}

header button {
		color: var(--dark8);
	margin: unset;
	margin-left: auto;
	margin-right: 0.75rem;
	display: none;
}

footer address {
	color: var(--dark8);
}

main {
	display: flex;
	flex: 1;
	overflow: hidden;
}

menu {
	padding: var(--gapS);
	background-color: var(--gallina3);
}

menu.collapsed {
	width: auto;
}

menu ul {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gapS);
	list-style: none;
}

menu li:last-child {
	margin-top: auto;
}

menu a {
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: var(--gapS);
	color: #121211;
	cursor: pointer;
}

menu img {
	width: 2rem;
}

menu span:last-child {
	font-size: 1.5rem;
	display: none;
}

menu.collapsed span:last-child {
	display: block;
}

content {
	width: 100%;
	overflow: auto;
	padding: var(--gapL);
}

@media (max-width: 30rem) {
	header button {
		display: block;
	}

	main {
		flex-direction: column;
	}

	menu {
		display: none;
	}

	menu.collapsed {
		width: 100%;
		display: block;
	}

	content {
		padding: 0rem;
	}
}