@import url(./styles-light.css);
@import url(./styles-dark.css) (prefers-color-scheme: dark);

header a { text-decoration: none; }

header .site_logo {
	display: inline;
	padding-right: 0.125em;
}

header .site_logo img {
	box-shadow: none;
	height: 1em;
	width: 1em;
	vertical-align: middle;
}

#container header { margin-bottom: -2em; }

.interstitial {
	box-shadow: none;
	width: 5em;
	height: 5em;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

table.categories, td.category, td.examples, td.collected {
	border: 1px solid black;
}

td.examples {
	color: #333;
}

td.collected {
	font-style: italic;
}

tr.category_header td {
	background-color: #333;
	color: #ccc;
}

td.category, td.examples, td.collected {
	vertical-align: top;
}

.album img, .album-preview img, .image-page img {
	border: 1px solid black;
	border-radius: 8px;
}

.photos img, .photos div.image, .album img, .album div.image, .image-page img {
	box-shadow: none;
}

.photo-copyright {
	font-size: x-small;
}

.photo-copyright, .photo-copyright a, .photo-location a, .metadata, #like-count {
	color: #aaa;
}

.album {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 8px;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
}

.album-preview {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	grid-auto-columns: 170px;  /* Fixed column width */
	gap: 12px;
	overflow: hidden;
	mask-image: linear-gradient(to right, black 75%, transparent 95%);
}

.like-section { margin: 1rem 0; }
#like-btn { background: #eee; border: none; padding: 0.5rem; cursor: pointer; color: #800 !important; }
#like-btn.liked, #like-btn:disabled { display: none; }

.comments-section { margin: 2rem 0; }
.toggle-btn { background: #eee; border: none; padding: 0.5rem 1rem; cursor: pointer; color: #007cba !important; }
.comment-form { margin: 1rem 0; }
.comment-form input, .comment-form textarea { width: 100%; margin: 0.5rem 0; padding: 0.5rem; }
.comment-form button { background: #007cba; color: white !important; border: none; padding: 0.75rem 1.5rem; cursor: pointer; }
.comment { border-left: 3px solid #007cba; padding-left: 1rem; margin: 1rem 0; }
.comment-date { color: #aaa; font-size: 0.9em; margin-left: 0.5rem; }



@media (prefers-color-scheme: dark) {
	 table.categories, td.category, td.examples, td.collected {
		border: 1px solid white;
	}

	td.examples {
		color: #ccc;
	}

	tr.category_header td {
		background-color: #ccc;
		color: #333;
	}

	.album img, .image-page img {
		border: 1px solid white;
	}

	.photo-copyright, .photo-copyright a, .photo-location a, .metadata, #like-count {
		color: #777;
	}

	#like-btn { background: #555; color: #e99 !important; }

	.toggle-btn { background: #333; color: #3cbcff !important; }
	.comment-form button { background: #005f99; color: #ccc !important; }
	.comment { border-left: 3px solid #3cbcff; }
	.comment-date { color: #777; }
}