html,
body {
	min-height: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: hsl(var(--background, 0 0% 100%));
	color: hsl(var(--foreground, 222.2 84% 4.9%));
}

.galleryContainer {
	font: 400 16px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: hsl(var(--foreground, 222.2 84% 4.9%));
	background: #007dc5;
	-webkit-text-size-adjust: 100%;
	-webkit-font-feature-settings: "kern" 1;
	-moz-font-feature-settings: "kern" 1;
	-o-font-feature-settings: "kern" 1;
	font-feature-settings: "kern" 1;
	font-kerning: normal;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.galleryContainer a {
	color: hsl(var(--foreground, 222.2 84% 4.9%));
	text-decoration: none;
}

.galleryContainer a:hover {
	/* color: hsl(var(--primary, 222.2 47.4% 11.2%)); */
	color: hsl(var(--foreground, 222.2 84% 4.9%));
}

.galleryContainer a {
	cursor: pointer;
}

.galleryContainer a.button,
.galleryContainer a.raised {
	display: inline-flex;
	flex-direction: row;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	align-items: center;
	margin: 4px;
	background: hsl(var(--secondary, 210 40% 96%));
	border: 1px solid hsl(var(--border, 214.3 31.8% 91.4%));
	transition: all 0.2s ease-in-out;
}

.galleryContainer a.button svg,
.galleryContainer a.raised svg {
	width: 1.5em;
	height: 1.5em;
	margin-right: 5px;
}

.galleryContainer a.primary {
	color: hsl(var(--primary, 222.2 47.4% 11.2%));
	text-decoration: none;
}

.galleryContainer a.primary:hover {
	color: hsl(var(--primary-foreground, 210 40% 98%));
	background: hsl(var(--primary, 222.2 47.4% 11.2%));
}

.galleryContainer a.raised {
	color: hsl(var(--secondary-foreground, 222.2 84% 4.9%));
	background: hsl(var(--secondary, 210 40% 96%));
}

.galleryContainer a.raised:hover {
	background: hsl(var(--accent, 210 40% 96%));
	color: hsl(var(--accent-foreground, 222.2 84% 4.9%));
	transform: translateY(-1px);
}

.flex {
	flex: 1 1 auto;
}
.hide {
	display: none;
}
.row {
	margin-bottom: 40px;
}
.row .container {
	margin: auto;
	padding-left: 20px;
	padding-right: 20px;
}
.row .container-1000px {
	max-width: 1000px;
	margin: auto;
	padding-left: 20px;
	padding-right: 20px;
}
.row .container-1600px {
	max-width: 1600px;
	margin: auto;
	padding-left: 20px;
	padding-right: 20px;
}
.row .container-90perc {
	max-width: 90%;
	margin: auto;
	padding-left: 20px;
	padding-right: 20px;
}
.row .container-80perc {
	margin: auto;
	max-width: 80%;
	padding-left: 20px;
	padding-right: 20px;
}
.align-start {
	align-items: flex-start !important;
}
.wrap {
	flex-wrap: wrap;
}
.layout-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.layout-row > * {
	min-height: 0;
}
.layout-row.stretch {
	align-items: stretch;
}
.layout-row.small-gap > *:not(:last-child) {
	margin-right: 20px;
}
.layout-row.gap > *:not(:last-child) {
	margin-right: 40px;
}
.layout-row.big-gap > *:not(:last-child) {
	margin-right: 80px;
}
.layout-column {
	display: flex;
	flex-direction: column;
}
.layout-column > * {
	min-height: 0;
}
.layout-column.stretch {
	align-items: stretch;
}
.layout-column.small-gap > *:not(:last-child) {
	margin-bottom: 20px;
}
.layout-column.gap > *:not(:last-child) {
	margin-bottom: 40px;
}
.layout-column.big-gap > *:not(:last-child) {
	margin-bottom: 80px;
}
.no-margin {
	margin: 0 !important;
}
.margin {
	margin: 40px !important;
}
.margin-v {
	margin-top: 40px !important;
	margin-bottom: 40px !important;
}
.no-padding {
	padding: 0 !important;
}
.padding {
	padding: 40px !important;
}
.padding-v {
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}

#search {
	box-sizing: border-box;
	border-radius: 6px;
}

#loadingBar {
	position: relative;
	flex: none;
	height: 3px;
	background: hsl(var(--muted, 210 40% 96%));
}
#loadingBar::after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity 1s ease-in;
	background: hsl(var(--primary, 222.2 47.4% 11.2%));
}
#loadingBar.loading::after {
	opacity: 1;
	transition: none;
}

.natural-gallery-js {
	margin-bottom: 40px;
}

.natural-gallery-js .figure {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	transition: all 0.2s ease-in-out;
}

.natural-gallery-js .figure:hover {
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	transform: translateY(-1px);
}

#version {
	display: inline-block;
	font-size: 0.8em;
	padding: 4px;
	color: hsl(var(--muted-foreground, 215.4 16.3% 46.9%));
	position: relative;
	top: -5px;
	margin-left: 5px;
}

.toolbar-buttons {
	display: flex;
}

.toolbar-buttons .suggestions {
	flex: 1;
}

/* Legacy search form styles - now hidden in favor of modern styles */
form.searchForm {
	display: none;
}

form.searchForm input[type=text] {
	padding: 10px;
	font-size: 17px;
	border: 1px solid hsl(var(--border, 214.3 31.8% 91.4%));
	float: left;
	width: 80%;
	background: hsl(var(--background, 0 0% 100%));
	border-radius: 6px 0 0 6px;
}

form.searchForm button {
	float: left;
	width: 20%;
	padding: 10px;
	background: hsl(var(--primary, 222.2 47.4% 11.2%));
	color: hsl(var(--primary-foreground, 210 40% 98%));
	font-size: 17px;
	border: 1px solid hsl(var(--primary, 222.2 47.4% 11.2%));
	border-left: none;
	cursor: pointer;
	border-radius: 0 6px 6px 0;
	transition: background-color 0.2s ease-in-out;
}

form.searchForm button:hover {
	background: hsl(var(--primary, 222.2 47.4% 11.2%) / 0.9);
}

form.searchForm::after {
	content: "";
	clear: both;
	display: table;
}

/* Modern overrides for PhotoSwipe */
.pswp {
	--pswp-bg: hsl(var(--background, 0 0% 100%));
	--pswp-placeholder-bg: hsl(var(--muted, 210 40% 96%));
}

/* Responsive improvements */
@media (max-width: 768px) {
	.row .container,
	.row .container-1000px,
	.row .container-1600px,
	.row .container-90perc,
	.row .container-80perc {
		padding-left: 16px;
		padding-right: 16px;
	}
	
	.layout-row.small-gap > *:not(:last-child) {
		margin-right: 12px;
	}
	
	.layout-column.small-gap > *:not(:last-child) {
		margin-bottom: 12px;
	}
	
	.natural-gallery-js .figure {
		border-radius: 6px;
	}
}

@media (max-width: 640px) {
	.row {
		margin-bottom: 24px;
	}
	
	.margin {
		margin: 24px !important;
	}
	
	.margin-v {
		margin-top: 24px !important;
		margin-bottom: 24px !important;
	}
}