.sidebar
{
	font-size: 1.5rem;
	margin: 0;
	padding: 0;
	width: var(--sidebar-margin);
	background-color: var(--sidbar-background);
	position: fixed;
	min-height: 100vh;
	overflow: auto;
}

.sidebar a
{
	display: block;
	color: var(--sidebar-text);
	text-decoration: none;
}
.sidebar a span { opacity: .7; }
.sidebar a:hover span { opacity: 1.0; }

.sidebar a:hover:not(.active)
{
	color: var(--sidebar-text);
}

.sidebar .logo
{
	font-size: 1.6rem;
}

div.content
{
	height: 100%;
	margin-left: var(--sidebar-margin);
	margin-bottom: 3rem;
}

@media screen and (max-width: 700px)
{
	.sidebar
	{
		width: 100%;
		height: auto;
		position: relative;
	}

	.sidebar a
	{
		float: left;
	}

	div.content
	{
		margin-left: 0;
	}
}

@media screen and (max-width: 400px)
{
	.sidebar a
	{
		text-align: center;
		float: none;
	}
}