@-ms-viewport {width: device-width;}
@viewport {width: device-width;}
@-moz-document url-prefix() {
	*::-moz-focus-inner {
		all: unset!important;
	}
}

* {
	-webkit-appearance: none!important;
	   -moz-appearance: none!important;
	        appearance: none!important;
}
html {
	font: normal 10pt/1 'Inter', sans-serif;
	letter-spacing: -0.00424em;
	width: 100%; height: 100%; /* ie11 needs this for fullscreen */
	background:
		repeating-linear-gradient(0deg,
			rgba(255,255,255,.0274509803922)  0pt, /* .03125 */
			rgba(255,255,255,.0274509803922)  1pt, /* .03125 */
			transparent                       1pt,
			transparent                       5pt,
			rgba(0,0,0,.121568627451)         5pt, /* .125 */
			rgba(0,0,0,.121568627451)        25pt, /* .125 */
			transparent                      25pt,
			transparent                      29pt,
			rgba(255,255,255,.0274509803922) 29pt, /* .03125 */
			rgba(255,255,255,.0274509803922) 30pt /* .03125 */
		) center / 34.6410161514pt 60pt repeat,
		repeating-linear-gradient(60deg,
			rgba(255,255,255,.0274509803922)  0pt, /* .03125 */
			rgba(255,255,255,.0274509803922)  1pt, /* .03125 */
			transparent                       1pt,
			transparent                       5pt,
			rgba(0,0,0,.121568627451)         5pt, /* .125 */
			rgba(0,0,0,.121568627451)        25pt, /* .125 */
			transparent                      25pt,
			transparent                      29pt,
			rgba(255,255,255,.0274509803922) 29pt, /* .03125 */
			rgba(255,255,255,.0274509803922) 30pt /* .03125 */
		) center / 34.6410161514pt 60pt repeat,
		repeating-linear-gradient(-60deg,
			rgba(255,255,255,.0274509803922)  0pt, /* .03125 */
			rgba(255,255,255,.0274509803922)  1pt, /* .03125 */
			transparent                       1pt,
			transparent                       5pt,
			rgba(0,0,0,.121568627451)         5pt, /* .125 */
			rgba(0,0,0,.121568627451)        25pt, /* .125 */
			transparent                      25pt,
			transparent                      29pt,
			rgba(255,255,255,.0274509803922) 29pt, /* .03125 */
			rgba(255,255,255,.0274509803922) 30pt /* .03125 */
		) center / 34.6410161514pt 60pt repeat,
		rgb(13,13,13);
	background:
		repeating-linear-gradient(
			0deg,
			hsla(0,0%,100%,.015625)  0pt,
			hsla(0,0%,  0%,.015625) 30pt
		) center / 34.6410161514pt 60pt repeat,
		repeating-linear-gradient(
			60deg,
			hsla(0,0%,100%,.015625)  0pt,
			hsla(0,0%,  0%,.015625) 30pt
		) center / 34.6410161514pt 60pt repeat,
		repeating-linear-gradient(
			-60deg,
			hsla(0,0%,100%,.015625)  0pt,
			hsla(0,0%,  0%,.015625) 30pt
		) center / 34.6410161514pt 60pt repeat,
		rgb(13,13,13);
}
@supports (font-variation-settings: normal) {
	html {
		font-family: 'Inter var', sans-serif;
	}
}
body {
	color: hsl(0,0%,85%);
	margin: 0;
	padding: calc((100vh - (100vw - 24em) / 16 * 9 - 3em) * 0.5) 0 0;
	/*text-align: justify;*/
	-webkit-hyphens: auto;
	        hyphens: auto;
}
a {
	color: hsl(210,100%,50%);
	text-decoration: none;
}
a:visited {
	color: hsl(30,100%,50%);
}

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	text-transform: uppercase;
	/* font-family: 'IM Fell DW Pica SC', serif; */
}
p,
ol, ul, dl,
h1, h2, h3, h4, h5, h6 {
	margin: 1em 0 0;
}
ol, ul {
	padding: 0 0 0 1em;
}
iframe {
	border: none;
}

