:root {
	--mn: #85eb2f;
	--mn-d: #63b81a;
	--mn-dd: #4e9611;

	--bg: #1c1c1c;
	--cnt: #2f2f2f;
	--cnt-b: #37373d;
	--cnt-bb: #555;

	--th: #2f2f2f;
	--tr: #202020;
	--tr-odd: #262626;
	--tr-r: #300000;
	--tr-r-odd: #360000;
	--tr-y: #303000;
	--tr-y-odd: #363600;

	--uid: #0a0;

	--pg-width: 45rem;

	--txt: white;
	--txt-d: #aaa;
	--txt-dd: #777;

	--like: #00bd00;
	--dl: #7aa6e0;

	--nav-size: 38px;
	--nav-bg: #37373d;
	--nav-hover: #555;
}

/* -------------------------------------------------- full-bleed layout */
body {
	display: grid;
	grid-template-columns: 1fr minmax(0, var(--pg-width)) 1fr;
}
body > * { grid-column: 2; }

.full-bleed {
	width: 100%;
	grid-column: 1 / -1;
}

/* -------------------------------------------------- base syle / page parts */
* {
	margin: 0;
}

body {
	line-height: 1.5;
	font-family: system-ui, sans-serif;
	font-size: 1rem;
	color: var(--txt);
	background: linear-gradient(0deg, var(--bg) 0%, rgba(20,20,20,0.85) 100%), url('backdrop.jpg'), var(--bg) fixed;
	background-size: cover;
	background-attachment: fixed;

	overflow-wrap: break-word;
	word-wrap: break-word;
}

input, button, textarea, select {
	font: inherit;
}

p, h1, h2, h3, h4 {
	overflow-wrap: break-word;
	word-wrap: break-word;
}
h1, h2, h3, h4 { font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1em; }

html {
	scroll-padding-top: 3.3rem;
}

body > header {
	background: var(--nav-bg);
	width: 100%;
	grid-column: 1 / -1;
	position: fixed;
	box-shadow: 0 0 0.75rem 0rem #000;
}

a {
	color: var(--mn);
	text-decoration: none;
}
a:hover {
	color:white;
	text-decoration: underline;
}

nav {
	position: relative;
	overflow: visible;
	width: 50rem;
	height: var(--nav-size);
	margin: auto;
	z-index: 2;
}

nav a {
	position: relative;
	float: left;
	display: block;
	color: white;
	text-decoration: none;
	font-weight: 600;
	padding: 0.5rem;
}

nav a:after, .drpdwn button:after {
	transition: opacity .5s;
	position: absolute;
	inset: auto auto 0 0;
	margin: auto;
	content: '.';
	color: transparent;
	background: var(--mn);
	width: 100%;
	height: 3px;
	opacity: 0;
}

nav a:hover:after, .drpdwn button:hover:after { opacity: 1; }

