/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}

:root {
	--sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--serif: "Georgia", serif;
	--max-width: 768px;
	--primary: #3b82f6;
}

body {
	font-family: var(--sans);
}

main {
	max-width: var(--max-width);
	margin: auto;
	padding: 1rem 1rem;
}

h1, h2, h3, h4, h5 {
	font-family: var(--serif);
	margin: 0;
}

h4 {
	font-weight: 400;
}

a {
	color: black;
	text-underline-offset: 3px;
	text-decoration-color: var(--primary);
	&:hover {
		text-decoration-thickness: 2px;
	}

	&.selected {
		font-weight: 700;
		text-decoration-thickness: 2px;
	}
}


.tags-label {
	color: #555;
	font-style: italic;
	margin: 0 0 1.5rem 0;
}

.tags-list {
	list-style-type: none;
	display: inline-flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	width: auto;
	margin: 0;
	padding: 0;
	font-style: italic;
	margin: 0 0 1.5rem 0;

	a {
		color: #555;
		text-underline-offset: 3px;
	}

	:hover {
		color: black;
		text-decoration-thickness: 2px;
	}
}

.author {
	margin: 0.6rem 0;
}

.note {
	color: #555;
	font-style: italic;
}

#navigation {
	width: 100%;
	border-bottom: solid 1px;
	margin: 0 0 1rem 0;
}

#navigation-inner {
	max-width: var(--max-width);
	margin: auto;
	padding: 0rem 1rem;
	display: flex;
	justify-items: center;
	align-items: center;

	h2 {
		text-wrap: nowrap;
		padding-right: 1.5rem;
	}

	input {
		width: 100%
	}

	ul {
		list-style-type: none;
		padding-left: 1rem;
		display: flex;
		gap: 1rem;
	}
}

.description {
	margin: 0 0 1rem 0;
}

#brand {
	text-decoration: none;
	&:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
		text-decoration-color: var(--primary);
		text-decoration-thickness: 2px;
	}
}

#search-wrapper {
	display: flex;
	justify-items: center;
	align-items: center;
	margin: 0;
	width: 100%;
}

#search {
	padding: 0.3rem 0.5rem;
	margin: 1rem 0;
}

@media print {
	.tags-list,
	.tags-label,
	#navigation {
		display: none;
	}
}