:focus,
#menu-on:focus ~ #info > label[for=menu-on] {
	outline: 2px solid hsla(210,100%,50%,.25);
	outline-offset: -2px;
}
button:hover,
label:hover {
	outline: 1px solid hsla(210,100%,50%,.75);
	outline-offset: -1px;
}
input, textarea, button, select, option, optgroup, label {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}
input, textarea {
	line-height: 1.25;
	margin: 0 -.25em;
	padding: 0 .25em;
	border: none;
	background: transparent;
	/* background:
		-webkit-repeating-linear-gradient(90deg,
			hsla(0,0%,100%,.03125),
			hsla(0,0%,100%,.03125) .125em,
			transparent .125em,
			transparent .25em),
		-webkit-repeating-linear-gradient(0deg,
			hsla(0,0%,100%,.03125),
			hsla(0,0%,100%,.03125) .125em,
			transparent .125em,
			transparent .25em); */
	background: hsla(0,0%,100%,.03125);
	background-origin: content-box;
	box-sizing: content-box!important;
}
textarea {
	max-width: 100%;
	resize: vertical;
}
input[type=submit],
input[type=reset],
button,
select,
label[for] {
	display: inline-block;
	vertical-align: baseline;
	margin: 0;
	padding: .5em;
	background: hsla(0,0%,0%,.75);
	border: none;
	color: inherit;
	text-align: inherit;
}
input[type=submit],
input[type=reset],
button,
label[for] {
	margin: -.5em 0;
}
button.text-like {
	display: inline;
	margin: 0;
	padding: 0;
	background: transparent;
}
label.fw,
label.fw input,
label.fw textarea,
label.fw select,
label.fw button {
	display: block;
	width: 100%;
	box-sizing: border-box;
}
label.inflating {
	position: relative;
}
label.inflating textarea {
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
	height: 100%; resize: none;
	overflow: hidden;
}
label.inflating .content-copy {
	display: block;
	opacity: 0;
}
label.inflating textarea,
label.inflating .content-copy {
	line-height: 1.25;
	white-space: pre-wrap;
	word-break: normal;
	word-wrap: break-word;
}
.popup-anchor {
	display: inline-block;
	word-break: normal;
	word-wrap: break-word;
	position: absolute;
}
.popup-anchor::after {
	content: '';
	width: 1em;
	height: 1em;
	display: block;
	position: absolute;
	bottom: 0;
	background: url('data:image/svg+xml,\
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221\
.1%22%20width%3D%2210%22%20height%3D%2210%22%20viewbox%3D%220%200%2010%2010%\
22%3E%3Cpath%20d%3D%22M%200%2C0%200%2C10%2010%2C0%20z%22%20style%3D%22fill%3\
A%230f0f0f%3Bfill-opacity%3A.9375%3Bstroke%3Anone%22%20%2F%3E%3C%2Fsvg%3E')
		top right / 1em 1em no-repeat;
	left: 1em;
	z-index: 2;
}
.popup-body {
	background: hsla(0,0%,6.25%,.9375);
	position: absolute;
	bottom: 1em;
	left: 0;
	padding: 0px 1em 1em;
	box-shadow: 0 .125em .25em hsla(0,0%,0%,.5);
	z-index: 2;
}
input[type=checkbox],
input[type=radio] {
	position: absolute!important;
	width: 0!important;
	height: 0!important;
	pointer-events: none;
	clip-path: circle(0%);
}
input.scriptless {
	display: none;
}
select {
	padding: 0 1.5em 0 0;
	background: url('data:image/svg+xml,\
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221\
.1%22%20width%3D%2210%22%20height%3D%2210%22%20viewbox%3D%220%200%2010%2010%\
22%3E%3Cpath%20d%3D%22M%201%2C3%205%2C8%209%2C3%20z%22%20style%3D%22fill%3A%\
23ffffff%3Bfill-opacity%3A1%3Bstroke%3Anone%22%20%2F%3E%3C%2Fsvg%3E')
		right .5em center / auto 1em no-repeat, hsla(0,0%,0%,.75);
}
input:checked ~ .when-off {
	display: none;
}
input:not(:checked) ~ .when-on {
	display: none;
}
input[disabled],
textarea[disabled],
select[disabeld],
button[disabled],
input[disabled] ~ .when-on,
input[disabled] ~ .when-off {
	opacity: .5;
}
.flex {
	display: flex;
}
.flex-main {
	flex: 1 0 auto;
}
.flex-aux {
	flex: 0 0 auto;
}

