1$bg-page: #305;
  2$bg-dark: #002;
  3$fg: #dde;
  4$fg-subtle: #aab;
  5$fg-limited: #a79;
  6
  7body {
  8	background: $bg-page;
  9	color: $fg;
 10	font-size: 1em;
 11	word-wrap: break-word;
 12	font-family: sans-serif, "Noto Color Emoji";
 13	line-height: 1.2;
 14}
 15pre, code {
 16	white-space: pre-wrap;
 17}
 18blockquote {
 19	margin-left: 0em;
 20	padding-left: 0.5em;
 21	border-left: 1px solid $fg-subtle;
 22}
 23table {
 24	display: block;
 25	max-width: 100%;
 26	overflow-x: auto;
 27}
 28a {
 29	color: $fg;
 30}
 31form, input, textarea {
 32	font-family: monospace, "Noto Color Emoji";
 33}
 34p {
 35	margin-top: 1em;
 36	margin-bottom: 1em;
 37}
 38input {
 39	background: $bg-page;
 40	color: $fg;
 41	font-size: 1.0em;
 42	line-height: 1.2em;
 43	padding: 0.4em;
 44}
 45#honkform input {
 46	font-size: 0.8em;
 47}
 48body > header {
 49	margin: 1em auto;
 50	font-size: 1.5em;
 51}
 52body > header span {
 53	margin-left: 2em;
 54}
 55body > header p {
 56	padding: 1em;
 57}
 58header > details {
 59	background: $bg-page;
 60	padding: 1em 1em 1em 1em;
 61	position: fixed;
 62	top: 0;
 63	left: 0;
 64	display: inline;
 65	max-height: calc(100% - 1em);
 66	overflow: auto;
 67	opacity: 0.7;
 68}
 69header > details[open] {
 70	padding: 1em 1em 0em 1em;
 71	background: $bg-dark;
 72	border: 1px solid $fg;
 73	margin-bottom: 1em;
 74	opacity: 1.0;
 75}
 76header > details li {
 77	margin: 1em 0em 1em 0em;
 78}
 79details summary {
 80	display: inline;
 81}
 82@supports (-moz-appearance:none) {
 83	details summary {
 84		display: list-item;
 85	}
 86}
 87main {
 88	max-width: 1200px;
 89	margin: auto;
 90	font-size: 1.5em;
 91}
 92.info {
 93	background: $bg-dark;
 94	border: 1px solid $fg;
 95	margin-bottom: 1em;
 96	padding: 0em 1em 0em 1em;
 97}
 98.info div {
 99	margin-top: 1em;
100	margin-bottom: 1em;
101}
102label, button, select {
103	font-size: 16px;
104	font-family: monospace;
105	color: $fg;
106	background: $bg-page;
107	border: 1px solid $fg;
108	padding: 0.5em;
109}
110button a {
111	text-decoration: none;
112}
113form {
114	margin-top: 1em;
115}
116textarea {
117	padding: 0.5em;
118	font-size: 1em;
119	background: $bg-page;
120	color: $fg;
121	width: 600px;
122	height: 8em;
123	margin-bottom: 0.5em;
124	box-sizing: border-box;
125	max-width: 100%;
126}
127input[type="checkbox"] {
128	position: fixed;
129	top: -9999px;
130}
131input[type="checkbox"] + span:after {
132	content: "no";
133}
134input[type="checkbox"]:checked + span:after {
135	content: "yes";
136}
137input[type="checkbox"]:focus + span:after {
138	outline: 1px solid $fg;
139}
140input[type=file] {
141	display: none;
142}
143
144.honk {
145	margin: auto;
146	background: $bg-dark;
147	border: 1px solid $fg;
148	border-radius: 1em;
149	margin-bottom: 1em;
150	padding-left: 1em;
151	padding-right: 1em;
152	padding-top: 0;
153	overflow: hidden;
154}
155.honk #honkform {
156	padding: 1em;
157	border: 1px solid $fg;
158}
159
160.honk a {
161	color: $fg;
162}
163.honk header .clip a {
164	color: $fg-subtle;
165}
166.honk header {
167	white-space: nowrap;
168	overflow: hidden;
169	text-overflow: ellipsis;
170	font-size: 0.8em;
171	line-height: 1.1;
172	margin-top: 1em;
173	height: 64px;
174}
175.honk header img {
176	float: left;
177	margin-right: 1em;
178	width: 64px;
179	height: 64px;
180}
181.honk header p {
182	margin-top: 0px;
183}
184.honk .actions button {
185	margin-left: 4em;
186	margin-top: 2em;
187}
188.honk .noise {
189	line-height: 1.4;
190}
191.subtle {
192}
193.subtle .noise {
194	color: $fg-subtle;
195	font-size: 0.8em;
196}
197.subtle .noise a {
198	color: $fg-subtle;
199}
200.limited {
201	border: 1px solid $fg-limited;
202	color: $fg-limited;
203}
204.limited .noise {
205	color: $fg-limited;
206}
207.limited .noise a {
208	color: $fg-limited;
209}
210details.noise[open] summary {
211	display: none;
212}
213.inlineform {
214	display: inline;
215}
216.inlineform select {
217}
218.honk details.actions summary {
219	color: $fg-subtle;
220}
221.limited details.actions summary {
222	color: $fg-limited;
223}
224h1, h2 {
225	font-size: 1.2em;
226}
227h3, h4 {
228	font-size: 1.1em;
229}
230
231img:not(.emu) {
232	background: $bg-page;
233}
234img, video {
235	max-width: 100%;
236	max-height: 600px;
237}
238img.emu {
239	width: 2em;
240	height: 2em;
241	vertical-align: middle;
242	margin: -2px;
243	object-fit: contain;
244}
245@media screen and (max-width: 740px) {
246	body {
247		font-size: 12px;
248	}
249	.honk header {
250		height: 52px;
251	}
252	.honk header img {
253		width: 48px;
254		height: 48px;
255	}
256}