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}
 82main {
 83	max-width: 1200px;
 84	margin: auto;
 85	font-size: 1.5em;
 86}
 87.info {
 88	background: $bg-dark;
 89	border: 1px solid $fg;
 90	margin-bottom: 1em;
 91	padding: 0em 1em 0em 1em;
 92}
 93.info div {
 94	margin-top: 1em;
 95	margin-bottom: 1em;
 96}
 97label, button, select {
 98	font-size: 16px;
 99	font-family: monospace;
100	color: $fg;
101	background: $bg-page;
102	border: 1px solid $fg;
103	padding: 0.5em;
104}
105button a {
106	text-decoration: none;
107}
108form {
109	margin-top: 1em;
110}
111textarea {
112	padding: 0.5em;
113	font-size: 1em;
114	background: $bg-page;
115	color: $fg;
116	width: 600px;
117	height: 8em;
118	margin-bottom: 0.5em;
119	box-sizing: border-box;
120	max-width: 100%;
121}
122input[type="checkbox"] {
123	position: fixed;
124	top: -9999px;
125}
126input[type="checkbox"] + span:after {
127	content: "no";
128}
129input[type="checkbox"]:checked + span:after {
130	content: "yes";
131}
132input[type="checkbox"]:focus + span:after {
133	outline: 1px solid $fg;
134}
135input[type=file] {
136	display: none;
137}
138
139.honk {
140	margin: auto;
141	background: $bg-dark;
142	border: 1px solid $fg;
143	border-radius: 1em;
144	margin-bottom: 1em;
145	padding-left: 1em;
146	padding-right: 1em;
147	padding-top: 0;
148	overflow: hidden;
149}
150.honk #honkform {
151	padding: 1em;
152	border: 1px solid $fg;
153}
154
155.honk a {
156	color: $fg;
157}
158.honk header .clip a {
159	color: $fg-subtle;
160}
161.honk header {
162	white-space: nowrap;
163	overflow: hidden;
164	text-overflow: ellipsis;
165	font-size: 0.8em;
166	line-height: 1.1;
167	margin-top: 1em;
168	height: 64px;
169}
170.honk header img {
171	float: left;
172	margin-right: 1em;
173	width: 64px;
174	height: 64px;
175}
176.honk header p {
177	margin-top: 0px;
178}
179.honk .actions button {
180	margin-left: 4em;
181	margin-top: 2em;
182}
183.honk .noise {
184	line-height: 1.4;
185}
186.subtle {
187}
188.subtle .noise {
189	color: $fg-subtle;
190	font-size: 0.8em;
191}
192.subtle .noise a {
193	color: $fg-subtle;
194}
195.limited {
196	border: 1px solid $fg-limited;
197	color: $fg-limited;
198}
199.limited .noise {
200	color: $fg-limited;
201}
202.limited .noise a {
203	color: $fg-limited;
204}
205details.noise[open] summary {
206	display: none;
207}
208.inlineform {
209	display: inline;
210}
211.inlineform select {
212}
213.honk details.actions summary {
214	color: $fg-subtle;
215}
216.limited details.actions summary {
217	color: $fg-limited;
218}
219h1, h2 {
220	font-size: 1.2em;
221}
222h3, h4 {
223	font-size: 1.1em;
224}
225
226img:not(.emu) {
227	background: $bg-page;
228}
229img, video {
230	max-width: 100%;
231	max-height: 600px;
232}
233img.emu {
234	width: 2em;
235	height: 2em;
236	vertical-align: middle;
237	margin: -2px;
238	object-fit: contain;
239}
240@media screen and (max-width: 740px) {
241	body {
242		font-size: 12px;
243	}
244	.honk header {
245		height: 52px;
246	}
247	.honk header img {
248		width: 48px;
249		height: 48px;
250	}
251}