html,
body {
	min-height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	line-height: var(--line);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html.no-scroll,
body.no-scroll {
	overflow: hidden;
}

html.photos-page,
body.photos-page {
	height: 100%;
	overflow: hidden;
}

body.photos-page main {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1 1 auto;
}

@media (max-height: 240px), (max-width: 280px) and (max-height: 300px) {
	html.photos-page {
		height: auto;
		overflow: auto;
	}

	body.photos-page {
		height: auto;
		overflow: visible;
	}

	body.photos-page main {
		display: block;
		flex: none;
		overflow: visible;
	}
}

a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	position: relative;
	transition: border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}

a:hover {
	color: var(--accent);
	border-color: color-mix(in oklab, var(--accent), transparent 60%);
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: 0;
	height: 1px;
	background: var(--accent);
	transform: translateX(-50%);
	transition: width 140ms ease;
}

a:hover::after,
a:focus-visible::after {
	width: 100%;
}

html[data-browser="ladybird"] a::after {
	transition: none;
}