html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	--regular: 14px;
	--caps: 10px;
	--big: 18px;
	--small: 12px;
	--percent: 5%;
	--d: 0.2s;
	--silver: #a0a0a0;
	--gray: #606060;
	--white: #fff;
	--black: #000;
	--whitesmoke: #f0f0f0;
	--gainsboro: #d0d0d0;
}

@media (prefers-color-scheme: dark) {
	html {
		--silver: #808080;
		--gray: #c0c0c0;
		--white: #000;
		--black: #fff;
		--whitesmoke: #202020;
		--gainsboro: #404040;
	}
}

* {
	margin: 0;
	padding: 0;
}

::-webkit-input-placeholder { color: var(--gray); }

::-moz-placeholder { color: var(--gray); }

body, input, textarea {
	/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; */
	font-family: "Route 159", sans-serif;
	font-size: var(--regular);
	line-height: 20px;
}

body {
	background-color: var(--whitesmoke);
	cursor: default;
}

svg { stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
svg path { fill: none; stroke: var(--black); }

b, u {
	font-weight: normal;
	text-decoration: none;
}

sup { line-height: 0; }

img {
	border-radius: 7px;
	display: block;
}

a {
	color: var(--black);
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s;
}

.center {
	margin: 0 auto;
	max-width: 480px;
}

.main {
	background-color: var(--white);
	border-bottom: var(--gainsboro) 1px solid;
	border-top: var(--gainsboro) 1px solid;
}

.menu {
	overflow: hidden;
	padding: 10px 0;
	padding-top: 20px;
	padding-bottom: 10px;
	text-transform: lowercase;
}

h5 {
	color: var(--silver);
	font-size: var(--small);
	font-weight: normal;
	line-height: 12px;
	margin-left: var(--percent);
	padding-top: 3px;
}

h1 {
	font-size: var(--big);
	font-weight: normal;
	line-height: 25px;
	margin-left: var(--percent);
	overflow: hidden;
}
	h1 a {
		color: var(--silver);
		display: block;
		float: left;
		margin: 0 5px;
	}
	h1 a:first-child { margin-left: 0; }
	h1 a:last-child { margin-right: 0; }
	h1 a:hover { color: var(--gray); }
	h1 a.selected { color: var(--black); }

form {
	padding: 10px 0;
	overflow: hidden;
}

textarea, input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--white);
	border: 0 none;
	border-bottom: var(--gainsboro) 1px solid;
	border-radius: 0;
	color: var(--black);
	display: block;
	outline: 0 none;
	padding: 5px var(--percent);
	resize: none;
	width: calc(100% - 2 * var(--percent));
}

input[type=submit] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	float: right;
	cursor: pointer;
	color: var(--gray);
	padding: 3px 10px;
	background-color: var(--white);
	border: var(--gainsboro) 1px solid;
	border-radius: 3px;
	font-size: var(--caps);
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 5px;
	margin-right: var(--percent);
	transition: border-color 0.5s;
	width: auto;
}
	input[type=submit]:hover { border-color: var(--silver); }

textarea.last, input.last {
	border-bottom: 0 none;
	margin-bottom: 10px;
}

input.key { margin-bottom: 10px; }

.entry {
	border-bottom: var(--gainsboro) 1px solid;
	color: var(--gray);
	overflow: hidden;
	padding: 10px var(--percent);
}
	.entry:last-child { border-bottom: 0 none; }
	.entry .quote {
		color: var(--gray);
		cursor: text;
	}
	.entry .note {
		color: var(--silver);
		cursor: text;
	}
	.entry .prefix {
		display: block;
		color: var(--silver);
		margin-left: calc(-1 * var(--percent));
		float: left;
		width: var(--percent);
		text-align: center;
	}

.status {
	color: var(--silver);
	padding: 10px var(--percent);
}

.links p { float: left; width: 50%; }
.links p:first-child { float: none; width: auto; }

.pages {
	color: var(--silver);
	font-size: var(--small);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
	.pages a {
		border-right: var(--gainsboro) 1px solid;
		color: var(--silver);
		float: left;
		padding: 0 9.5px;
	}
	.pages a:hover { color: var(--gray); }
	.pages a:first-child { padding-left: 0; }
	.pages a:last-child {
		border-right: 0 none;
		padding-right: 0;
	}
	.pages a.selected { color: var(--black); }

.search {
	border-bottom: var(--gainsboro) 1px solid;
	padding: 10px var(--percent);
}
	.search input {
		padding: 0;
		width: 100%;
		border-bottom: 0 none;
	}

.product {
	margin-bottom: 5px;
	padding-left: 50px;
}
	.product:last-child { margin-bottom: 0; }
	.product svg {
		background-color: var(--white);
		border: var(--gainsboro) 1px solid;
		border-radius: 10px;
		float: left;
		margin-left: -50px;
		padding: 9px;
	}
	.product strong { color: var(--black); }
	.product p { color: var(--silver); }
	.product p a { color: var(--silver); }
	.product p:last-child { color: var(--gray); }
	.product p:last-child a { color: var(--black) }

.meta {
	color: var(--silver);
	font-size: var(--caps);
	letter-spacing: 1px;
	overflow: hidden;
	text-transform: uppercase;
}
	.meta a, .meta b { float: left; }
	.meta a { color: var(--silver); }
	.meta a:hover { color: var(--gray); }
	.meta b { padding: 0 5px; }

.footer {
	color: var(--silver);
	font-size: var(--caps);
	letter-spacing: 1px;
	padding: 10px 0;
	padding-bottom: 20px;
	padding-top: 10px;
	text-transform: uppercase;
}
	.footer a { color: var(--gray); }
	.footer b { padding: 0 3px; }
	.footer p { padding: 0 var(--percent); }

@font-face {
	font-family: "Route 159";
	font-style: normal;
	font-weight: normal;
	src: url(route159/regular.woff2) format("woff2");
}

@font-face {
	font-family: "Route 159";
	font-style: normal;
	font-weight: bold;
	src: url(route159/bold.woff2) format("woff2");
}