/* Two panes: clock on the left, controls and description on the right.
   On narrow screens they stack, clock on top. The clock pane sticks so it
   stays visible while the other pane scrolls. */
.panes {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	max-width: 1200px;
}

.clock-pane {
	flex: 0 0 45%;
	position: sticky;
	top: 0;
	background-color: #fafafa;
	padding: 10px 0px;
	z-index: 1;
}

.controls-pane {
	flex: 1 1 0;
	min-width: 0;
}

#canvasContainer {
	text-align: center;
}

#sunCanvas {
	max-width: 100%;
	height: auto;
}

.settings {
	margin: 20px 0px;
}

.setting {
	margin: 8px 0px;
}

.setting label {
	margin-right: 8px;
}

.coordinates input {
	width: 6.5em;
	margin-right: 18px;
}

.coordinates input:last-child {
	margin-right: 0px;
}

/* The map is Mercator, so its height follows from its width. */
.map-container {
	position: relative;
	max-width: 420px;
	margin: 12px 0px;
	line-height: 0;
	cursor: crosshair;
}

.map-container img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #c8c8c8;
}

/* Drawn in fractions of the map rather than pixels, so it needs no viewBox
   height and no resize handling. */
.map-terminator {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.map-marker {
	position: absolute;
	width: 8px;
	height: 8px;
	margin: -6px 0px 0px -6px;
	border: 2px solid #cc0000;
	border-radius: 50%;
	pointer-events: none;
}

.location-status {
	font-size: small;
	color: #555555;
	margin-top: 4px;
}

.times {
	margin: 20px 0px;
	font-size: large;
}

@media only screen and (max-width: 768px){
	.panes {
		display: block;
		margin-top: 0px;
	}

	.clock-pane {
		/* A shadow separates the pinned clock from the text scrolling under it. */
		box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.3);
	}
}