.nav-outline { box-shadow: 0px 0px 3px 1px #ccc; }
nav a:hover .nav-outline { box-shadow: 0px 0px 3px 1px var(--mn); }

.drpdwn { float: left; }

.drpdwn button {
	position: relative;
	border: none;
	color: white;
	background: inherit;
	font-weight: bold;
	padding: 0.5rem;
	cursor: pointer;
}

.drpdwn div {
	display: none;
	position: absolute;
	background: var(--nav-bg);
	min-width: 10ch;
	box-shadow: 0 0 1rem 0.5rem #222;
}

.drpdwn a {
	float: none;
	color: white;
	padding: 0.4rem;
	display: block;
	text-align: left;
}

.drpdwn i {
	opacity: 0.6;
	transform: scale(0.9, 0.9) translateX(-0.2rem);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.drpdwn a:hover i {
	opacity: 1;
	transform: scale(1, 1);
}
.drpdwn div img {
	transform: translateX(-0.1rem);
	transition: transform 0.3s ease;
}
.drpdwn div a:hover img {
	transform: translateX(0.1rem);
}

nav a:hover,
.drpdwn button:hover,
.drpdwn:hover button,
.drpdwn a:hover {
	background: var(--nav-hover);
	color: var(--mn);
	text-decoration: none;
}

.drpdwn:hover div { display: block; }

.nav-side { float: right; }
.nav-profile {
	width: 9rem;
	transform: translate(calc(-9rem + var(--nav-size)), 0);
}

.sidenav {
	background: var(--nav-bg);
	width: 8rem;
	height: auto;
	position: fixed;
	top: 3.8rem;
	right: calc(50% + 1rem + var(--pg-width) / 2);
	box-shadow: 0 0 0.75rem 0rem #000;
	border-radius: 1rem;
	z-index: 0 !important;
	overflow: hidden;
}
.sidenav a {
	width: 100%;
	padding: 0.3rem 0.5rem;
	font-weight: 600;
}
.sidenav-current { color: var(--mn); }

main {
	min-height: calc(100lvh - 14.5rem);
	padding: 3.5rem 0 2.5rem 0;
}

body > footer {
	width: 100%;
	grid-column: 1 / -1;
	background: linear-gradient(180deg, var(--nav-bg) 0%, var(--bg) 70%);
}
body > footer > div {
	max-width: var(--pg-width);
	margin: auto;
	padding: 2em 1em 3.5em 1em;
}
body > footer a {
	font-weight: 600;
	color: #666;
	display: block;
}
body > footer a:hover {
	color:white;
	text-decoration: none;
}

#top-btn {
	display: none;
	position: fixed;
	bottom: 3rem;
	right: 1rem;
	border: none;
	background: rgba(70,70,70,0.85);
	/* backdrop-filter: blur(6px); */
	color: white;
	cursor: pointer;
	padding: 1rem;
	border-radius: 1rem;
	text-decoration: none;
}
#top-btn:hover {
	background: var(--cnt-bb);
	color: var(--mn);
}

/* -------------------------------------------------- Columns */

/* cols, collapse */
.cols { display: flex; flex-wrap: wrap; gap: 1rem; }
.cols > * { flex: 1; }
/* cols, don't collapse */
.cols-small { display: flex; flex-wrap: wrap; gap: 1rem; }
.cols-small > * { flex: 1; }