#banner {
	padding: 0 0 15% 0;
	margin: 0;
	height: 0;
	color: transparent;
}
#page {
	/* background-image: url('data:image/png;base64,\
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAKElEQVQoz2OcOXMmAzZw9uxZrOJM\
DCSCUQ3EABZc4W1sbDwaSvTTAABS2wdUfD43jQAAAABJRU5ErkJggg=='); */
	max-width: calc((100vh - 3em) / 9 * 16 + 24em);
	margin: 0 0 0 auto;
}
#page::after {
	content: '';
	clear: both;
	display: block;
}
#container {
	position: relative;
	padding: 0 0 0 24em;
}
#container::after {
	content: '';
	display: block;
	height: 1px;
	margin: -1px 0 0;
}

#comms {
	position: absolute;
	left: 0;
	top: 0;
	width: 24em;
	height: 100%;
	/*z-index: 0;*/
	opacity: 1;
	transition: opacity .5s cubic-bezier(.77, 0, .18, 1);
}
#comms > h2 {
	display: none;
}
#comms > iframe {
	display: block;
	width: 100%;
	height: 100%;
}


/* #info {
	display: flex;
}
#info > label {
	flex: none;
}
#info > div {
	flex: none;
	padding: 1.5em .5em .5em;
	transition: flex .5s cubic-bezier(.77, 0, .18, 1);
}
#info > div > span {
	display: none;
}
#info > div:hover {
	flex: auto;
}
#info > div:hover > span {
	display: inline;
} */


#info {
	display: flex;
	flex-flow: row nowrap;
	position: relative;
	/*z-index: 1;*/
	height: 3em;
	align-items: stretch;
}
#info label {
	flex: 0 0 3em;
	font-weight: bold;
	display: block;
	margin: 0;
	padding: 1em;
	border: none;
	box-sizing: border-box;
}
#info > h1 {
	flex: 0 1 auto;
	align-self: flex-end;
	text-transform: unset;
	font-variant: small-caps;
	font-family: inherit;
	margin: 0;
	padding: 0 .5em 1em;
	opacity: 1;
	transition: opacity .5s cubic-bezier(.77, 0, .18, 1);
}
#menu-on:checked ~ #info > h1 {
	opacity: 0;
}


#aspect-parent {
	position: relative;
	transition: margin .5s cubic-bezier(.77, 0, .18, 1);
}
#menu {
	pointer-events: none;
	float: left;
	position: relative;
	width: 24em;
	left: 0;
	margin: calc(-56.25% - 3em) -24em 0 0;
	/*z-index: 1;*/
	max-height: calc(100vh - 5em);
	overflow: hidden;
	opacity: 0;
	transition: opacity    .5s cubic-bezier(.77, 0, .18, 1)
	,           left       .5s cubic-bezier(.77, 0, .18, 1)
	,           margin     .5s cubic-bezier(.77, 0, .18, 1)
	,           max-height .5s cubic-bezier(.77, 0, .18, 1);
}
#menu > div {
	width: 24em;
	transition: max-height .5s cubic-bezier(.77, 0, .18, 1);
	max-height: calc((100vw - 24em) / 16 * 9);
	overflow: hidden;
}
#menu-on:checked ~ #aspect-parent > #menu {
	opacity: 1;
	pointer-events: unset;
	left: -24em;
	max-height: 240em;
	overflow: unset;
}
#menu-on:checked ~ #aspect-parent > #menu > div {
	max-height: 240em;
	overflow: unset;
}
#menu-on:checked ~ #comms {
	opacity: 0;
}
#aspect-child {
	padding: 56.25% 0 0;
}
.aspect-content {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.tall-content {
	position: relative;
	float: right;
	width: 100%;
	margin: 0;
	transition: margin-top .5s cubic-bezier(.77, 0, .18, 1);
}
.controls {
	margin: 0;
	padding: .5em;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition: opacity .5s cubic-bezier(.77, 0, .18, 1);
}
.aspect-content,
.tall-content,
.controls {
	z-index: 1;
}
#aspect-parent:hover > .controls {
	opacity: 1;
}
.controls button {
	margin: -.5em 0;
	width: 2em;
}
.controls button:first-child {
	margin: -.5em 0 -.5em -.5em;
}

