body {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
}

#bodyWrapper {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	padding: 0.5em 1em;
}

#mainTitle {
	margin: 0;
	padding: 0;
}

#versionWrapper {
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}

#songWrapper {
	margin-bottom: 0.5em;
}

.candidateCategories {
	text-align: center;
	white-space: nowrap;
}

.candidateCategories > label:not(:last-child) {
	margin-right: 0.5em;
}

.detailedCandidates {
	margin-top: 0.25em;
}

.detailTitle {
	margin-top: 0.25em;
	white-space: nowrap;
}

.detailList {
	margin-left: 1em;
	white-space: nowrap;
}

#pickButtonWrapper {
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}

#pickButton {
	width: 12em;
	height: 3.5em;
	margin-bottom: 0.25em;
}

#pickButtonText {
	font-size: 200%;
}

#resultArea {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	--border-style: 1px solid currentcolor;
	border-left: var(--border-style);
	border-top: var(--border-style);
	width: 100%;
}

#resultArea > div {
	border-right: var(--border-style);
	border-bottom: var(--border-style);
	padding: 0.25em 0.125em;
	text-align: center;
}

#resultSongLabel {
	grid-row: 1;
}

#resultSong {
	grid-row: 2;
}

#resultLeftLabel, #resultCenterLabel, #resultRightLabel {
	grid-row: 3;
}

#resultLeft, #resultCenter, #resultRight {
	grid-row: 4;
}

#resultSongLabel, #resultSong {
	grid-column: 1 / span 3;
}

#resultLeftLabel, #resultLeft {
	grid-column: 1;
}

#resultCenterLabel, #resultCenter {
	grid-column: 2;
}

#resultRightLabel, #resultRight {
	grid-column: 3;
}

#postButtonWrapper {
	margin-top: 0.75em;
}

#postButton {
	padding: 0.75em 1.5em;
}

#postButtonText {
	font-size: 120%;
}