html {
	font-family: Roboto, sans-serif;
	background-color: #111111;
	color: White;
}
.beatmapset, .beatmap {
	border: 1px solid white;
}

.beatmap {
	margin: 5px 0;
	padding: 10px;
}
a, a:link, a:hover, a:active, a:visited {
	color: HotPink;
	text-decoration: inherit;
	cursor:pointer;
}
.small-background {
	max-height: 100px;
}
.option-description {
	font-size: 0.9em;
	text-decoration: italics;
	color: #dddddd;
}
.option-title, .option-description, .option-link {
	margin: 0;
}
.option-link {
	position: absolute;
	right: 10px; bottom: 10px;
}
.options {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}
.option {
	position: relative;
	flex: 1;
	min-width: 300px;
	margin: 5px;
	padding: 10px;
	border: 1px solid white;
}
.main-container {
	display: flex;
	flex-flow: column nowrap;
}
.main-item {
	flex: 1;
	border: 1px solid white;
	padding: 10px;
	margin: 5px;
}
.main-container>h1, .main-container>h3 {
	text-align: center;
	margin: 0;
	padding: 0;
}
.main-item>h2 {
	border-bottom: 1px solid white;
}
.main-item>h2, .main-item>h3 {
	margin: 5px;
	padding: 5px;
}
.map {
	border: 1px solid white;
	padding: 10px;
	margin: 5px;
}

.map p {
	margin: 0;
	padding: 0;
}
.map-title {
	font-weight: bold;
}
.map-artist, .map-mapper {
	display: inline-block;
}
.map-artist::after {
	content: ' /';
}
.map-mapper::before {
	content: '/ ';
}
.map>div {
	display: inline-block;
}
.map-image img {
	max-height: 64px;
	max-width: 64px;
}
.map-details {
	display: inline-block;
	vertical-align: top;
	margin-left: 10px;
}
details.mapset summary::-webkit-details-marker {
  display:none;
}

.mapset[open] .map {
	background-color: #333333;
}

.mapset[open] summary .map {
	background-color: #444444;
}
.warn h2 {
	margin: 0;
	margin-bottom: 20px;
	text-align: center;
}
.warn {
	max-width: 400px;
	margin: auto;
	margin-top: 30px;
	border: 1px solid white;
	padding: 10px;
}
.warn .note {
	font-size: 0.9em;
}