#info,
#menu > div,
.aspect-content,
.tall-content,
/* #controls, */
.popup-body {
	/*background: hsla(0,0%,0%,.75);*/
	/*z-index: 2;*/
}
#menu > div,
.tall-content {
	padding: 0 1em 1em;
	box-sizing: border-box;
}
/* add all elements which are scrollable and padded */
/* {
	content: '';
	display: block;
	height: 1em;
} */

.centered-in-aspect-content {
	text-align: center;
	padding: 28.125% 0 0;
	margin: -.5em 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.op, .bro, .off {
	display: inline-block;
	color: white;
}
.op {
	background: hsla(0,0%,0%,.5);
	padding: 0 .25em;
}
.off {
	background: hsla(0,0%,0%,1);
	padding: 0 .25em;
	opacity: .5;
}
.input-block {
	/*background: transparent -webkit-repeating-radial-gradient(
			circle at 1em 1em,
			rgba(255, 255, 255, 0.063),
			rgba(255, 255, 255, 0.063) 1px,
			transparent 1px,
			transparent calc(1em - 1px)
		) repeat scroll 0% 0%;
	background: transparent repeating-radial-gradient(
			circle at 1em 1em,
			rgba(255, 255, 255, 0.063),
			rgba(255, 255, 255, 0.063) 1px,
			transparent 1px,
			transparent calc(1em - 1px)
		) repeat scroll 0% 0%;
	background: transparent repeating-radial-gradient(
			circle at 1em 1em,
			transparent,
			transparent .875em,
			rgba(0, 0, 0, 0.063) .875em,
			rgba(0, 0, 0, 0.063) 1em
		) repeat scroll 0% 0%;*/
}
.channel-list,
.channel-status-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.channel-item {
	margin: 1em 0 0;
	min-height: 2.5em;
	position: relative;
}
.channel-link,
.channel-link:visited {
	color: inherit;
	display: block;
	text-decoration: inherit;
	position: absolute;
	padding: 0 1em;
	top: -.5em; bottom: -.5em;
	left: -1em; right: -1em;
}
.channel-link.active {
	border-left: .5em solid;
	padding: 0 1em 0 .5em;
}
.channel-link:hover {
	background: hsla(0,0%,100%,0.1875);
}
.channel-item + .channel-item .channel-link {
	border-top: .125em solid hsla(0,0%,100%,.125);
}
.channel-item h3 {
	font-size: 200%;
	margin: .5em 0 0;
	opacity: .25;
	font-weight: normal;
}
.channel-item + .channel-item h3 {
	margin: .4325em 0 0;
}
.channel-description {
	font-variant: small-caps;
	position: relative;
	font-weight: bold;
	transition: filter .5s cubic-bezier(.77, 0, .18, 1);
}
.for-editing .popup-body {
	width: 22em;
}

#editing-on:checked ~ * .channel-list {
	margin: 0 0 0 2em;
}
#editing-on:checked ~ * .channel-list .channel-status {
	position: relative;
}
#editing-on:not(:checked) ~ .for-editing,
#editing-on:not(:checked) ~ * .for-editing {
	display: none;
}
#editing-on:not(:checked) ~ * .channel-status-list {
	pointer-events: none;
}
.channel-status-picker {
	position: absolute;
	top: -.5em; bottom: -.5em;
	left: -3em; width: 2em;
}
/*.channel-status:first-child .channel-description {
	z-index: 2;
}*/
.channel-status:first-child>.channel-description::before {
	content: '\0000A0';
	font-size: 500%;
	display: inline-block;
	line-height: .615;
	width: 0;
	opacity: 0;
}
.channel-status:first-child>.channel-description:empty::before {
	font-size: 350%;
}
.channel-status:nth-child(1n+2) .channel-description {
	filter: grayscale(.5) blur(1px);
	opacity: .75;
}
.channel-status-picker-feedback {
	position: absolute;
	top: 50%;
	margin-top: -.5em;
	left: .5em;
}
.input-block .channel-description:before {
	content: '.';
	display: inline-block;
	width: 100%;
	margin: 0 -100% -1px 0;
	border-bottom: 1px solid hsla(0,100%,50%,.5);
	font-size: 0;
	vertical-align: baseline;
	height: 0;
	background: hsla(0,100%,50%,.25);
	padding: 9.75px 0 0 0;
}


