kek3

:root {
	--bg-color: var(--color-background);
	--accent-color: var(--color-accent);
	--box-shadow: 0 0 16px rgba(0,0,0,.4);
	--color-background: #1c1f22;
	--color-el-background: rgba(255,255,255,.05);
	--color-text: rgba(255,255,255,.8);
	--color-accent: #e53232;
	--space-huge: 2rem;
	--space-block: 1rem;
	--space-inline: .5em;
	--line-thin: 1px;
	--line-thick: 2px;
}
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html,body {
	height:100%;
}
html {
	-webkit-tap-highlight-color:transparent;
	background:#111;
	background:var(--color-background);
	font:1em/1 'Lato',sans-serif;
	color:rgba(255,255,255,.8);
	color:var(--color-text);
}
body {
	display:flex;
	overflow:hidden;
}
.scroll-container {
	overflow-x:hidden;
	overflow-y:scroll;
}
@media (min-width: 840px) {
	.scroll-container::-webkit-scrollbar {
		height:.5rem;
		width:.5rem;
		background:rgba(255,255,255,.025);
		border-radius:.25rem;
	}
	.scroll-container::-webkit-scrollbar-thumb {
		background:rgba(255,255,255,.05);
		border-radius:.25rem;
	}
	.scroll-container::-webkit-scrollbar-thumb:active {
		background:rgba(255,255,255,.1);
	}
}
div#notification-msg {
	margin-bottom:15px;
}
.main-column {
	position:relative;
	flex:1 1 auto;
	display:flex;
	flex-direction:column;
	height:calc(100vh - 1rem);
	padding:.5rem;
}
.main-column>header,.main-column>footer,.main-column main>* {
	width:100%;
	max-width:600px;
	margin:0 auto;
	flex:none;
}
.main-column main {
	flex:none;
	display:flex;
	flex-direction:column;
}
.main-column main>:nth-child(n+2) {
	margin-top:.5rem;
}
@media (min-width: 840px) {
	.main-column {
		padding:2rem .5rem;
		margin:.5rem .5rem .5rem 0;
	}
	.main-column main {
		margin:2rem 0;
	}
	.main-column main>:nth-child(n+2) {
		margin-top:2rem;
	}
}
@media (max-width: 839px) {
	.main-column {
		padding-bottom:3.5rem;
	}
	.main-column>* {
		max-width:none;
	}
}
.main-header {
	display:flex;
	justify-content:center;
	align-items:center;
}
.main-header .logo svg {
	display:block;
	height:32px;
	fill:rgba(255,255,255,.8);
}
@media (max-width: 839px) {
	.main-header .logo {
		padding:.5em 1em;
	}
	.main-header .logo svg {
		display:block;
		height:1em;
	}
	.main-header {
		position:fixed;
		left:.5rem;
		right:.5rem;
		bottom:0;
		border-top:1px solid rgba(255,255,255,.05);
		background:#111;
		background:var(--color-background);
		justify-content:space-between;
		padding:.5rem 0;
		box-shadow:0 0 3rem 1em #111;
		box-shadow:0 0 3rem 1em var(--color-background);
		z-index:3;
		width:auto!important;
		margin:0;
	}
	.main-header .toggles button {
		--color-el-background: transparent;
	}
}
@media (min-width: 840px) {
	.main-header a {
		margin:auto;
	}
	.main-header .toggles {
		display:none;
	}
	.main-header .logo svg :last-child {
		fill:#e53232;
		fill:var(--color-accent);
	}
}
aside {
	position:relative;
	box-shadow:0 0 16px rgba(0,0,0,.8);
	box-shadow:var(--box-shadow);
	height:100vh;
	width:360px;
	background:#111;
	background:var(--bg-color);
	transition:transform .6s,margin-right .6s,margin-left .6s;
	display:flex;
	flex-direction:column;
	z-index:20;
}
aside.left {
	order:-1;
}
aside>section {
	display:flex;
	flex-direction:column;
	padding:1rem;
	flex:none;
}
aside .scroll-container {
	padding-right:1rem;
}
aside>section.flex {
	flex:auto;
	overflow-x:hidden;
	overflow-y:scroll;
	margin-right:1rem;
}
.chat>.alert-notifier {
	padding:5px;
	text-align:center;
	display:none;
	background:#e53232;
}
.chat>.alert-notifier.new {
	display:block;
}
section.chat>form.logged-in {
	display:none;
}
aside .button-group {
	display:flex;
}
aside nav.button-group {
}
aside .button-group button {
	flex:auto;
	justify-content:center;
}
aside nav.button-group button {
	white-space:nowrap;
	flex:1;
	padding:0;
	border-radius:0;
	margin:0!important;
}
aside nav.button-group button.is-active {
	color:rgba(255,255,255,.5);
}
aside nav.button-group button:first-child {
	border-radius:4px 0 0 4px;
	padding-left:1em;
}
aside nav.button-group button:last-child {
	border-radius:0 4px 4px 0;
	padding-right:1em;
}
aside .button-group button:nth-child(n+2) {
	margin-left:0.5rem;
}
aside>section.user {
	flex:none;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	cursor:pointer;
}
aside>section.user:hover,aside>section.user:hover+section {
	background-color:rgba(255,255,255,.05);
}
section.user .toggle-icon {
	height:1rem;
	width:.5rem;
	background:rgba(255,255,255,.2);
	position:relative;
	border-radius:.25rem;
	transition:background-color .2s;
}
section.user .toggle-icon svg {
	width:1rem;
	height:1rem;
	position:absolute;
	top:0;
	left:50%;
	transform:translate(-50%,-50%);
	transition:top .2s,transform .2s;
}
section.user .toggle-icon.is-open {
	background:#e53232;
	background:var(--accent-color);
}
section.user .toggle-icon.is-open svg {
	top:100%;
	transform:translate(-50%,-50%) rotate(90deg);
}
aside>section.menus {
	overflow:hidden;
	flex:none;
	transition:height .2s,padding .2s;
	background-clip:padding-box;
}
aside>section.menus .settings.no-support {
	display:none;
}
aside>section.menus>* {
	flex:none;
}
aside>section.menus .settings {
	flex:auto;
	overflow-y:scroll;
	overflow-x:hidden;
	margin-top:1rem;
}
aside>section.menus:not(.is-open) {
	height:0;
	padding-top:0;
	padding-bottom:0;
}
aside .settings h3::first-letter {
	text-transform:uppercase;
}
aside>section.chat {
	flex:1 1 auto;
}
aside>section.login {
	flex:none;
}
@media (max-width: 800px) {
	aside {
		position:fixed;
		left:105%;
	}
	aside [data-toggletarget] {
		position:fixed;
		margin:0!important;
		top:.5rem;
		left:.5rem;
		right:.5rem;
		bottom:3rem;
		background:#111;
		background:var(--color-background);
		border-radius:2px;
		box-shadow:0 0 3rem rgba(0,0,0,.8);
		transition:visibility 0s .1s,opacity .1s,transform .1s;
	}
	aside [data-toggletarget]:not(.is-open) {
		visibility:hidden;
		opacity:0;
		transform:translateY(1rem);
	}
	aside [data-toggletarget].is-open {
		transition:visibility 0s,opacity .1s,transform .1s;
	}
}
@media (min-width: 840px) {
	aside>.menus {
		padding-top:0;
		border-bottom:1px solid rgba(255,255,255,.05);
	}
	aside>.menus.is-open {
		height:50vh;
	}
}
.donations p {
	color:rgba(255,255,255,.8);
}
.donations p span {
	color:#e53232;
	color:var(--accent-color);
}
.donations .slider {
	margin:16px 0;
}
.floating-heart {
	position:fixed;
	z-index:4;
	motion-path:path('M0,0 Q32,-32 0,-64 Q-32,-96 0,-128');
	motion-rotation:0deg;
	width:1rem;
	height:1rem;
	pointer-events:none;
	fill:white;
}
.floating-heart.contributor {
	z-index:5;
	width:1.5rem;
	height:1.5rem;
}
footer {
	margin-top:auto!important;
}
footer .bolt {
	fill:#e53232;
	fill:var(--accent-color);
}
@media all and (min-width: 440px) {
	footer ul {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		border:none!important;
	}
	footer li {
		border:none!important;
		flex-shrink:1;
		background:transparent!important;
		align-items:center!important;
	}
	footer svg {
		box-sizing:content-box;
	}
	footer li>* {
		padding:0 16px;
	}
	footer li:nth-child(n+2)::before {
		content:'\b7';
		color:rgba(255,255,255,.5);
	}
}
.template {
	display:none;
}