:root {
	--knop: SkyBlue;
	--knop-hover: RoyalBlue;
	--knop-border: SkyBlue;
}

body {
	font-family: "Roboto", sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.5rem;
}

header, footer, main, section,
article, span, p, h1, h2 {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: none;
	position: relative;
	float: left;
	display: flex;
}

header, main, footer {
	width: 100%;
	text-align: right;
}

header {
	border-bottom: 1px solid silver;
}

header h1 {
	font-size: 1.5rem;
	padding: 0.75rem 1rem;
	margin: 0 0 0 0;
	width: 50%;
}

header div#menu {
	display: block;
	position: relative;
	text-align: right;
	float: right;
	width: 50%;
	padding: 0.5rem 0.75rem;
}

header div#menu span {
	display: block;
	position: absolute;
	right: 1rem;
	color: var(--knop);
	border: 1px solid var(--knop-border);
	border-radius: 0.5rem;
	padding: 0.25rem 0.75rem;
	transition:
		color 300ms ease,
		background 300ms ease;
}

header div#menu span:hover {
	color: var(--knop-hover);
	cursor: pointer;
	background: var(--knop);
}