.colored {
	margin: .5em -1em -.5em!important; /* TODO: remove when conflict witch chat styling is resolved */
	padding: .5em 1em;
}
.error {
	background: maroon;
}
.warning {
	background: orange;
	color: black;
}
/*.colored + .colored {
	margin-top: 0;
}
.colored:last-child {
	margin-bottom: -1em;
}*/
.ajax.en-route input[type=submit],
.ajax.en-route button[type=submit] {
	background: hsla(210,100%,50%,.75);
}
.ajax.ok input[type=submit],
.ajax.ok button[type=submit] {
	background: hsla(80,100%,30%,.75);
}
.ajax.error input[type=submit],
.ajax.error button[type=submit] {
	background: hsla(0,100%,30%,.75);
}


.smooth {
	box-sizing: border-box;
	transition: margin  .5s cubic-bezier(.77, 0, .18, 1)
	,           padding .5s cubic-bezier(.77, 0, .18, 1)
	,           height  .5s cubic-bezier(.77, 0, .18, 1)
	,           opacity .5s cubic-bezier(.77, 0, .18, 1);
}
.deflated {
	padding: 0!important;
	height:  0!important;
}
.disappeared {
	opacity: 0!important;
}


/* css gets its ems for @media rules from somwhere else
 *                 72em                    32em */
@media (min-width: 720pt) and (min-height: 320pt) and (min-aspect-ratio: 1/1) {
	/* spacious layout section */
	#menu-on:checked ~ #aspect-parent {
		margin: 6.75em 0 6.75em 24em;
	}
	#menu-on:checked ~ #aspect-parent > .tall-content {
		margin: -6.75em 0 0;
	}
	#menu-on:checked ~ #comms {
		opacity: unset;
	}
	#menu {
		margin: -56.25% -24em 0 0;
		transition: opacity    .5s cubic-bezier(.77, 0, .18, 1)
		,           left       .5s cubic-bezier(.77, 0, .18, 1)
		,           margin     .5s cubic-bezier(.77, 0, .18, 1)
		,           max-height .5s cubic-bezier(.77, 0, .18, 1)
		/*,           z-index 0s linear .5s;*/
	}
	#menu-on:checked ~ #aspect-parent > #menu {
		margin: calc(-56.25% - 6.75em) -24em 0 0;
	}
}

@media (max-aspect-ratio: 1/1) {
	/* vertical layout section */
	body {
		padding: 0;
	}
	#banner {
		display: none;
	}
	#container {
		padding: 0;
	}
	#info {
		position: relative;
	}
	.tall-content {
	}
	#menu {
		margin: 0;
		/*z-index: 0;*/
		max-height: 0;
		left: unset;
		width: 100%;
		opacity: unset;
		transition: max-height .5s cubic-bezier(.77, 0, .18, 1);
	}
	#menu > div {
		width: unset;
		max-height: unset;
	}
	#menu-on:checked ~ #aspect-parent > #menu {
		/*z-index: 0;*/
		max-height: 240em;
		left: unset;
		opacity: unset;
	}
	#comms {
		position: static;
		width: 100%;
		height: calc(100vh - 56.25vw - 3em);
		transition: margin .5s cubic-bezier(.77, 0, .18, 1);
	}
	#menu-on:checked ~ #comms {
		margin: calc(-100vh + 56.25vw + 3em) 0 0 0;
		opacity: unset;
	}
	#menu-on:checked ~ #aspect-parent > #menu > div {
		max-height: unset;
	}
}

svg.icon {
	height: 1em;
	width: 1em;
	vertical-align: bottom;
}
svg.icon use {
	fill: currentColor;
}
.smooth-line {
	fill: none;
	stroke: currentColor;
	stroke-width: 1px;
	/*shape-rendering: geometricprecision;*/
}
.crisp-line {
	fill: none;
	stroke: currentColor;
	stroke-width: 1px;
	stroke-linecap:square;
	/*shape-rendering: crispedges;*/
}
.red-dash {
	stroke: #7f0000;
	stroke-width: 5px;
}

kbd {
	display: inline-block;
	vertical-align: bottom;
	font-family: inherit;
	width: 1.25em;
	font-size: 50%;
	font-weight: 700;
	color: hsla(0,0%,0%,.75);
	background: hsla(0,0%,100%,.75);
	padding: 0 0 .25em 0;
	border: .125em solid hsla(0,0%,0%,.25);
	margin: 0;
	transform-origin: top left;
	position: relative;
	text-transform: uppercase;
	border-radius: .125em;
}

