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