:root {
	--base-color: #708090;
	--base-color-light: #e9ecee;
	--base-color-dark: #2b3238;
	--always-dark: #2b3238;

	--accent-yellow: lightyellow;
	--accent-night: #2b3238;

	--accent-tide: #f4a261;
	--accent-tide-light: #e76f51;
	--accent-tide-dark: #e9c46a;

	--accent-tide-graph: #71c5e7;

	--padding: 0.5em;
	--small-padding: 0.25em;
}

@media (prefers-color-scheme: dark) {
	:root {
		--base-color-dark: #e9ecee;
		--base-color-light: #2b3238;

		--accent-yellow: #e0e0c0;
		--accent-night: #708090; 

		--accent-tide: #907080;
		--accent-tide-light: #d5c8ce;
		--accent-tide-dark: #59454f;
	}
}

body {
	font-family: "Lucida Console", Courier, monospace;
	font-weight: bold;
	background: var(--base-color-light);
	color: var(--base-color-dark);
}

h1 {
	color: var(--base-color);
}

.goodtime_row {
	display: flex;
	flex-direction: horizontal;
}

.date {
	padding: var(--padding);
	writing-mode: vertical-rl;
}

.goodtime_row:nth-child(odd) .date {
	background-color: var(--base-color);
	color: var(--base-color-light);
}

.goodtime_glance {
	width: 100%;
}

.goodtime_time:before {
	content: "⭐";
	/* color: transparent; */
	text-shadow: 0 0 0 var(--accent-yellow);
	padding-right: var(--small-padding);
}

.goodtime_time {
	background-color: var(--base-color);
	color: var(--base-color-light);
	border: 3px solid var(--base-color);
	border-radius: 3px;
	padding: var(--small-padding);
	padding-bottom: calc(var(--small-padding)/2);
}

.goodtime_text {
	padding: var(--padding);
}

.night {
	fill: var(--accent-night);
	fill-opacity: 50%;
}

.daytime {
	fill: var(--accent-yellow);
}

.two_foot {
	fill: var(--accent-tide-light);
}

.one_foot {
	fill: var(--accent-tide);
}

.zero_foot {
	fill: var(--accent-tide-dark);
}

.tide {
	fill: var(--accent-tide-graph);
}

.dot {
	fill: var(--always-dark);
	transition: fill-opacity 0.2s;
}

.goodtime_glance:active, .goodtime_glance:hover .dot {
	fill-opacity: 100%;
}

.tooltip {
	display: none;
	margin: auto;
	margin-bottom: var(--padding);
}

.goodtime_glance:active, .goodtime_glance:hover .tooltip:empty {
	/* Prevent the tooltip from being shown before the text is filled. */
	display: none;
}

.goodtime_glance:active, .goodtime_glance:hover .tooltip {
	display: revert;
}

.content {
	margin: auto;
}

.footer {
	text-align: center;
}

.footer > p {
	text-align: center;
}

a {
	color: var(--accent-tide-graph);
}

@media (min-width: 600px) {
	:root {
		--padding: 1em;
		--small-padding: 0.5em;
	}

	.content {
		max-width: 600px;
		margin: auto;
	}
}

/* https://gomakethings.com/smooth-scrolling-links-with-only-css/ */
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.config_row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

svg {
	user-select: none;
	-webkit-user-select: none;
}