#container { width: 100%; }
body
{
	font-family: sans-serif;
	margin: 1rem;
	background-color: black;
	max-width: 80rem;
	color: white;
}

.hrule {
	display: flex;
	padding-bottom: 0.5rem;
	width: 100%;
}

.hrule>span {
	flex-basis: 100%;
	height: 2rem;
}
.hrule>span.caption {
	font-size: 1.9rem;
	display: inline-block;
	background-color: black;
	height: 100%;
	font-weight: bold;
	text-transform: uppercase;
	padding-right: .25rem;
	padding-left: .25rem;
	white-space: nowrap;
	flex-basis: 0%;
}

a.button {
	text-decoration: none;
}
.notch {
}

.hrule>.elbo {
	width: 10rem;
	height: 3rem;
	transform: translate(0,0);
	display: inline-block;
	flex: 0 0 10rem;
}

.hrule.elbo-sw>.elbo {
	border-top-left-radius: 10rem 10rem;
}
.hrule.elbo-nw>.elbo {
	border-bottom-left-radius: 10rem 10rem;
}

.hrule>.elbo>.blackout {
	display: block;
	position: fixed;
	background-color: black;
	width: 1.5rem;
	height: 1rem;
}
.hrule.elbo-nw>.elbo>.blackout {
	top: 0;
	right: 0;
	border-bottom-left-radius: 100% 100%;
}

.hrule.elbo-sw>.elbo>.blackout {
	bottom: 0;
	right: 0;
	border-top-left-radius: 100% 100%;
}
.hrule.elbo-sw>span {
	height: 2rem;
}
.hrule.elbo-nw>span {
	height: 2rem;
	margin-top: 1rem;
}
.hrule.elbo-nw>.notch {
	margin-top: 1rem;
}

.yellowthing>.elbo, .yellowthing>.notch, .yellowthing>span, .yellowthing>.vrule {
	background-color: #ce9912;
}

.cyanthing>.elbo, .cyanthing>.notch, .cyanthing>span, .cyanthing>.vrule {
	background-color: #8bdbff;
}

.lightbluething>.elbo, .lightbluething>.notch, .lightbluething>span, .lightbluething>.vrule {
	background-color: #3786ff;
}

.cyanthing span.caption {
	color: #8bdbff;
}

.bluething span.caption {
	color: #0846ee;
}
.lightbluething span.caption {
	color: #3786ff;
}
.yellowthing span.caption {
	color: #ce9912;
}

.hrule>img {
	height: 2rem;
}
.bluething>span, .bluething>img, .bluething .notch
{
	background-color: #0846ee;
}

.notch {
	height: 2rem;
	border-radius: 0 2rem 2rem 0;
	background: linear-gradient(to left, transparent 0, transparent 2rem, black 2rem, black 2.75rem, transparent 0);
	width: 3.5rem;
	flex-shrink: 0;
}
.contentspace {
	display: flex;
	padding-bottom: .5rem;
	height: 100%;
	align-items: stretch;
}

.contentspace>.vrule {
	flex: 0 0 8.5rem;
	display: block;
}

.button span.caption {
	background-color: black;
	display: inline-block;
	color: #d45f0f;
	font-size: 2rem;
	height: 100%;
	padding-right: .25rem;
	padding-left: .25rem;
	text-transform: uppercase;
	font-weight: bold;
	color: #d45f0f;
}


.contentspace .content {
	width: 100%;
	color: white;
	padding-left: 2rem;

}
#question-and-answer, #question, #table-responses, #answers-hand {
	padding: 0;
	flex-wrap: wrap;
	display: flex;
}

.no { display: none !important; }

.hosttools.expanded>span>.caption:after {
	content: " ▾";
}
.hosttools:not(.expanded)>span>.caption:after {
	content: " ▸";
}

.hosttools:not(.expanded):not(.hosttoolsexpander) { display: none; }


button, a.button, input[type="submit"] {
	display: inline-block;
	font-size: 1rem;
	border: none;
	background-color: #d46011;
	color: black;
	height: auto;
	border-radius: 2rem 2rem 2rem 2rem;
	padding-left: 3rem;
	padding-right: 3rem;
	background: linear-gradient(to left, transparent 0, transparent 2rem, black 2rem, black 2.75rem, transparent 0),
			linear-gradient(to right, transparent 0, transparent 2rem, black 2rem, black 2.75rem, transparent 0);
}

button:not(:disabled), a.button, input[type="submit"]:not(:disabled) {
	background-color: #d46011;

}

button:disabled {
	border: none;
	background-color: silver;
}

