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 li {
 74	margin: 1em 0em 1em 0em;
 75}
 76main {
 77	max-width: 1200px;
 78	margin: auto;
 79	font-size: 1.5em;
 80}
 81.info {
 82	background: $bg-dark;
 83	border: 1px solid $fg;
 84	margin-bottom: 1em;
 85	padding: 0em 1em 0em 1em;
 86}
 87.info div {
 88	margin-top: 1em;
 89	margin-bottom: 1em;
 90}
 91label, button, select {
 92	font-size: 16px;
 93	font-family: monospace;
 94	color: $fg;
 95	background: $bg-page;
 96	border: 1px solid $fg;
 97	padding: 0.5em;
 98}
 99button a {
100	text-decoration: none;
101}
102form {
103	margin-top: 1em;
104}
105textarea {
106	padding: 0.5em;
107	font-size: 1em;
108	background: $bg-page;
109	color: $fg;
110	width: 600px;
111	height: 8em;
112	margin-bottom: 0.5em;
113	box-sizing: border-box;
114	max-width: 100%;
115}
116input[type="checkbox"] {
117	position: fixed;
118	top: -9999px;
119}
120input[type="checkbox"] + span:after {
121	content: "no";
122}
123input[type="checkbox"]:checked + span:after {
124	content: "yes";
125}
126input[type="checkbox"]:focus + span:after {
127	outline: 1px solid $fg;
128}
129input[type=file] {
130	display: none;
131}
132
133.honk {
134	margin: auto;
135	background: $bg-dark;
136	border: 1px solid $fg;
137	border-radius: 1em;
138	margin-bottom: 1em;
139	padding-left: 1em;
140	padding-right: 1em;
141	padding-top: 0;
142	overflow: hidden;
143}
144.honk #honkform {
145	padding: 1em;
146	border: 1px solid $fg;
147}
148
149.honk a {
150	color: $fg;
151}
152.honk header .clip a {
153	color: $fg-subtle;
154}
155.honk header {
156	white-space: nowrap;
157	overflow: hidden;
158	text-overflow: ellipsis;
159	font-size: 0.8em;
160	line-height: 1.1;
161	margin-top: 1em;
162	height: 64px;
163}
164.honk header img {
165	float: left;
166	margin-right: 1em;
167	width: 64px;
168	height: 64px;
169}
170.honk header p {
171	margin-top: 0px;
172}
173.honk .actions button {
174	margin-left: 4em;
175	margin-top: 2em;
176}
177.honk .noise {
178	line-height: 1.4;
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}