*, ::before, ::after {
	box-sizing: border-box;
}

* {
	--color-background-wrapper: rgba(0, 0, 0, 0.5);
	--color-primary: white;
	--color-button: white;
	--color-navigation-selected: red;
	--color-navigation-unselected: white;
}

body {
	background-image: url("/images/background.jpg");
	background-size: cover;
	color: var(--color-primary);
	font-family: sans-serif;
	margin: 0;
}

@media screen and (max-width: 767px) {
	body {
		background-size: auto;
	}
}

a {
	text-decoration: none;
	color: #69b9ff;
}

.content-wrapper {
	background-color: var(--color-background-wrapper);
	margin: 0 auto;
	max-width: 70em;
}

main {
	padding: 1em;
}

main a:visited {
	color: #b96eb9;
}

.site-nav-menu {
	list-style: none;
	display: inline-block;
}

.site-nav-menu li {
	display: inline-block;
	margin-right: 1em;
	font-size: larger;
}

.site-nav-menu-unselected-item a {
	color: var(--color-navigation-unselected);
}

.site-nav-menu-selected-item a {
	color: var(--color-navigation-selected);
	font-weight: bold;
}

/* Buttons */

.btn {
	border: 1px solid;
	color: var(--color-button);
	border-radius: 3px;
	padding: 0.5em;
	font-weight: bold;
}