#comms {
	display: flex;
	flex-direction: column;
	/*overflow: hidden;*/
}
#comms > section {
	padding: 0 1em 1em;
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
}
#comms > .msg-stream-holder {
	position: relative;
	overflow: hidden;
}
#comms > .msg-stream-holder > .msg-stream {
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;
	word-wrap: break-word;
	scroll-snap-destination: bottom left;
	scroll-snap-type: proximity;
	/*scroll-behavior: smooth;*/
	padding: 0 1em; /* chrome-doesn't ignore padding on scrolled elements */
	background: rgba(13,13,13,.75);
}
#comms .msg.deleted-message {
	background: hsla(0,100%,50%,.5);
	opacity: .5;
}
.help-menu {
	overflow-y: scroll;
}
.msg-stream-holder::before {
	content: '';
	display: block;
	position: absolute;
	left: 0; right: 0;
	top: -10em;
	height: 10em;
	box-shadow: 0 2em 1em -2em hsla(0,0%,0%,.25);
}
#comms .bottom {
	flex: 0 0 auto;
	padding: 0 1em 1em;
}
#comms .bottom::before {
	content: '';
	display: block;
	margin-top: calc(-.5em + -1px);
}
#comms .chat-menu,
#comms .ban-list {
	list-style: none;
	margin: 1em 0 0;
	padding: 0;
}
#comms .buttons {
	margin: 1em 0 0;
	display: flex;
	flex-direction: row;
	gap: .5em;
}
#comms .focup-label,
#comms .bin-label {
	display: inline-block;
	background: hsla(0,0%,0%,1);
	user-select: none;
	cursor: default;
}
#comms .bin-label {
	padding: .5em;
}
#comms .focup-anchor,
#comms .popup-anchor {
	position: relative;
	display: inline-block;
}
#comms .focup-body,
#comms .popup-body {
	position: absolute;
	width: max-content;
	max-width: 50vw;
	max-height: 50vh;
	bottom: 1em;
	left: 0;
	padding: 0px 1em 1em;
	overflow: clip auto;
	z-index: 2;
	background: hsla(0,0%,6.25%,.9375);
	box-shadow: 0 .125em .25em hsla(0,0%,0%,.5);
}
#comms .focup-wrap:not(:focus,:focus-within)>.focup-anchor {
	display: none;
}
#comms .scroll-info {
	display: none;
}
#comms .scroll-info.bright {
	display: inline-block;
	padding: 0 .25em;
	background-color: gold;
	color: black;
}

