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