@import url(https://fonts.googleapis.com/css?family=Bitter:400,400italic,700);

* {
	box-sizing: border-box;
}

body {
	font-family: 'Bitter', serif;
	font-size: 18px;
	display: flex;
	justify-content: space-around;
}

h3 {
	margin: 5px;
	line-height: 38px;
}

.left, .right {
	width: 49%;
}

ul {
	list-style-type: none;
	padding-left: 0;
	margin: 5px 0 0;
}

li {
	background: #24b25f;
	margin: 5px;
	padding: 8px 15px 8px 0;
	border-radius: 3px;
	color: #fff;
}

li span {
	width: 50px;
	display: inline-block;
	text-align: center;
}

li.nested {
	cursor: pointer;
}

li.nested strong {
	font-size: 15px;
	position: relative;
	top: -2px;
	margin-left: 3px;
}

li ul {
	display: none;
	margin-left: 60px;
	list-style-type: circle;
}

li ul li {
	padding: 3px 8px 3px 0;
}

.fa {
	color: #fff;
}

a {
	color: #fff;
	text-decoration: none;
	text-shadow: 2px 2px transparent;
}

a:hover {
	text-shadow: 2px 2px #007f2c;
}

.fa:before {
	font-size: 20px;
}

.external li {
	background: #ff6041;
}

.external li a:hover {
	text-shadow: 2px 2px #cc2d0e;
}

.featured li {
	background-color: #967bb6;
}

.featured li a:hover {
	text-shadow: 2px 2px #634883;
}

.kstar li {
	background: #1b9fb2;
}

.kstar li a:hover {
	text-shadow: 2px 2px #006c7f;
}

.inactive {
	opacity: .75;
	text-decoration: line-through;
}

@media screen and (max-width: 900px) {
	body { flex-direction: column; justify-content: center; }
	.left, .right { width: 98%; }
}

@media screen and (max-width: 500px) {
	li:not(.nested) { display: flex; align-items: center; }
	li span { min-width: 50px; }
	li ul { margin-left: 20px; }
}