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}
 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.honk .noise {
181	line-height: 1.4;
182}
183.subtle {
184}
185.subtle .noise {
186	color: $fg-subtle;
187	font-size: 0.8em;
188}
189.subtle .noise a {
190	color: $fg-subtle;
191}
192.limited {
193	border: 1px solid $fg-limited;
194	color: $fg-limited;
195}
196.limited .noise {
197	color: $fg-limited;
198}
199.limited .noise a {
200	color: $fg-limited;
201}
202details.noise[open] summary {
203	display: none;
204}
205.inlineform {
206	display: inline;
207}
208.inlineform select {
209}
210.honk details.actions summary {
211	color: $fg-subtle;
212}
213.limited details.actions summary {
214	color: $fg-limited;
215}
216h1, h2 {
217	font-size: 1.2em;
218}
219h3, h4 {
220	font-size: 1.1em;
221}
222
223img:not(.emu) {
224	background: $bg-page;
225}
226img, video {
227	max-width: 100%;
228}
229img.emu {
230	width: 2em;
231	height: 2em;
232	vertical-align: middle;
233	margin: -2px;
234	object-fit: contain;
235}
236@media screen and (max-width: 740px) {
237	body {
238		font-size: 12px;
239	}
240	.honk header {
241		height: 52px;
242	}
243	.honk header img {
244		width: 48px;
245		height: 48px;
246	}
247}