#comms .bottom::before {
	content: '';
	display: block;
	margin-top: -.5em;
}
.block, .info, .build-info, .error {
	padding: .5em 1em;
	margin: 0 -1em;
	scroll-snap-coordinate: bottom left;
}
.block .name:before {
	content: '_';
	color: transparent;
	display: inline-block;
	width: 2em;
	height: 2em;
	margin-right: .15em;
	background: url('data:image/svg+xml;base64,\
PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxz\
dmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjU2IiBoZWlnaHQ9\
IjI1NiI+PHBhdGggZD0iTSAwLDAgMjU2LDAgMjU2LDI1NiAwLDI1NiB6IiBzdHlsZT0iZmlsbDoj\
NjY2NjY2O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPjxwYXRoIGQ9Im0gMzIsMjI0IDIy\
NCwwIDAsLTMyIC0yNTYsMCAwLC0zMiAyNTYsMCAwLC0zMiAtMjU2LDAgMCwtMzIgMjU2LDAgMCwt\
MzIgLTI1NiwwIDAsLTMyIDIyNCwwIDAsMjI0IC0zMiwwIDAsLTI1NiAtMzIsMCAwLDI1NiAtMzIs\
MCBMIDEyOCwwIDk2LDAgOTYsMjU2IDY0LDI1NiA2NCwwIDMyLDAgMzIsMjI0IDAsMjI0IDAsMCBs\
IDIyNCwwIDAsMzIgMzIsMCAwLDIyNCAtMjI0LDAgeiIgc3R5bGU9ImZpbGw6Izk5OTk5OTtmaWxs\
LW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIgLz48L3N2Zz4K')
		center/100% auto no-repeat;
}
.block.anon .name:before {
	width: 1em;
	height: 1em;
	background: url('data:image/svg+xml;base64,\
PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxz\
dmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjU2IiBoZWlnaHQ9\
IjI1NiI+PHBhdGggZD0ibSAzMiw5NiAxOTIsMCBMIDIyNCwxNjAgMzIsMTYwIHoiIHN0eWxlPSJm\
aWxsOiM2NjY2NjY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUi\
IC8+PHBhdGggZD0ibSAzMiwxMjggMTkyLDAgMCwzMiAtOTYsMCAwLC02NCAtOTYsMCB6IiBzdHls\
ZT0iZmlsbDojOTk5OTk5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPjwvc3ZnPgo=')
		center/100% auto no-repeat;
}
.name {
	float: left;
	margin: 0 .25em 0 0;
	padding: 0 .25em 0 0;
}
.block:after {
	content: '';
	display: block;
	clear: both;
}
.composer > .msg {
	margin: .5em -1em 0;
}
.style-changer-button {
	display: inline-block;
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	min-width: 2em;
}
.style-changer-button.for-c {
	background: currentColor;
}
.style-changer-button.for-bg {
	background: inherit;
}
.name > .style-changer-button:first-child {
	margin: 0 0 0 -2.15em;
}
time.of-post {
	opacity: .125;
}
del {
	text-decoration: none;
	transition: -webkit-filter .25s cubic-bezier(.77, 0, .18, 1)
	,                   filter .25s cubic-bezier(.77, 0, .18, 1);
	-webkit-filter: blur(.25em) grayscale(.9) contrast(.5) brightness(1.3333);
	        filter: blur(.25em) grayscale(.9) contrast(.5) brightness(1.3333);
}
del:hover {
	-webkit-filter: none;
	        filter: none;
}
.small {
	min-width: 1em;
	max-width: 100%;
	min-height: 1em;
	max-height: 3em;
	vertical-align: bottom;
	word-break: break-all;
}
.canceler {
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
}
#comms .menu {
	list-style: none;
	padding: 0;
	width: 11em;
}
#comms #chat-menu-on + .popup-anchor {
	display: none;
}
#comms #chat-menu-on:checked ~ .popup-anchor {
	display: inline-block;
}

/* .input-block {
} */

.yt:after {
	content: '';
	background: url('data:image/svg+xml,\
%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22n\
o%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20view\
Box%3D%220%200%201276.8125%20898.02502%22%20height%3D%22898.02502%22%20width\
%3D%221276.8125%22%3E%3Cpath%20style%3D%22fill%3A%23202020%22%20d%3D%22m%201\
264.0625%2C193.72752%20c%200%2C0%20-12.475%2C-87.98625%20-50.76%2C-126.7325%\
20C%201164.75%2C16.14127%201110.3275%2C15.88877%201085.37%2C12.91127%20906.6\
9875%2C-0.00373%20638.6825%2C-0.00373%20638.6825%2C-0.00373%20l%20-0.555%2C0\
%20c%200%2C0%20-268.01%2C0%20-446.6875%2C12.915%20-24.95875%2C2.9775%20-79.3\
6187%2C3.23%20-127.931749%2C54.08375%20C%2025.226626%2C105.74127%2012.769%2C\
193.72752%2012.769%2C193.72752%20c%200%2C0%20-12.769%2C103.325%20-12.769%2C2\
06.64875%20l%200%2C96.86625%20c%200%2C103.3225%2012.769%2C206.64625%2012.769\
%2C206.64625%200%2C0%2012.457626%2C87.98738%2050.739251%2C126.73388%2048.569\
879%2C50.855%20112.370499%2C49.24612%20140.786749%2C54.57624%20102.14625%2C9\
.79488%20434.11125%2C12.82613%20434.11125%2C12.82613%200%2C0%20268.2925%2C-0\
.40387%20446.96375%2C-13.31887%2024.9575%2C-2.9775%2079.38%2C-3.2285%20127.9\
325%2C-54.0835%2038.285%2C-38.7465%2050.76%2C-126.73388%2050.76%2C-126.73388\
%200%2C0%2012.75%2C-105.3828%2012.75%2C-206.64625%20l%200%2C-96.86625%20c%20\
0%2C-103.32375%20-12.75%2C-206.64875%20-12.75%2C-206.64875%22%20%2F%3E%3Cpat\
h%20style%3D%22fill%3A%23dfdfdf%22%20d%3D%22m%20506.59%2C614.62627%20-0.0587\
%2C-358.75%20345%2C180%20z%22%20%2F%3E%3Cpath%20style%3D%22fill%3A%23e3e2e0%\
22%20d%3D%22m%20809.08375%2C457.90752%20-302.5525%2C-202.03125%20345%2C180%2\
0-42.4475%2C22.03125%22%20%2F%3E%3C%2Fsvg%3E')
		center bottom .25em /100% auto no-repeat;
	width: 2em;
	height: 2em;
	margin: 0 .25em 0 -2.25em;
	display: inline-block;
	vertical-align: bottom;
}

