#content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
	padding-top: 1em;
	@media screen and (width >= 650px) and (height > 600px) {
		height: 100%;
		webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box;
	}
}

#status {
	text-transform: uppercase;
	padding: .25em 0;
}
#status .main {
	font-family: 'Ad Lib', 'Garfield', 'Comic Sans MS', sans-serif;
	font-size: 1.5em;
}

.poll-bars {
	background: var(--white);
	border: var(--default-border);
	border-radius: 4px;
	box-shadow: var(--default-shadow);
	width: max(180px, min(35vw, max(20vw,400px)));
	@media screen and (width < 650px) { width: 85vw; }
	@media screen and (width >= 650px) and (height > 600px) { max-height: 90vh; overflow-y: auto; }
	padding: 8px;
	padding-top: 12px;
	margin: 0 auto;
	.row { display: flex; align-items: center; }
	img { width: max(2em,5vh); flex-shrink: 0; }
	.col:first-child { text-align: right; }
	.col:last-child {
		text-align: left;
		flex-grow: 1;
		padding-right: 2em;
	}
	.bar {
		position: relative;
		display: inline-block;
		background: var(--black);
		height: .5em;
		border-radius: 0 .5em .5em 0;
		padding-left: calc(1.6em + 4px);
	}
	.votes {
		position: absolute;
		right: 0; top: 50%; transform: translateY(-50%);
		min-width: 1.15em;
		text-align: center;
		border-radius: 1.25em;
		border: 2px var(--black) solid;
		padding: .25em; padding-bottom: .15em;
		background: var(--yellow);
		width: fit-content;
	}
}

.share {
	width: 230px;
	@media screen and (width >= 650px) and (height >= 600px) { margin-top: 10vh; }
}
.share .directions {
	font-size: .85em;
}
.share textarea {
	width: 100%;
	height: 7em;
}

.yellowbutton {
	border-radius: 1em;
	font-size: 1.25rem;
}

/* thought bubble tooltip */
.poll-bars .tooltip { position: relative; }
.poll-bars .tooltip .tooltip-text, .poll-bars .tooltip .tooltip-text:after, .poll-bars .tooltip .tooltip-text:before {
	background: var(--white);
	border: 2px var(--black) solid;
}
.poll-bars .tooltip .tooltip-text {
	position: absolute;
	z-index: 1000;
	bottom: calc(100% + .5em);
	left: 60%;
	text-align: center;
	font-size: 0.85em;
	border-radius: 2em;
	padding: .75em 1.25em .6em 1.25em;
	display:none;
	pointer-events: none;
}
/* dots at bottom */
.poll-bars .tooltip .tooltip-text::before, .poll-bars .tooltip .tooltip-text::after {
	content: " ";
	position: absolute;
	left: max(1em,2.5vh);
	aspect-ratio: 1;
	border-radius: 50%;
}
.poll-bars .tooltip .tooltip-text::before {
	top: calc(100% + .6em);
	width: .4em;
	transform: translateX(-140%);
}
.poll-bars .tooltip .tooltip-text::after {
	top: calc(100% - .2em);
	width: .7em;
	transform: translateX(-60%);
}

.row:hover .tooltip-text, .tooltip:focus-visible .tooltip-text, .tooltip:active .tooltip-text {
  display: block;
}
.poll-bars .tooltip:focus-visible { outline: none; }