/* flex cols, even sizes, collapse */
.cols-even {
	width: 100%;
	max-width: 100%;
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 1rem;
}
.cols-even div {
	overflow: hidden;
	margin: 0;
}
.cols-even li {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cols-even > p {
	overflow: none;
	white-space: normal !important;
}

/* vertically center items */
.cols-center { align-items: center; }

/* col only takes space it needs */
.col-min { flex: 0 1 auto; }

/* -------------------------------------------------- Paddings */
.pad { padding: 1rem; }
.pad-top { padding-top: 1rem; }
.pad-left { padding-left: 1rem; }
.pad-btm { padding-bottom: 1rem; }
.pad-no { padding: 0 !important; }

/* -------------------------------------------------- Margins */
.ma-entry { margin: 0.5rem 0 1rem 0; }
.ma-list li + li { margin-top: 0.75rem; }
.ma-divs div + div  { margin: 1rem 0; }
.ma-big { margin: 2.5rem 0; }
.ma-no { margin: 0 !important; }
.ma-no-top { margin-top: 0 !important; }
.ma-tiny { margin: 0.2rem 0 !important; }
.ma-top { margin-top: 1rem !important; }
.ma-btm { margin-bottom: 1rem !important; }
.ma-half { margin: 0 0.5rem 0.5rem 0.5rem !important; }

/* -------------------------------------------------- Containers/Boxes */

/* alt box */
.alt {
	background: repeating-linear-gradient(130deg, #2a2a2a 0 0.5rem, #2f2f2f 0.5rem 1rem);
	padding: 0.3rem 0.6rem 0.4rem 0.6rem;
	margin: 1rem 0;
	border-radius: 1rem;
	box-shadow: 0 0 0.3rem 0 rgba(0,0,0,0.5);
}

/* error box */
.err {
	color: #f99;
	background: repeating-linear-gradient(130deg, #300 0 0.5rem, #380000 0.5rem 1rem);
	padding: 0.3rem 0.6rem 0.4rem 0.6rem;
	margin: 1rem 0;
	border-radius: 1rem;
	box-shadow: 0 0 0.3rem 0 rgba(0,0,0,0.5);
}
.err a { color: #fdd; }

/* warning box */
.warn {
	color: #ffb;
	background: repeating-linear-gradient(130deg, #330 0 0.5rem, #383800 0.5rem 1rem);
	padding: 0.3rem 0.6rem 0.4rem 0.6rem;
	margin: 1rem 0;
	border-radius: 1rem;
	box-shadow: 0 0 0.3rem 0 rgba(0,0,0,0.5);
}
.warn a { color: #ffe; }

/* success box */
.succ {
	color: #bfb;
	background: repeating-linear-gradient(130deg, #030 0 0.5rem, #003800 0.5rem 1rem);
	padding: 0.3rem 0.6rem 0.4rem 0.6rem;
	margin: 1rem 0;
	border-radius: 1rem;
	box-shadow: 0 0 0.3rem 0 rgba(0,0,0,0.5);
}
.succ a { color: #efe; }

/* file/download box */
.file {
	color: var(--dl);
	background: repeating-linear-gradient(130deg, #0b223f 0 0.5rem, #0d2646 0.5rem 1rem);
	padding: 0.3rem 0.6rem 0.4rem 0.6rem;
	margin: 1rem 0;
	border-radius: 1rem;
	box-shadow: 0 0 0.3rem 0 rgba(0,0,0,0.5);
}
.file a, .file-txt { color: var(--dl); }
.file a:hover { color: white; }

/* -------------------------------------------------- inbetween spacings */
p + p, ul + h2, ul + h3, ul + h4, p + h2, p + h3, p + h4, ul + p { margin-top: 1em; }
h2 + ul, h3 + ul, h4 + ul, h1 + h2 { margin-top: 0.3em; }
.date + p { margin-top: 1em; }

/* -------------------------------------------------- forms & buttons */
form { margin: 1rem 0; }
form > div { position: relative; }

input[type=text], input[type=number], input[type=password], input[type=file], input[type=url], input[type=email], textarea, select {
	width: 100%;
	padding: 0.85rem 0.1rem 0.1rem 0.3rem;
	margin: 0.5rem 0;
	display: inline-block;
	border: 0.15rem solid #666;
	border-radius: 0.6rem;
	box-sizing: border-box;
	background: #333;
	color: var(--txt);
	transition: border-color 0.2s;
}
textarea {
	padding: 0.3rem;
	resize: vertical;
}

/* hide arrows from number input */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

/* tag pad */
.tp {
	margin: 0.5rem 0;
}
.tp-ui {
	background: #2b2b2b;
	border: 0.15rem solid #444;
	border-bottom: none;
	border-top-left-radius: 0.6rem;
	border-top-right-radius: 0.6rem;
	padding: 0.3rem;
	user-select: none;
}
.tp-ui a + a, .tp-ui div { padding-left: 0.2rem; }
.tp-ui i { transition: transform .5s; }
.tp-ui i:hover { transform: scale(1.3); }
.tp textarea {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	margin: 0;
}

input[type=file] { padding-top: 1rem; }
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--mn);
}
::placeholder {
	color: #666;
	font-size: 0.8rem;
}
input[type="submit"][disabled], input[type="submit"][disabled]:hover
{
	background: #444;
	color: #333;
	cursor: not-allowed;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus,
select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
	width: 100%;
	padding: 1rem 0.1rem 0.1rem 0.3rem;
	margin: 0.5rem 0;
	display: inline-block;
	border: 0.15rem solid #ff5;
	border-radius: 0.6rem;
	box-sizing: border-box;
	background: #555;
	-webkit-text-fill-color: #ff5;
	transition: background-color 5000s ease-in-out 0s;
}

select {
	padding: 1rem 0.1rem 0.1rem 0.3rem;
}
.select-il {
	padding: 0;
	width: auto;
	margin: 0 0 0.3rem 0;
}
option {
	background-color: var(--bg);
}

.form-err {
	border-color: #800 !important;
	background: repeating-linear-gradient(130deg, #300 0 0.5rem, #380000 0.5rem 1rem) !important;
}
.form-err:focus {
	border-color: #C00 !important;
}

.label-input {
	color: #888;
	position: absolute;
	margin-top: 0.58rem;
	margin-left: 0.4rem;
	font-size: 0.8rem;
	z-index: 0;
}
.label-other {
	color: #888;
	margin-right: 0.5em;
}

.label-err { color: #800; }

input[type=submit] {
	min-height: 2rem;
	width: 100%;
}

.btn, .btn-cancel, input[type=submit] {
	background: var(--mn);
	color: var(--cnt-b);
	border-radius: 1rem;
	padding: 0.2rem;
	text-align: center;
	display: block;
	font-weight: bold;
	transition: color 0.3s, background-color 0.3s;
	cursor: pointer;
	border: none;
}
.btn:hover, input[type=submit]:hover {
	background: var(--mn-dd);
	color: var(--txt);
	text-decoration: none;
}
.btn img, .btn-cancel img, input[type=submit] img {
	transition: transform .5s;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}
.btn:hover img, .btn-cancel:hover img, input[type=submit]:hover img { transform: scale(1.3); }
.btn-cancel {
	background: #e6b85c;
	color: #493119;
}
.btn-cancel:hover {
	background: #b35545;
	color: #ffbbaa;
	text-decoration: none;
}

input[type=checkbox] {
	float: left;
	width: 1rem;
	height: 1rem;
	margin: 0.25rem 0.5rem 0.8rem 0.5rem;
	background: #555;
	border: 0.15rem solid #666;
	border-radius: 1rem;
	accent-color: var(--mn);
}

.form-err-text {
	color: #f99;
	padding: 0 0.2rem 0.6rem 0.2rem;
}
.form-err-text a {
	color: var(--txt);
	font-weight: bolder;
}

/* -------------------------------------------------- misc styles / classes */
address { font-style: normal; }
mark {
	background-color: var(--mn) !important;
	padding: 0 2px;
	border-radius: 0.3rem;
}
.detail, time, small { font-size: 0.8rem; color: var(--txt-d); }
.smaller { font-size: 0.8rem; }
.desc { color: var(--txt-d); }
.date {
	color: var(--txt-d);
	font-size: 90%;
}
.like { color: var(--like); }
.dl { color: var(--dl); }
.uid {
	font-size: 0.8em;
	color: var(--uid);
}
.block { display: block; }
.unimportant { opacity: 75%; }

.good { color: #23cf00; }
.neutral { color: #ffc400; }
.bad { color: #e00 }

.more, .spoiler {
	border: var(--cnt-bb) 2px solid;
	border-left: none;
	border-right: none;
	padding: 0.3rem 0.5rem;
	background: rgba(0, 0, 0, 0.15);
	position: relative;
	width: 100%;
	left: -0.5rem;
}

.quote-head {
	margin-top: 0.3rem;
	color: var(--txt);
}
.quote {
	background: #393939;
	border: #444 2px solid;
	border-radius: 0.3rem;
	padding: 0.3rem;
	margin-top: 0.1rem;
	color:#aaa;
}

abbr {
	text-decoration-color: var(--txt-d);
	position: relative;
	cursor: pointer;
}
.tt {
	text-decoration: underline dotted var(--txt-d);
}
hr {
	border: none;
	height: 3px;
	background: repeating-linear-gradient(130deg, #2a2a2a 0 0.5rem, #992 0.5rem 1rem);
	margin: 1rem 0;
}

.box-btm-wrap {
	position: relative;
	padding-bottom: 3.2rem;
}
.box-btm {
	position: absolute;
	bottom: 0.6rem;
	width: calc(100% - 1.2rem);
}

var {
	color: #cfa;
	background: #230;
	border-radius: 0.3rem;
	font-family:"Lucida Console", Consolas, "Courier New", Courier, monospace;
	font-style: normal;
	padding: 0.2rem;
}

kbd {
	color: white;
	background: linear-gradient(90deg, #444, #777);
	border-radius: 0.3em;
	border-top: 2px solid #777;
	border-left: 2px solid #777;
	font-family:"Lucida Console", Consolas, "Courier New", Courier, monospace;
	padding: 0 0.2em 0.1em 0.15em;
	margin: 0 1px;
}

/* inline link, no hover underline */
.il:hover { text-decoration: none; }

/* change log icon */
.clog {
	display: inline-block;
	background: rgba(20, 20, 20, 0.2);
	border-radius: 0.3rem;
	padding: 0 2px 1px 1px;
	line-height: 1em;
}

.inline { display: inline !important; }
.inline-btn {
	width: auto !important;
	min-height: 0 !important;
	display: inline-block !important;
	padding: 0 0.3rem !important;
}

/* User Modes */
.m-user { color: #bbb; }
.m-idiot { color: #d88; }
.m-super { color: #dfd; }
.m-gold { color: #fc5; }
.m-supp { color: #0a8; }
.m-sec { color: #b64; }
.m-rev { color: #e92; }
.m-mod { color: #090; }
.m-adm { color: #0b0; }
.m-gban { color: #d00; }
.m-cban { color: #d00; }
.m-ban { color: #d00; }
.m-na { color: #a44; }

.btnbar {
	display: inline-block;
	vertical-align: middle;
	user-select: none;
}
.btnbar img { transition: transform .5s; }
.btnbar img:hover { transform: scale(1.3); }
.btnbar a + a { padding-left: 0.3rem; }
.btnbar a:hover { text-decoration: none; }

.bar-small {
	display: inline-block;
	width: 5rem;
	height: 0.7em;
	background: var(--cnt-b);
	border: 0.15rem solid var(--cnt-bb);
	border-radius: 0.3rem;
	transform: translateY(0.1rem);
}
.bar-small > div {
	height: 100%;
	border-radius:0.2rem;
	background: var(--mn);
}

.hide-empty:empty { display:none; }
.hidden { display:none !important; }

/* -------------------------------------------------- code */
.code, .codewithnums, .codenums, .inlinecode {
	background: #1e1e1e;
	color: #dcdcdc;
	font-family: "Lucida Console", Consolas, "Courier New", Courier, monospace;
	font-size: 0.8rem;
	border: #444 2px solid;
	border-radius: 0.3rem;
	-webkit-text-size-adjust: none;
	overflow-x: auto;
	padding: 3px;
	white-space: pre;
	tab-size: 1.5rem;
}
.code {
	margin: 0.2rem 0;
}
.inlinecode {
	display: inline-block;
	border: none;
	padding: 0 1px;
	margin: 0px;
	transform: translateY(0.3rem);
	white-space: inherit;
}
.codewithnums {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.codenums {
	background: #484848;
	color: #aaa;
	border-right: none;
	border-radius: 0.3rem 0 0 0.3rem;
	float: left;
	width: 30px;
	overflow-x: inherit;
	text-align: right;
	white-space: nowrap;
}
.code::-webkit-scrollbar { width: 0.7rem; height: 0.7rem; }
.code::-webkit-scrollbar-track { background: #191919; }
.code::-webkit-scrollbar-thumb { background: #555; }
.code::-webkit-scrollbar-thumb:hover { background: #777; }

/* -------------------------------------------------- forum / files / comments */
.f-sub {
	padding-left: 1rem;
	font-size: 0.8rem;
	color: var(--txt-dd);
}
.f-sub a, .f-old { color: var(--txt-d); }
.f-sub a:hover, .f-old:hover { color: var(--txt); }

.f-edits {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: var(--txt-dd);
}

.f-posts > article {
	background: #262626;
	border: 2px solid var(--cnt-b);
	border-radius: 1rem;
}
.f-posts article + article { margin-top: 1rem; }
.f-posts article:nth-child(odd) { background: #2d2d2d; }
.f-posts header {
	gap: 0.5rem;
	padding: 0.3rem 0.5rem 0.3rem 0.3rem;
	line-height: 1.3;
}
.f-posts section {
	border-top: 2px solid var(--cnt-bb);
	margin: 0 0.3rem 0 0.3rem;
	padding: 0.5rem;
}
.f-posts footer {
	border-top: 2px solid var(--cnt-bb);
	font-size: smaller;
	margin: 0.3rem 0.5rem 0 0.5rem;
	padding: 0 0.2rem 0.2rem 0.2rem;
	color: var(--txt-dd);
}
.f-posts footer a { color: var(--txt-d); }
.f-posts footer a:hover { color: var(--txt); }

.f-ava {
	flex: 0 0 64px;
	height: 64px;
	transition: transform .5s;
}
.f-ava-standalone {
	display: inline-block;
	box-shadow: 0px 0px 5px 2px #ccc;
	border-radius: 0.7rem;
	transition: transform .5s;
}
.f-ava:hover, .f-ava-standalone:hover, .f-screens a:hover { transform: scale(1.1); }
.f-ava div {
	width: 100%;
	height: 100%;
	border-radius: 0.7rem;
}
.f-ava-small {
	flex: 0 0 32px;
	height: 32px;
}
.f-ava-small div {
	width: 100%;
	height: 100%;
	border-radius: 0.7rem;
	background-size: contain !important;
}

.f-admin {
	border-top:#722 2px dashed;
	background: linear-gradient(0deg, rgba(70,20,20,0) 0%, rgba(70,20,20,1) 100%);
	color: #e77;
	margin: 0.3rem;
	padding: 0.5rem;
	font-size: 0.8rem;
}

.f-pollbar {
	background: url(../img/progress.jpg) no-repeat left;
	width: 150px;
	height: 10px;
	border: var(--cnt-b) 2px solid;
	border-radius: 5px;
}

.f-like {
	background: linear-gradient(90deg, rgba(0,90,0,0.75) 0%, rgba(0,0,0,0) 50%);
	color: var(--like);
	font-weight: bold;
	margin: 0.2rem 0;
	padding-left: 5px;
	border-radius: 0.3rem;
}

.f-screens {
	background-color: rgba(0, 0, 0, 0.15);
	margin: 1rem 0;
	border: 2px solid var(--cnt-bb);
	border-left: 0;
	border-right: 0;
	text-align: center;
}
.f-screens a {
	display: inline-block;
	margin: 0.5rem;
	transition: transform .5s;
	cursor: zoom-in;
}
.f-screens img {
	border-radius: 0.5rem;
}

.f-screens-c, .f-screens-n {
	background: url(../img/i_page.png) no-repeat left;
	padding-left: 12px;
	margin-left: 1.1rem;
	font-size: 0.8rem;
	color:#666;
}
.f-screens-n {
	background: url(../img/i_nopage.png) no-repeat left;
	color:#b66;
}

/* -------------------------------------------------- images */
.vm { vertical-align: middle; }
/* responsive, scales down if necessary */
.rimg {
	max-width: 100%;
	height: auto;
}
/* black img displayed on dark bg (depending on style) */
.img-black { filter: invert(1); }

.img-grayout { filter: grayscale(1) brightness(70%); }

/* -------------------------------------------------- alignment and floating */
.center { text-align: center; }
.right { text-align: right; }
.fright { float: right; }
.fleft { float: left; }
.clear { clear: both; }

/* -------------------------------------------------- tables */
.tbl-wrap, .tbl-wrap-ns {
	overflow-x: auto;
	border-radius: 0.6em;
	line-height: 1.3;
	border: 2px solid var(--cnt-b);
}
.tbl-wrap-ns { overflow-x: visible; }
.tbl-pad td { padding: 1rem; }
.tbl-a td a {
	display: block;
    width: 100%;
}
.tbl-a td a:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 0.6em;
	text-decoration: none;
}

table {
	width: 100%;
	border-collapse: collapse;
}
th {
	text-align: left;
	background: var(--th);
	border-bottom: 0.15rem solid var(--cnt-bb);
	padding: 0.05em 0.2em;
}
th a { color: var(--txt); }
tr { background: var(--tr); }
tr:nth-child(odd) { background: var(--tr-odd); }
td { padding: 0.05em 0.2em; }
.tbl-r { background: var(--tr-r); }
.tbl-r:nth-child(odd) { background: var(--tr-r-odd); }
.tbl-y { background: var(--tr-y); }
.tbl-y:nth-child(odd) { background: var(--tr-y-odd); }
/* key value pair tables, left column: keys */
.tbl-kvp tr td:first-child { color: var(--txt-d); }
/* separator line in tables */
td hr {
	margin: 0.66em 0;
	height: 2px;
	background: var(--cnt-bb);
}

/* -------------------------------------------------- lists */
ul { padding-left: 1.3rem; }
li::marker {
	color: var(--txt-d);
}
.lst-hidden, .lst-hidden-noul {
	list-style: none;
	list-style-image: none;
	padding-left: 0;
	margin-left: 0;
}
.lst-hidden-noul a:hover {
	text-decoration: none;
}

/* -------------------------------------------------- links */
.l-n { background:url(../img/i_next.png) no-repeat left; padding-left:19px; margin-left:2px; display:block; } /* normal/next link */
.l-p { background:url(../img/i_prev.png) no-repeat left; padding-left:19px; margin-left:2px; display:block; } /* previous link */
.l-file { background:url(../img/i_file.png) no-repeat left; padding-left:19px; margin-left:2px; display:block; } /* file link */
.l-user { background:url(../img/i_friend.png) no-repeat left; padding-left:19px; margin-left:2px; display:block; } /* user link */
.l-help { background:url(../img/i_help.png) no-repeat left; padding-left:19px; margin-left:2px; display:block; } /* help link */
.l-search { background:url(../img/i_search.png) no-repeat left; padding-left:19px; margin-left:2px; display:block; } /* search link */
.l-write { background:url(../img/i_write.png) no-repeat left; padding-left:19px; margin-left:2px; display:block; } /* write/post link */
.l-server { background:url(../img/i_server.png) no-repeat left; padding-left:19px; margin-left:2px; display:block; } /* server link */
.l-rss { background:url(../img/rss.gif) no-repeat left; padding-left:19px; margin-left:2px; padding-top:2px; display:block; } /* rss link */
.l-ok { background:url(../img/i_ok.png) no-repeat left; padding-left:19px; margin-left:2px; display:block; } /* okay link */
.l-delete { background:url(../img/i_delete.png) no-repeat left; padding-left:19px; margin-left:2px; display:block; } /* delete link */
.l-delete-il {background:url(../img/i_delete.png) no-repeat left; padding-left:19px; margin-left:2px; display:inline-block; } /* delete link inline */
.l-de0 { background:url(../img/de0.gif) no-repeat left; padding-left:30px; display:block; } /* German off */
.l-de1 { background:url(../img/de1.gif) no-repeat left;; padding-left:30px; display:block; } /* German on */
.l-en0 { background:url(../img/en0.gif) no-repeat left; padding-left:30px; display:block; } /* English off */
.l-en1 { background:url(../img/en1.gif) no-repeat left; background-position:left; padding-left:30px; display:block; } /* English on */
.l-latest { background:url(../img/i_latest.png) no-repeat left; padding-left:11px; font-size: 0.8rem; color: var(--txt-d); } /* latest link */
.l-latest:hover { color: var(--txt); }
.l-il { background:url(../img/i_next.png) no-repeat left; padding-left:16px; margin-left:2px; } /* inline link (bold) */

/* -------------------------------------------------- CTX */

.ctx-sub a { color:var(--mn-d); }
.ctx-alt a:nth-child(odd) { color:var(--mn-d); }

/* -------------------------------------------------- Games */

.achievements {
	margin: 0.5rem;
}
.achievements div {
	background: rgba(50, 50, 50, 0.5);
	border-radius: 1rem;
	border: 2px solid rgb(100, 100, 100, 0.5);
	display:flex;
	text-align: center;
	align-items: center;
	font-weight: 600;
	padding: 0.5rem;
	transition: background-color 0.5s;
}
.achievements div:hover {
	background-color: rgba(100, 100, 100, 0.5);
}

/* -------------------------------------------------- FX */

.fx-blink { animation: blink 1.5s linear infinite; }
.fx-blink-mn { animation: blink 1.5s linear infinite; color: var(--mn); }
@keyframes blink { 50% { color: white; } }

.fx-pulse { animation: pulse 1.5s linear infinite; }
@keyframes pulse { 50% { transform: scale(1.4); } }

.fx-new {
	filter: brightness(0.6);
	transform: translateX(-1px);
	animation: new 2s infinite;
}
@keyframes new {
	50% {
		filter: brightness(1.7);
		transform: translateX(2px);
	}
}

.fx-rotate { animation: rotate 1.5s linear infinite; }
@keyframes rotate {
	to { transform: rotate(360deg); }
}

@keyframes fadein {
	to {
		transform: translate(0, 0);
		opacity: 100%;
	}
}

/* -------------------------------------------------- java script */

/* tooltip */
.js-tt, .js-toggle { position: relative; }
/* "window" box */
.js-ttw, .js-ctx {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.5rem;
	background: rgba(50,50,50,0.85);
	/* backdrop-filter: blur(6px); */
	box-shadow: 0 0 0.75rem 0rem #000;
	color: var(--txt);
	border: none;
	border-radius: 0.6rem;
	z-index: 10;
	pointer-events: none;
	margin: 0.5rem;
}
.js-ttw-small { font-size: 0.8rem; }
.js-ctx {
	font-size: 0.8rem;
	pointer-events: all;
	min-width: 300px;
}

#js-prev, #js-next { display: block; position: absolute; top: 0px; width: 50%; height: 100%; opacity: 0%; }
#js-prev { left: 0px; background: url(../img/prevlabel.gif) no-repeat left center; }
#js-next { right: 0px; background: url(../img/nextlabel.gif) no-repeat right center;}
#js-prev:hover, #js-next:hover { opacity:100%; }

/* only visible if JS is supported/enabled */
.js-only { display: none; }

dialog {
	position: fixed;
	background: rgba(50,50,50,0.85);
	box-shadow: 0 0 0.75rem 0rem #000;
	margin: auto;
	padding: 1rem;
	width: fit-content;
	min-width: min(100%, 400px);
	max-width: var(--pg-width);
	border-radius: 0.6rem;
	border: none;
	color: var(--txt);
}
.dialog-gallery {
	max-width: none;
}
dialog::backdrop {
	background: rgba(0,0,0,0.4);
	backdrop-filter: blur(20px);
	animation: dialog-fade 0.3s;
}
@keyframes dialog-fade {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.js-iframe-dialog {
	width: var(--pg-width);
	height: 700px;
	padding: 0.3rem;
}
iframe {
	width: 100%;
	height: calc(100% - 1rem);
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0.6rem;
}

/* -------------------------------------------------- Gooogle search */

.gsc-input input { color: black !important; }

/* -------------------------------------------------- Title */

#us-title {
	text-align: center;
	position: relative;
	padding: 1rem 0 1rem 0;
	overflow: hidden;
	line-height: 1;
}
#us-title > h1 {
	color: var(--mn);
	font-size: 2.3rem;
	font-weight: bold;
	opacity: 0%;
	transform: translate(5rem, 0);
	animation: fadein 1.5s normal forwards;
}
#us-title > h2 {
	color: #999;
	font-size: 1.2rem;
	font-weight: 600;
	opacity: 0%;
	transform: translate(-5rem, 0);
	animation: fadein 1.5s normal forwards;
}
#us-title > div {
	padding-top: 1.5rem;
	opacity: 0%;
	animation: fadein 4s normal forwards;
}

/* -------------------------------------------------- small screen */
@media screen and (max-width: 50rem) {
	html { scroll-padding-top: 0.5rem; }

	body { background-image: none; }
	body > header {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	nav { width: 100%; }
	.nav-main {
		float: right;
		display: flex;
		flex-direction: row-reverse;
	}
	.nav-side {
		float: left;
		display: flex;
		flex-direction: row-reverse;
	}
	.nav-profile {
		width: 100%;
		transform: none;
	}

	.drpdwn div {
		left: 0;
		right: 0;
		width: 100%;
	}
	.drpdwn:hover div {
		display: flex;
		flex-direction: column-reverse;
		position: absolute;
		bottom: var(--nav-size);
		/* fat finger hack */
		padding-bottom: 1.5rem;
	}
	.drpdwn a { padding: 0.7rem 0.4rem; }

	main {
		border: none;
		padding: 0.4rem 0.5rem 2.5rem 0.5rem;
	}

	dialog {
		min-width: auto;
		max-width: auto;
	}

	.cols > * { flex-basis: 100%; }
	.cols > *:before { flex-direction: column; }
	.cols-no-row-gap { gap: 0 !important; }
	.cols-even { grid-auto-flow: row; }

	.ma-big { margin: 1.5rem 0; }
	.tbl-wrap, .tbl-wrap-ns { line-height: 2; }
	.btn, .btn-cancel { padding: 0; }

	.rhide { display: none; }
	.rbigger { transform: scale(1.5) }

	.code::-webkit-scrollbar { width: 1.3rem; height: 1.3rem; }

	.btnbar { padding-left: 3px; }
	.btnbar img { transform: scale(1.3); }
	.btnbar img:hover { transform: scale(1.6); }
	.btnbar a + a { padding-left: 8px; }

	.f-sub { font-size: 1rem; }
	.f-sub a { margin: 0 0.2rem; }
	.js-iframe-dialog {
		width: 100%;
		height: 100%;
		margin: 0;
	}
	.js-iframe-dialog body { padding: 1rem !important; }
	.js-ctx { min-width: auto; }

	.tbl-pad td { padding: 0.5rem; }

	.pages > * { padding: 0 0.2rem; }

	#top-btn {
		padding: 0.4rem 0.65rem;
		right: 0.5rem;
	}
	#portal-icon { margin: 0 0.6rem; }
}

@media screen and (max-width: 65rem) {
	.sidenav {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		margin-bottom: 1rem;
		font-size: 1rem
	}
	.sidenav a { width: auto; }
}