#blank-iframe-for-third {
	position: absolute;
	width: 0;
	height: 0;
}

time.of-post {
	opacity: .25;
}

/*@media (prefers-color-scheme: light) {
@font-face {
	font-family: 'IM Fell DW Pica SC';
	font-style: normal;
	font-weight: 400;
	src: local('IM FELL DW Pica SC'),
	     local('IM_FELL_DW_Pica_SC'),
	     url('/fonts/imfelldwpica/sc.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
	               U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF,
	               U+EFFD, U+F000;
}

html {
	background:
		repeating-linear-gradient(
			0deg,
			hsla(0,0%,100%,.015625)  0pt,
			hsla(0,0%,  0%,.015625) 30pt
		) center / 34.6410161514pt 60pt repeat,
		repeating-linear-gradient(
			60deg,
			hsla(0,0%,100%,.015625)  0pt,
			hsla(0,0%,  0%,.015625) 30pt
		) center / 34.6410161514pt 60pt repeat,
		repeating-linear-gradient(
			-60deg,
			hsla(0,0%,100%,.015625)  0pt,
			hsla(0,0%,  0%,.015625) 30pt
		) center / 34.6410161514pt 60pt repeat,
		hsl(0,0%,92%);
}
body {
	color: hsl(0,0%,10%);
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'IM Fell DW Pica SC', serif;
}
input, textarea {
	background:
		-webkit-repeating-linear-gradient(90deg,
			hsla(0,0%,0%,.0625),
			hsla(0,0%,0%,.0625) 1px,
			transparent 1px,
			transparent .625em),
		-webkit-repeating-linear-gradient(0deg,
			hsla(0,0%,0%,.0625),
			hsla(0,0%,0%,.0625) 1px,
			transparent 1px,
			transparent .625em);
	background:
		repeating-linear-gradient(0deg,
			hsla(0,0%,0%,.0625),
			hsla(0,0%,0%,.0625) 1px,
			transparent 1px,
			transparent .625em),
		repeating-linear-gradient(90deg,
			hsla(0,0%,0%,.0625),
			hsla(0,0%,0%,.0625) 1px,
			transparent 1px,
			transparent .625em);
}
.aspect-content,
.tall-content {
	box-shadow: -2em 0 1em -2em hsla(0,0%,0%,.25);
}
#comms {
	transition: margin-top .5s cubic-bezier(.77, 0, .18, 1)
	,           box-shadow .5s cubic-bezier(.77, 0, .18, 1);
	box-shadow: 0em 0 1em -2em hsla(0,0%,0%,.25);
}
#comms > .msg-stream-holder > .msg-stream {
	background: unset;
}
#menu-on:checked ~ #comms {
	box-shadow: 4em 1em 1em -4em hsla(0,0%,0%,.25);
}
input[type=submit],
input[type=reset],
button,
select,
label[for] {
	background: hsla(0,0%,100%,.75);
}
.channel-item + .channel-item .channel-link {
	border-top: .125em solid hsla(0,0%,0%,.25);
}
.popup-anchor::after {
	background: url('data:image/svg+xml,\
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221\
.1%22%20width%3D%2210%22%20height%3D%2210%22%20viewbox%3D%220%200%2010%2010%\
22%3E%3Cpath%20d%3D%22M%200%2C0%200%2C10%2010%2C0%20z%22%20style%3D%22fill%3\
A%23efefef%3Bfill-opacity%3A.9375%3Bstroke%3Anone%22%20%2F%3E%3C%2Fsvg%3E')
		top right / 1em 1em no-repeat;
}
.popup-body {
	background: hsla(0,0%,93.75%,.9375);
}
}*/
@media (pointer:coarse) {
	a.local, button, label[for], label.fw {
		box-sizing: border-box;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}