* {
	padding: 0;
	margin: 0;
	box-sizing: content-box;
	font-family: 'MinionPro';
}



h1 {
	position: relative;
	font-size: 4em;
	left: 25%;
	width: 75%;
	font-family: 'Elan-ITC';
}

h2 {
	font-size: 3em;
	padding: 5px;
	color: white;
}

h3 {
	font-size: 1.5em;
	color: white;
}

p {
	color: white;
}

div#__next {
	display: grid;
	grid-template:
	'head button'
	'toolbar button'
	'main main' / 1fr 1fr;
}

div#toolbar {
	position: relative;
	left: 10%;
	grid-area: toolbar;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

div#toolbar > span {
	margin: 0.4em 0.6em;
}

div#toolbar span img {
	height: 20px;
	transform: translate(0, 30%);
	margin: 0 0.3em;
}

div#toolbar span label {
	width: 40px;
	height: 20px;
	display: inline-block;
	border-radius: 10px;
	position: relative;
	background: #cccccc;
	transition: background 0.2s;
}

div#toolbar span label.checked {
	background: #2196f3;
}

div#toolbar span label input[type='checkbox'] {
	opacity: 0;
	height: 0;
	width: 0;
}

div#toolbar span label span {
	position: absolute;
	top: 0;
	left: 0;
}

div#toolbar span label span::before {
	content: '';
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: white;
	position: absolute;
	left: 2px;
	top: 2px;
	transition: transform 0.3s;
}

div#toolbar span label input:checked + span::before {
	transform: translate(20px);
}

button#randomize-button {
	margin: calc(2em / 3) calc(20em / 3);
	border-radius: 6px;
	background-color: rgb(57, 57, 177);
	background-size: cover;
	border: 1px solid black;
	color: white;
	cursor: pointer;
	font-size: 1.5em;
	outline: none;
}

button#randomize-button:hover {
	background-color: rgb(76, 76, 160);
}

div#main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-area: main;
	margin: 1em;
	height: 84vh;
}

div#main div#list {
	background-color: rgb(73, 73, 175);
	overflow-y: scroll;
	overflow-x: hidden;
}

div#main div#list ul {
	padding: 1em;
}

div#main div#list ul li.civ {
	display: grid;
	grid-template-columns: 2fr 18fr;
	cursor: pointer;
	margin: 0.4em 1em;
	background: rgb(38, 38, 160);
	border: 1.5px solid black;
	padding: 0.5em;
	border-radius: 12px;
	font-size: 1.25em;
	user-select: none;
}

div#main div#list ul li.civ h3 {
	margin-top: auto;
	margin-bottom: auto;
}

div#main div#list ul li.civ h3.disabled {
	text-decoration: line-through;
}

div#main div#list ul li.civ button {
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 0;
	border-radius: 6px;
	background-size: cover;
	border: 1px solid black;
	color: white;
	cursor: pointer;
	font-size: 1em;
	outline: none;
	padding: 0.5em 1em;
}

div#main div#list ul li.civ button.enable-btn {
	background-color: rgb(40, 161, 24);

}

div#main div#list ul li.civ button.enable-btn:hover {
	background-color: rgb(32, 131, 16);
}

div#main div#list ul li.civ button.disable-btn {
	background-color: rgb(172, 13, 13);
}

div#main div#list ul li.civ button.disable-btn:hover {
	background-color: rgb(200, 15, 15);
}

div#main div#list ul li.civ.disabled {
	background: rgb(19, 19, 97);
}

div#main div#list ul li.civ.disabled:hover {
	background: rgb(24, 24, 134);
}

div#main div#list ul li.civ:hover,
div#main div#list ul li.civ.hovered {
	background: rgb(19, 19, 97);
}

div#main div#list ul li.civ img {
	border-radius: 50%;
	width: 50px;
	height: 50px;
}

div#main div#list ul li.civ div {
	display: flex;
	justify-content: space-between;
}

div#main div#list ul li.civ p {
	font-size: 1.5em;
}

div#main div#list ul li.civ div h3 {
	width: fit-content;
}

div#main div#chosen-civ {
	background-color: rgb(62, 62, 161);
	border-left: 2px solid black;
	padding: 1em;
	overflow-y: scroll;
	overflow-x: hidden;
}

div#main div#chosen-civ img {
	height: 200px;
	width: 200px;
}

div#main div#chosen-civ p {
	margin: 0.5em;
	margin-top: 0em;
	text-indent: 5%;
	font-family: 'HelveticaNeue';
}

