:root {
	--bg: #fff;
	--fg: #000;
	--bg-primary: rgb(218, 106, 255);
	--bg-focus: rgb(196, 21, 255);
	--fg-primary: #000;

	--font-size: 16px;
	--border-size: 3px;
	--radius: 3px;
	--v-pad: .5em;
	--h-pad: .5em;
	--v-margin: 1em;
	--h-margin: .5em;
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		--bg: #000;
		--fg: #fff;
		--bg-primary: rgb(74, 0, 98);
		--bg-focus: rgb(155, 0, 207);
		--fg-primary: #fff;
	}
}

body {
	background-color: var(--bg);
	font-size: var(--font-size);
	color: var(--fg);
}

*:not(code) {
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body>* {
	margin: 0 auto;
}

h1.brand {
	text-align: center;
}

a {
	color: var(--fg-primary);
	padding: var(--v-pad) var(--h-pad);
	background-color: var(--bg-primary);
	text-decoration: none;
	display: inline-block;
	margin: 0;
}

a:hover {
	background-color: var(--bg-focus);
}

hr {
	border-color: var(--bg-focus);
	margin: var(--v-margin) 0;
}

/* search display */
section.search {
	margin-bottom: calc(3 * var(--v-margin));
}

section.search label {
	font-size: 1.2em;
	margin-bottom: var(--v-margin);
	display: block;
}

section.search .searchbar {
	display: flex;
}

section.search input,
section.search button {
	color: var(--fg-primary);
	padding: var(--v-pad) var(--h-pad);
	background-color: var(--bg-primary);
	border: var(--border-size) solid var(--bg-focus);
	font-size: 1.2em;
}

section.search input {
	flex: 1;
	font-family: 'Courier New', Courier, monospace;
	font-weight: bold;
	letter-spacing: .2ch;
	border-right: 0;
}

section.search button:hover {
	background-color: var(--bg-focus);
}

/* dropbox display */
p.dropbox-id {
	text-align: center;
}

p.dropbox-id>code {
	font-family: 'Courier New', Courier, monospace;
	font-weight: bold;
	letter-spacing: .2ch;
	padding: var(--v-pad) var(--h-pad);
	display: inline-block;
	background-color: var(--bg-primary);
	border: var(--border-size) solid var(--fg-primary);
}

@media screen and (min-width: 800px) {
	main {
		max-width: 800px;
	}
}

p.footer {
	margin-top: calc(3 * var(--v-margin));
}

ul.envelopes-list {
	list-style: none;
	padding-left: 0;
}

ul.envelopes-list>li {
	display: flex;
	align-items: baseline;
}

ul.envelopes-list>li:hover {
	background-color: var(--bg-primary);
}

ul.envelopes-list>li:hover a {
	background-color: var(--bg-focus);
}

ul.envelopes-list>li:hover a:hover {
	background-color: var(--bg);
	border: 2px solid var(--fg);
	padding: calc(var(--v-pad) - 2px) calc(var(--h-pad) - 2px);
}

ul.envelopes-list>li>p {
	margin: 0;
}

ul.envelopes-list>li>p:first-child {
	flex: 1;
	padding: 0 var(--h-pad) 0 0;
}

ul.envelopes-list>li:hover>p:first-child {
	padding-left: var(--h-pad);
}