.toparea {
	display: flex;
}

span.blank:after {
	display: inline-block;
	content: "?";
	width: 6rem;
	border-bottom: solid 1px silver;
	text-align: center;
	font-size: .5rem;
}

.onboard {
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.onboard .name {
	margin-left: 1rem;
	margin-top: .25rem;
}

.card {
	display: block;
	width: 8rem;
	height: 12rem;
	padding: .75rem
}
.card .caption {
	font-weight: bold;
}

.card.question {
	border-radius: 1rem;
	background-color: black;
	color: white;
	border: solid 1px rgba(255,215,0,128);
	background-color: black;
	color: white;
	filter: drop-shadow(0 0 .75rem gold);
}

.card:not(.question) {
	border-radius: 1rem;
	border: solid 1px white;
	background-color: white;
	color: black;
	filter: drop-shadow(0 0 .75rem white);
}

.card.concealed {
	border-radius: 1rem;
	border: solid 1px black;
	background-color: white;
}

.card.concealed .caption {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 1.55rem;
	text-align: center;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card.pickable {
	transition: 0.1s ease-in-out;

}
.card.pickable:hover {
	transform: rotate(5deg);
}

.card.chosen {
	transform: translateY(-1rem);
	filter: drop-shadow(0 0 .75rem gold);
}
.card.chosen:hover {
	transform: translateY(-1rem);
}
.card.ghost {
	border: solid 1px #ddd;
	background-color: #ddd;
	color: #aaa;
}

#copyableurl {
	overflow: scroll;
}

#smallbanner { display: none; }
#bigbanner { display: flex; }

#qrcode .content {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-color: black;
	z-index: 100;
	margin: 1rem;
}
#qrcode .grayout {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	background-color: black;
	width: 100%;
	height: 100%;
	opacity: 0.75;
	z-index: 99;
}

#qrcode .content > * {
	margin: 1rem;
}
#qrcode .content > * > button:first-child {
	width: 100%;
}

@media only screen and (max-device-width: 1024px)
{
	body { margin: .25rem; }
	.notch {
		width: 2rem;
		height: 1.5rem;
		border-radius: 0 1rem 1rem 0;
		background: linear-gradient(to left, transparent 0, transparent 1rem, black 1rem, black 1.5rem, transparent 0);
	}

	.hrule>span {
		height: 1.5rem;
	}

	.hrule>span>span.caption {
		font-size: 1.5rem;
	}

	.hrule.elbo-sw>span {
		height: 1.5rem;
	}
	.hrule.elbo-nw>span {
		height: 1.5rem;
		margin-top: .5rem;
	}
	.hrule.elbo-nw>.notch {
		margin-top: 1.5rem;
	}

	.hrule>.elbo {
		width: 2rem;
		height: 2.5rem;
		transform: translate(0,0);
		display: inline-block;
		flex: 0 0 2rem;
	}
	.hrule.elbo-sw>.elbo {
		border-top-left-radius: 2rem 2rem;
	}
	.hrule.elbo-nw>.elbo {
		border-bottom-left-radius: 2rem 2rem;
	}
	.contentspace>.vrule {
		flex: 0 0 .5rem;
	}
	.contentspace .content {
		padding-left: .25rem;
		padding-right: 1rem;

	}
	.onboard {
		padding: .5rem;
	}
	.card {
		display: block;
		width: 5rem;
		height: auto;
		width: 100%;
		padding: .15rem;
	}
	.hrule.elbo-nw>span {
		margin-top: 1rem;
	}
	.hrule.elbo-nw>.notch {
		margin-top: 1rem;
	}
	.card:not(.question) {
		filter: drop-shadow(0 0 .25rem white);
		border-radius: 1rem;
		padding: .5rem;
		border: solid .1rem white;
	}
	.card.chosen {
		filter: drop-shadow(0 0 .5rem gold);
		transform: translateY(0) translateX(1rem);
	}
	.card.pickable:hover {
		filter: drop-shadow(0 0 .5rem gold);
		transform: translateY(0) translateX(1rem);
	}
	.card.question {
		border: solid .1rem white;
		padding: .5rem;
		filter: drop-shadow(0 0 .25rem gold);
	}
	#question-and-answer, #question, #table-responses, #answers-hand {
		display: block;
		padding: 0;
	}

	button, a.button, input[type="submit"] {
		width: 100%;
	}

	#smallbanner { display: flex; }
	#bigbanner { display: none; }

	#qrcode, #qrcode .content { left: 1rem; top: 1rem; right: 1rem; }

}