div#main div#chosen-civ ul {
	list-style: none;
	margin: 0.5em;
}

div#main div#chosen-civ ul li {
	color: white;
	text-indent: 5%;
	font-family: 'HelveticaNeue';
}

div#main div#chosen-civ ul li h4 {
	display: inline;
}

div#main div#chosen-civ ul li img {
	height: 1em;
	width: 1em;
	border-radius: 50%;
	transform: translate(-5%, 11%);
}

div#main div#chosen-civ p img {
	height: 1em;
	width: 1em;
	border-radius: 50%;
	transform: translate(-5%, 11%);
}

div#main div#chosen-civ div.outer {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

div#main div#chosen-civ div.outer div h2 {
	text-align: center;
}

div#main div#chosen-civ div.outer div img {
	margin-left: 50%;
	transform: translate(-50%, 0);
	border-radius: 50%;
}

div.alert {
	color: white;
	background: red;
	border: 1px solid black;
	border-radius: 4px;
	padding: 0.5em;
	transform: translate(-50%, -50%);
	cursor: default;
	user-select: none;
}

div#civ-list-title {
	background: rgb(25, 25, 150);
	border: 1px solid black;
	border-radius: 10px;
	font-size: 0.75em;
}

div#civ-list-title h2 {
	position: relative;
	left: 42%;
}

@font-face {
	font-family: 'HelveticaNeue';
	src: url('fonts/HelveticaNeue.ttf') format('truetype');
}
@font-face {
	font-family: 'MinionPro';
	src: url('fonts/MinionPro-Bold.otf') format('opentype'),
		url('fonts/MinionPro-BoldCn.otf') format('opentype'),
		url('fonts/MinionPro-BoldCnIt.otf') format('opentype'),
		url('fonts/MinionPro-BoldIt.otf') format('opentype'),
		url('fonts/MinionPro-It.otf') format('opentype'),
		url('fonts/MinionPro-Medium.otf') format('opentype'),
		url('fonts/MinionPro-MediumIt.otf') format('opentype'),
		url('fonts/MinionPro-Regular.otf') format('opentype'),
		url('fonts/MinionPro-Semibold.otf') format('opentype'),
		url('fonts/MinionPro-SemiboldIt.otf') format('opentype');
}

@font-face {
	font-family: 'MyriadPro';
	src: url('fonts/MyriadPro-Bold.otf') format('opentype'),
		url('fonts/MyriadPro-BoldCond.otf') format('opentype'),
		url('fonts/MyriadPro-BoldCondIt.otf') format('opentype'),
		url('fonts/MyriadPro-BoldIt.otf') format('opentype'),
		url('fonts/MyriadPro-Cond.otf') format('opentype'),
		url('fonts/MyriadPro-CondIt.otf') format('opentype'),
		url('fonts/MyriadPro-It.otf') format('opentype'),
		url('fonts/MyriadPro-Regular.otf') format('opentype'),
		url('fonts/MyriadPro-Semibold-MOD.otf') format('opentype'),
		url('fonts/MyriadPro-Semibold.otf') format('opentype'),
		url('fonts/MyriadPro-SemiboldIt.otf') format('opentype');
}

@font-face {
	font-family: 'NotoMono';
	src: url('fonts/NotoMono-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'NotoSans';
	src: url('fonts/NotoSans-Bold.ttf') format('opentype'),
		url('fonts/NotoSans-Medium.ttf') format('opentype'),
		url('fonts/NotoSans-Regular.ttf') format('opentype'),
		url('fonts/NotoSansCJKjp-Bold.otf') format('opentype'),
		url('fonts/NotoSansCJKjp-Medium.otf') format('opentype'),
		url('fonts/NotoSansCJKjp-Regular.otf') format('opentype'),
		url('fonts/NotoSansCJKkr-Bold.otf') format('opentype'),
		url('fonts/NotoSansCJKkr-Medium.otf') format('opentype'),
		url('fonts/NotoSansCJKkr-Regular.otf') format('opentype'),
		url('fonts/NotoSansCJKsc-Bold.otf') format('opentype'),
		url('fonts/NotoSansCJKsc-Medium.otf') format('opentype'),
		url('fonts/NotoSansCJKsc-Regular.otf') format('opentype');
}

@font-face {
	font-family: 'Elan-ITC';
	src: url('fonts/Elan-ITC-Std-Medium.otf') format('opentype');
}