:root {
	--main-color: #b5b5b5;
	--second-color: #777777;
	--accent-color: #d6585c;
	--green-color: #6cd659;
	--bg-color: #222222;
	--item-color: #353035;
	--border-color: #444;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: var(--bg-color);
	color: var(--main-color);
	font-family: 'Samsung Sans', 'Droid Sans', 'Ubuntu', sans-serif;
	font-size: 1rem;
}

main {
	max-width: 900px;
	margin: auto;
	padding: 0.5rem;
	text-align: center;
}

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--border-color);
}

nav a {
	color: var(--main-color);
	text-decoration: none;
	display: block;
	margin: 16px;
	transition: color 0.2s;
}

nav a.active {
	color: #fff;
	background-color: rgba(214, 88, 92, 0.3);
}

nav a:hover {
	color: #fff;
	transition: color 0.2s;
}

ul {
	list-style: none;
	display: flex;
}

h1,
.card--title {
	color: var(--accent-color);
}

.card {
	margin: 1rem;
}