/* Now #text will resize nicely */
#content { display: flex }

#dotmap {
	flex: none;
	max-height: 820px;
	height: auto;
	width: auto;
}

#text.right { display: inline-block; vertical-align: top; border: 1px solid #f00; min-width: 11em; }
#text.bottom { display: block }

#task-notification .found { animation: found 9s; }

#task-notification,
#task-next { font-size: 28px; }

abbr {
	/* font-family: "Georgia", serif; */
	border: 1px solid #cfb;
}

#task-notification { margin-top:0.8em; }
/* #current-info { margin-top: 0.8em; } */


.missed, .hit, .dotname {
	font-weight: bold;
	cursor: default;
	margin-left: -0.5ex;
	margin-top: -1.33ex;
}

.missed {
	font-size: 13px;
	content: "x";

	color: #777;
	animation: missed 2s;
}

.dot.hint {
	border: 0.11em dashed #121;
	background-color: transparent;
	background-color: rgba(255, 255, 255, 0.14);
}
.dot.hint.hint2 {
	border-color: #010;
	background-color: rgba(255, 255, 92, 0.18);
}

.hit {
	font-size: 22px;
	content: "•";

	color: #040;
}

.dotname {
	font-size: 12px;
	font-weight: normal;
	margin-left: 1.4ex;
	margin-right: 1.4ex;
	line-height: 145%;
}

.dot.hit.darkbg { color: #cec }
.dotname.darkbg { color: #ddd }

footer {
	font-size: 0.72em;
	color: #444;
	margin: 0.3em 0.1em;
}

@keyframes missed { 0% { color: #f00 } }
@keyframes found  { 0% { color: #0c0; background-color: #efb; } }


/* accidental selections are still possible, but invisible */
::selection      { background-color: transparent }
::-moz-selection { background-color: transparent }