/* ------------------------------ FONTS ------------------------------ */

@font-face {
	font-family: determination;
	src: url("/fonts/DTM-Mono.ttf") format("truetype");
}

@font-face {
	font-family: papyrus;
	src: url("/fonts/PapyrusUndertale.ttf") format("truetype");
}

@font-face {
	font-family: sans;
	src: url("/fonts/ComicSans-UT.ttf") format("truetype");
}

@font-face {
	font-family: wingdings;
	src: url("/fonts/PixelatedWingdings.ttf") format("truetype");
}

@font-face {
	font-family: earthbound;
	src: url("/fonts/EBMain.ttf") format("truetype");
}


/* Ubuntu */

@font-face {
	font-family: "Ubuntu";
	src: url("/fonts/Ubuntu/Ubuntu-Regular.ttf") format("truetype");
}

/* Libre Franklin */

@font-face {
	font-family: "Libre Franklin";
	font-style: normal;
	font-weight: 100 900;
	src: url("/fonts/Libre_Franklin/LibreFranklin-VariableFont_wght.ttf") format("truetype");
}

@font-face {
	font-family: "Libre Franklin";
	font-style: italic;
	font-weight: 100 900;
	src: url("/fonts/Libre_Franklin/LibreFranklin-Italic-VariableFont_wght.ttf") format("truetype");
}


[class^="icon-"], [class*=" icon-"], .icon {
	width: 1.15em;
	font-weight: bold;
    text-align: center;
}

h1 > [class^="icon-"]:not(.icon-loading), h1 *:not(button) [class^="icon-"]:not(.icon-loading), h1 > [class*=" icon-"]:not(.icon-loading), h1 :not(button) .icon, h1 *:not(button) [class*=" icon-"]:not(.icon-loading), h1 :not(button) .icon,
h2 > [class^="icon-"]:not(.icon-loading), h2 *:not(button) [class^="icon-"]:not(.icon-loading), h2 > [class*=" icon-"]:not(.icon-loading), h2 :not(button) .icon, h2 *:not(button) [class*=" icon-"]:not(.icon-loading), h2 :not(button) .icon,
h3 > [class^="icon-"]:not(.icon-loading), h3 *:not(button) [class^="icon-"]:not(.icon-loading), h3 > [class*=" icon-"]:not(.icon-loading), h3 :not(button) .icon, h3 *:not(button) [class*=" icon-"]:not(.icon-loading), h3 :not(button) .icon,
h4 > [class^="icon-"]:not(.icon-loading), h4 *:not(button) [class^="icon-"]:not(.icon-loading), h4 > [class*=" icon-"]:not(.icon-loading), h4 :not(button) .icon, h4 *:not(button) [class*=" icon-"]:not(.icon-loading), h4 :not(button) .icon {
	display: inline-block;
	transform: translateY(0.08em);
}

/* ------------------------------ DARK MODE ------------------------------ */

:root {
	--background-color-dark:        #191919;
	--background-color-alt-dark:    #2f2f2f;
	--text-color-dark:              #c4c4c4;
	--shadow-color-dark:            rgba(0,0,0,0.25);
	--background-color-light:       #ffffff;
	--background-color-alt-light:   #eeeeee;
	--text-color-light:             #000000;
	--shadow-color-light:           rgba(0,0,0,0.1);
}

html {
	--background-color:       var(--background-color-light);
	--background-color-alt:   var(--background-color-alt-light);
	--text-color:             var(--text-color-light);
	--shadow-color:           var(--shadow-color-light);
}

html.dark_mode {
	--background-color:       var(--background-color-dark);
	--background-color-alt:   var(--background-color-alt-dark);
	--text-color:             var(--text-color-dark);
	--shadow-color:           var(--shadow-color-dark);
}

/* ------------------------------ MAIN STYLES ------------------------------ */

html,
body {
	height: 100%;
}

html {
	overflow-x: hidden;
	scrollbar-width: auto;
    scrollbar-color: var(--color-base) #0a0a0a;
}

body {
	--bg-x-offset: 0px;

	font-family: 'Ubuntu', sans-serif;
	text-align: var(--language-align);
	direction: var(--language-direction);
	/*text-wrap: balance;*/
	color: var(--text-color);

	word-break: break-word;

	background-color: black;
	background-image: var(--theme-background-overlay-image), var(--theme-background-overlay-image2), var(--theme-background-image);
	padding: 0 !important;
	margin: 0;
}
.hasModals body {
	--bg-x-offset: CALC(var(--scrollbar-width) / 2);
}

html * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-brighter) var(--background-color-alt);
}
html.dark_mode * {
    scrollbar-color: var(--color-dark) var(--background-color-alt);
}

#all {
	width: 900px;
	/*height: 100px;*/
	display: block;
	margin: 0 auto;
	padding: 0;

	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 100vh;

	position: relative;
	z-index: 10;
}

header {
	background-color: var(--background-color);
	padding: 15px;
	margin-top: 20px;
	height: 200px;
}

#header_bg {
	position: relative;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	background-color: var(--color-dark);
	background-image: var(--theme-header-background-image);
	background-size: var(--theme-background-size-desktop);
	background-position: center;
	background-repeat: var(--theme-background-repeat-desktop);
}

#header_bg.beta::after {
	content: "BETA";
	position: absolute;
	bottom: 0.5em;
	left: 0.5em;

	background-color: var(--color-darkest);
	color: var(--color-brighter);

	border-radius: 0.25em;
	padding: 0.25em 0.5em;

	font-weight: bold;
	font-size: 2em;
}

#header_title {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;

	background-image: var(--theme-header-logo-image), var(--theme-header-title-big-image);
	background-repeat: no-repeat;
	background-position: bottom right, center;
}

#chromeWarning {
	display: none;
}

a, a:hover, a:visited {
	color: var(--color-base);
	text-decoration: none;
}
.dark_mode a, .dark_mode a:hover, .dark_mode a:visited {
	color: var(--color-bright);
	/*filter: saturate(0.75);*/
}
.bb_color a {
	color: inherit !important;
}
.bb_color a:not(.mention) {
	text-decoration: underline;
}
.bb_color .mention {
	background-color: currentColor !important;
}
.bb_color .mention .mention_label {
	/*color: white;*/
	filter: invert(1) hue-rotate(180deg) !important;
	--shadow-color: white;
	text-shadow:
		1px 1px 0 rgba(255,255,255,0.5) !important;
	/*	 0    1px 1px var(--shadow-color),
		 0    0   1px var(--shadow-color),
		 0   -1px 1px var(--shadow-color),
		 1px  1px 1px var(--shadow-color),
		 1px  0   1px var(--shadow-color),
		 1px -1px 1px var(--shadow-color),
		-1px  1px 1px var(--shadow-color),
		-1px  0   1px var(--shadow-color),
		-1px -1px 1px var(--shadow-color) !important;*/
}
.bb_color .mention:hover {
	filter: invert(1) hue-rotate(180deg) !important;
}
.bb_color .mention:hover .avatar_container {
	filter: invert(1) hue-rotate(180deg) !important;
}

a:hover {
	text-decoration: underline;
}

a {
	cursor: pointer;
}

hr {
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: var(--text-color);
}

u.dotted {
	text-decoration-style: dotted;
}

.notification_circle, .notification_pulse {
	background-color: var(--color-bright);
	width: 10px;
	height: 10px;
	border-radius: 100%;
	display: block;
}

.notification_circle {
	position: absolute;
	right: 0;
	top: 0;
	margin: 6px;
	border: 3px solid black;
	z-index: 20;
}

.notification_pulse {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-image: radial-gradient(circle, transparent 50%, var(--color-bright) 70%);
	animation-name: pulsating;
	animation-direction: forwards;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
	.notification_pulse {
		animation: none;
	}
}

.game_notification {
	position: absolute;
	left: 0;
	top: 0;
	margin: 2px 4px;
	z-index: 20;
	color: var(--color-bright);
}
.game_notification > .game_notification_icon {
	filter:
		drop-shadow( 1px  0   0 black)
		drop-shadow(-1px  0   0 black)
		drop-shadow( 1px  1px 0 black)
		drop-shadow(-1px  1px 0 black)
		drop-shadow( 1px -1px 0 black)
		drop-shadow(-1px -1px 0 black);
    margin: 3px;
	font-size: 18px !important; /* To avoid hover effect */
}
.game_notification > .game_notification_icon::before {
	content: "\e981";
	font-family: "icomoon" !important;
    font-weight: normal;
    line-height: 18px !important; /* To avoid hover effect */
}

/* TODO - move all nav styles to nav.css? */

#nav_notification_count, #usernav_notification_count, #mobile_notification_count, #mobile_friend_request_count, #mobile_admin_count {
	padding: 0 4px;
	font-weight: bold;
	border-radius: 5px;
	display: none;
}

#usernav_submenu_notification_count::before, #usernav_submenu_friend_request_count::before, #usernav_submenu_admin_count::before {
	content: ' (';
}
#usernav_submenu_notification_count::after, #usernav_submenu_friend_request_count::after, #usernav_submenu_admin_count::after {
	content: ')';
}
#usernav_submenu_notification_count, #usernav_submenu_friend_request_count, #usernav_submenu_admin_count {
	font-weight: bold;
	color: red;
	display: none;
}

#nav_notification_count, #mobile_notification_count, #mobile_friend_request_count, #mobile_admin_count {
	color: white !important;
	background-color: red;
}
#nav_notification_count {
	margin-left: 0.5em;
}

#usernav_notification_count {
	margin: 0 0 0 4px;
	background-color: white;
	color: var(--color-base) !important;
}

.notification_count:not(.notification_count_inline) {
	text-shadow: none !important;
}

main {
	/*margin-top: 20px;*/
	padding: 20px;
	background-color: var(--background-color);
	flex-grow: 1;
}


h1, #logo_container {
	font-size: 23pt;
}

h2 {
	font-size: 19pt;
}

h3 {
	font-size: 16pt;
}

h4 {
	font-size: 13pt;
}

h1, h2, h3, h4, #logo_container {
	color: var(--color-dark);
	margin: 1em 0 0 0;
}
h3, h4 {
	color: var(--color-darker);
}

.dark_mode h1, .dark_mode h2, .dark_mode h3, .dark_mode h4 {
	color: var(--color-bright);
}
.dark_mode h3, .dark_mode h4 {
	color: var(--color-brighter);
}

main > h1:first-child,
div > h1:first-child,
div > h2:first-child,
div > h3:first-child,
div > h4:first-child,
main > #logo_container:first-child,
main > article:first-child > h1:first-child,
main > article:first-child > #logo_container:first-child,
h1 + h2, h2 + h3, h3 + h4 {
	margin-top: 0;
}

p, .line {
	margin: 8px 0;
	line-height: 1.5em;
}

ul, ol {
	margin: 8px 0 8px 20px;
	line-height: 20px;
	padding: 0 10px 0 0;
}

ol {
	padding-left: 10px;
}

li {
	margin: 0.2em 0;
	line-height: 1.5em;
}

/* Prevents excess line breaks in HTML parsed from BBCode */
h3 + br, h4 + br, ul > br, ul + br, ol > br, ol + br, blockquote + br, details + br,
/* h1 + p > br:first-child, */ h2 + p > br:first-child, h3 + p > br:first-child {
	display: none;
}

img {
	max-width: 100%;
	font-style: italic; /* For ALT text */
}

audio {
	height: 2em;
    vertical-align: bottom;
	border-radius: 5px;
	max-width: 100%;
}

.soundcloud_embed {
	position: relative;
	display: inline-block;
    width: 100%;
    height: 125px;
}
.soundcloud_embed:not(.loaded) {
	background-color: var(--color-base);
}
.soundcloud_embed.error, .soundcloud_embed.forbidden {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
}
.soundcloud_embed.error {
	background-color: var(--red-darker);
	color: var(--red-brightest);
}
.soundcloud_embed.forbidden {
	background-color: var(--yellow-darker);
	color: var(--yellow-brightest);
}
.soundcloud_embed.forbidden a {
	color: var(--yellow-brighter) !important;
	text-decoration: underline;
}
.soundcloud_embed > iframe {
    width: 100%;
    height: 100%;
}

video {
	max-width: 100%;
	max-height: 50vh;
}

.youtube-embed, .tiktok-embed, .streamable-embed {
	aspect-ratio: 16 / 9;
	width: 100%;
	max-height: 50vh;
	border-radius: 8px;
	align-self: center;
}

footer {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;

	/*margin: 15px 0 0 0;*/
	padding: 10px 20px;
	background-color: var(--background-color);
	width: 100%;
	box-sizing: border-box;
	text-align: center;

	/*color: rgb(40,40,40);*/
	font-size: 12px;
	/*min-height: 100px;*/

	gap: 0.75em;
}
footer > div {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;

	/* gap: 0 1em; */
}
footer > div > div:not(:last-child)::after {
	content: "·";
	padding: 0 0.5em;
}

*[onclick] {
	cursor: pointer;
}

.pixelated {
	image-rendering: pixelated;
}


/* ------------------------------ QUOTES ------------------------------ */
/* ---- Regular quotes ---- */

blockquote {
	position: relative;
	margin: 0.25em;
	border: 1px solid var(--color-dark);
	padding: 0.5em;
	border-radius: 5px;
	box-sizing: border-box;
}
.dark_mode blockquote {
	border-color: var(--color-brighter);
}

blockquote.quote_with_author {
	margin-top: 1.5em;
	padding-top: 0;
	padding-bottom: 0;
}

blockquote .quote_author {
	display: inline-block;
	padding: 0.1em 0.4em;
	color: var(--color-darkest);
	border: 1px solid var(--color-dark);
	border-radius: 5px;
	background-color: var(--color-brightest);
	transform: translateY(-1em);
}
.dark_mode blockquote .quote_author {
	color: var(--color-brightest);
	border-color: var(--color-brighter);
	background-color: var(--color-dark);
}
blockquote .quote_author .mention {
	padding: 0;
}


/* ---- Quotes in comments ---- */

/* First quote */
.comment_text blockquote .quote_text {
	max-height: 8em;
	overflow-y: auto;
}

/* Second quote */
.comment_text blockquote blockquote .quote_text {
	max-height: 4em;
}

/* Deeper quotes are invisible */
.comment_text blockquote blockquote blockquote {
	display: none;
}


/* ---- Quotes inside quotes ---- */

/* Regular quotes */
.comment_text blockquote blockquote:not(.quote_with_author),
.notification_text blockquote:not(.quote_with_author),
.shortened_comment blockquote:not(.quote_with_author) {
	height: 2.2em;
	overflow: hidden;
}
/* Fade-out gradient */
.comment_text blockquote blockquote:not(.quote_with_author)::after,
.notification_text blockquote:not(.quote_with_author)::after,
.shortened_comment blockquote:not(.quote_with_author)::after {
	content: '';
	position: absolute;
	top: 1.5em;
	left: -0.5em;
	right: -0.5em;
	height: 0.5em;
	background: linear-gradient(transparent, var(--background-color));
}

/* Quotes with authors */
.comment_text blockquote blockquote.quote_with_author,
.notification_text blockquote.quote_with_author,
.shortened_comment blockquote.quote_with_author {
	height: 2.2em;
	padding-left: 0;
	display: flex;
	flex-direction: row;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0.25em;
	flex-wrap: nowrap;
	overflow: hidden;
}
/* Fade-out gradient */
.comment_text blockquote blockquote.quote_with_author::after,
.notification_text blockquote.quote_with_author::after,
.shortened_comment blockquote.quote_with_author::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1em;
	background: linear-gradient(90deg, transparent, var(--background-color));
}
/* Author */
.comment_text blockquote blockquote.quote_with_author > .quote_author,
.notification_text blockquote.quote_with_author > .quote_author,
.shortened_comment blockquote.quote_with_author > .quote_author {
	position: unset;

	display: flex;
	align-items: center;

	margin-right: 0.5em;
	border-width: 0 1px 0 0;
	flex-shrink: 0;
}
/* Contents */
.comment_text blockquote blockquote.quote_with_author > .quote_text,
.notification_text blockquote.quote_with_author > .quote_text,
.shortened_comment blockquote.quote_with_author > .quote_text {
	overflow: hidden;

	display: flex; /* Removes line breaks */
	gap: 0.25em;

	flex-shrink: 0;
	padding-top: 0.5em;
	height: 1.5em;
}
/*.comment_text*/ blockquote.quote_with_author > .quote_text {
	transform: translateY(-0.5em); /* Fills the space left by the author block moving up */
	margin-top: -0.25em; /* Tightens the space around */
	margin-bottom: -0.25em;
}
/* Quote in quote - no line breaks */
.comment_text blockquote blockquote.quote_with_author > .quote_text br,
.notification_text blockquote.quote_with_author > .quote_text br,
.shortened_comment blockquote.quote_with_author > .quote_text br {
	display: none !important;
}
/* Removes margin from first and last item */
/*.quote_text *:first-child {
	margin-top: 0;
}
.quote_text *:last-child {
	margin-bottom: 0;
}*/
/* Quote in quote right fade-out gradient */
.comment_text blockquote blockquote.quote_with_author::after,
.notification_text blockquote.quote_with_author::after,
.shortened_comment blockquote.quote_with_author::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1em;
	background: linear-gradient(90deg, transparent, var(--background-color));
}
/* Quote in quote author */
.comment_text blockquote blockquote.quote_with_author > .quote_author,
.notification_text blockquote.quote_with_author > .quote_author,
.shortened_comment blockquote.quote_with_author > .quote_author {
	display: flex;
	align-items: center;

	margin-right: 0.5em;
	border-width: 0 1px 0 0;
	flex-shrink: 0;

	transform: none;
}
/* Quote in quote contents */
.comment_text blockquote blockquote.quote_with_author > .quote_text,
.notification_text blockquote.quote_with_author > .quote_text,
.shortened_comment blockquote.quote_with_author > .quote_text {
	overflow: hidden;

	display: flex; /* Removes line breaks */
	gap: 0.25em;

	flex-shrink: 0;
	padding-top: 0.25em;
	height: 1.5em;

	/* Resets styles of normal quotes */
	transform: none;
	margin-top: unset;
	margin-bottom: unset;
}
.notification_text blockquote.quote_with_author > .quote_text {
	padding-top: 0.5em; /* Weird align issue fix */
}
/* No line breaks */
.comment_text blockquote blockquote.quote_with_author > .quote_text br,
.notification_text blockquote.quote_with_author > .quote_text br,
.shortened_comment blockquote.quote_with_author > .quote_text br {
	display: none !important;
}

/* Quotes inside quotes inside quotes - no thanks */
.comment_text blockquote blockquote blockquote,
.notification_text blockquote blockquote,
.shortened_comment blockquote blockquote {
	display: none !important;
}


/* ------------------------------ CODE BLOCKS ------------------------------ */

.code, .codeblock {
	font-family: monospace;
	border: 1px solid gray;
	background-color: rgba(127, 127, 127, 0.1); /*#EEE*/
	/*font-size: 12pt;*/
	font-size: 1.23em;
	border-radius: 5px;
	overflow-wrap: anywhere;
}
.code {
	display: inline-block;
	padding: 0 0.25em;
	margin: 0 0.1em;
}
.codeblock {
	display: block;
	padding: 0.5em;
	margin: 0.25em 0;
	white-space: pre-wrap;
}
/*.codeblock br,*/ .codeblock + br {
	display: none;
}


/* ------------------------------ NEWS ------------------------------ */

.entry {
	width: 100%;
	margin: 0.25em 0;
	padding: 0.5em;
	box-sizing: border-box;
	border: 2px solid gray;
	border-radius: 8px;
	background-color: rgba(127, 127, 127, 0.1);
}

.entry h3, .entry h4, .entry h5 {
	padding: 0;
	margin: 0;
}

.entry h3 + h5 {
	margin-top: 0.5em;
}

.entry h3 {
	font-size: 14pt;
}

.entry h4 {
	font-size: 12pt;
}

.entry h5 {
	font-size: 10pt;
}



/* ------------------------------ SEARCH BARS ------------------------------ */

#search_bar, .search_bar {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap: 0.5em;

	padding: 1em 0.5em;
	border: 1px solid var(--text-color);
	border-radius: 5px;

	margin: 1em 0;

	--search-label: 'Search';
}

#search_bar::before, .search_bar::before {
	content: var(--search-label);

	position: absolute;
	top: -1em;

	font-weight: bold;
	padding: 0.25em;
	background-color: var(--background-color);
}

#search_bar > div, .search_bar > div {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	/*width: 15em;*/
	/*flex-shrink: 1;*/
}

#search_bar > div > label, .search_bar > div > label {
	font-weight: bold;
	/*margin-bottom: 0.25em;*/
}

#search_bar > div > label, .search_bar > div > label,
#search_bar > div > div,   .search_bar > div > div {
	display: flex;
	justify-content: center;
	/*flex-wrap: wrap;*/
	text-align: center;
	gap: 0.25em;
}
#search_bar > div > *.vertical, .search_bar > div > *.vertical {
	flex-direction: column;
}


/* ------------------------------ TABLES ------------------------------ */

/* For horizontal scrolling */
.table_wrapper {
	position: relative;
	max-width: 100%;
	overflow-x: auto;
}

.table_wrapper > table > thead {
	position: sticky;
	top: 0;
}

table {
	/*border-collapse: collapse;*/
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 5px;
	width: 100%;
}
table th, table .body_header > tbody > tr:first-child td {
	word-break: normal;
}
table td, table th {
	border: 1px solid var(--text-color);
	padding: 0.1em 0.3em;
	background-color: var(--background-color-alt);

}
table thead {
	z-index: 1; /* To not appear behind buttons and such */
}
table thead tr {
	background-color: var(--background-color); /* To cover content behind its rounded borders */
	border-radius: 0;
}
table thead + tbody > tr:first-child > *,
table.body_header tr:nth-child(2) > * {
	border-top-width: 0;
}
table thead tr > *, table.body_header tr:first-child > * {
	border-color: var(--color-dark);
	border-width: 2px;
	background-color: var(--color-base);
	color: white;
	text-shadow: 0 0 2px var(--color-dark), 0 0 2px var(--color-dark);
}

/* Rounds the corner cells of tables */
table thead:first-child tr:first-child td:first-child,
table thead:first-child tr:first-child th:first-child,
table tbody:first-child tr:first-child td:first-child,
table tbody:first-child tr:first-child th:first-child {
	border-top-left-radius: 5px;
}
table thead:first-child tr:first-child td:last-child,
table thead:first-child tr:first-child th:last-child,
table tbody:first-child tr:first-child td:last-child,
table tbody:first-child tr:first-child th:last-child {
	border-top-right-radius: 5px;
}
table tbody:last-child tr:last-child td:first-child,
table tbody:last-child tr:last-child th:first-child {
	border-bottom-left-radius: 5px;
}
table tbody:last-child tr:last-child td:last-child,
table tbody:last-child tr:last-child th:last-child {
	border-bottom-right-radius: 5px;
}

/* Prevents double borders */
table tr:not(:first-child) td,
table tr:not(:first-child) th {
	border-top-width: 0;
}
table tr td:not(:first-child),
table tr th:not(:first-child) {
	border-left-width: 0;
}


/* ------------------------------ OLD IFRAME OVERLAY ------------------------------ */

#overlay {
	display: none;
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 20;
	top: 0;
	justify-content: center;
	align-items: center;
}

#overlay-middle {
	display: table-cell;
	vertical-align: middle;
}

#overlay-content {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: auto;
	height: auto;
}

#upload {
	height: 240px;
	width: 510px;
	border-radius: 4px;
	overflow: hidden;
	background-color: white;
	border: 0;
	box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.4);
}

#close {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url("/img/icons/Close.png");
	background-repeat: no-repeat;
	margin: -22px;
	padding: 0;
	cursor: pointer;
	transform: translate(-5px, -236px);
	border-radius: 100%;
	box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.4);
	z-index: 30;
}


/* ------------------------------ EMOJI ------------------------------ */

.emoji {
	display: inline;
	max-height: 1.5em;
	max-width: 1.5em;
	vertical-align: sub;
	box-sizing: border-box;
}
h1 .emoji, h2 .emoji, h3 .emoji, h4 .emoji, h5 .emoji, button .emoji, [class^="button-"] .emoji, .mention .emoji {
	max-height: 1em;
	max-width: 1em;
}


/* ------------------------------ MENTIONS AND COPYABLE TEXT ------------------------------ */

a.mention, a.copyable {
	display: inline-flex;
	/*justify-content: center;*/
	justify-content: flex-start;
	align-items: center;
	gap: 0.25em;

	line-height: 1em;
	/*max-width: CALC(100% - 1em);*/
	height: 1.25em;
	/*vertical-align: bottom;*/
	vertical-align: text-bottom;

	padding: 0 0.25em;
	border-radius: 3px;

	background-color: var(--color-brightest);
	color: var(--color-dark);
	filter: unset !important;
}
a.mention:hover, a.copyable:hover {
	background-color: var(--color-dark);
	color: var(--color-brightest);
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
.dark_mode a.mention, .dark_mode a.copyable {
	background-color: var(--color-dark);
	color: var(--color-brighter);
}
.dark_mode a.mention:hover, .dark_mode a.copyable:hover {
	background-color: var(--color-brighter);
	color: var(--color-dark);
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
a.mention .mention_label, a.copyable {
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
.dark_mode a.mention .mention_label, .dark_mode a.copyable {
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
a.mention .mention_label span {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 20ch;
}
a.mention.mention_deactivated {
	/*filter: grayscale(1) !important;*/
	filter: sepia(1) !important;
}
a.mention.mention_banned {
	/*filter: sepia(1) saturate(3) hue-rotate(-40deg) !important;*/
	filter: saturate(0) !important;
	text-decoration: line-through;
	opacity: 0.8;
}
a.mention.mention_deactivated .mention_label::after, .mention.mention_banned .mention_label::after, .mention.mention_admin .mention_label::after, .mention.mention_mod .mention_label::after {
	font-family: icomoon;
	/*margin-left: 0.25em;*/
}
a.mention.mention_deactivated .mention_label::after {
	content: "\e96e";
}
a.mention.mention_banned .mention_label::after {
	content: "\ea0f"; /* "\e93a" */
}
a.mention.mention_admin .mention_label::after {
	content: "\e911";
}
a.mention.mention_mod .mention_label::after {
	content: "\e94d";
}

a.mention > .avatar_container {
	display: inline-flex;
	height: 1em !important;
	width: 1em !important;
	overflow: hidden;
	/*margin-right: 0.2em !important;*/
	/*transform: translateY(13%);*/
	flex-shrink: 0;
}
a.mention > .mention_label {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;

	flex-shrink: 1;
	overflow: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
	line-height: 1.5em;
}

/* Adds the external link icon to any full link that doesn't contain demirramon.com */
a[href^="http://"]:not([href*="demirramon.com"])::after,
a[href^="https://"]:not([href*="demirramon.com"])::after {
	--link-icon: "\ea7d";
	font-family: icomoon;
	content: "\2004" var(--link-icon);
	font-weight: normal !important;
	/*padding-left: 0.25em;*/
}
a[href*="youtu.be"]::after,
a[href*="youtube.com"]::after {
	--link-icon: "\f379" !important;
}
a[href*="tiktok.com"]::after {
	--link-icon: "\f068" !important;
}
a[href*="soundcloud.com"]::after {
	--link-icon: "\f198" !important;
}
a[href*=".mp4"]::after,
a[href*=".webm"]::after,
a[href*=".mkv"]::after,
a[href*=".m4a"]::after,
a[href*=".avi"]::after {
	--link-icon: "\f078" !important;
}
a[href*=".mp3"]::after,
a[href*=".ogg"]::after,
a[href*=".opus"]::after,
a[href*=".flac"]::after {
	--link-icon: "\f50c" !important;
}

a.copyable::before {
	font-family: icomoon;
	content: "\e946";
	/*padding-right: 0.25em;*/
}

/* ------------------------------ FLOATING BUBBLES ------------------------------ */

.bubble {
	position: absolute;

	padding: 0.25em 0.5em;
	max-width: 90vw;

	background-color: var(--background-color);
	border: 1px solid var(--background-color-alt);
	border-radius: 5px;

	filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5));

	pointer-events: none;
	z-index: 100;

	opacity: 0;
	animation: bubble_in 0.5s ease-out 0s 1 forwards;
}
.bubble.exiting {
	animation: bubble_out 0.5s ease-in 0s 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
	.bubble {
		opacity: 1;
		animation: none;
	}
	.bubble.exiting {
		display: none;
		animation: none;
	}
}


/* ------------------------------ TAB COLLECTIONS ------------------------------ */

.tab_collection {
	margin-top: 4px;
}

.tab_collection .tabs_buttons {
	display: flex;
	flex-direction: row;
}
.tab_collection .tabs_buttons > button {
	border-radius: 0;
}
.tab_collection .tabs_buttons > button:first-child {
	border-top-left-radius: 5px;
}
.tab_collection .tabs_buttons > button:last-child {
	border-top-right-radius: 5px;
}
.tab_collection .tabs_buttons .tab_button:not(button) {
	box-sizing: border-box;
	color: white;
	border: 1px solid black;
	padding: 4px 6px;
	background-color: var(--color-base);
}
.tab_collection .tabs_buttons .tab_button:not(button):disabled,
.tab_collection .tabs_buttons .tab_button:not(button):active,
.tab_collection .tabs_buttons .tab_button:not(button):focus {
	border-bottom-width: 0;
	margin-top: 1px;
	filter: brightness(0.5);
	outline: none;
}
.tab_collection .tabs_content .tab_content {
	box-sizing: border-box;
	border: 1px solid var(--text-color);
	padding: 4px;
	display: block;
	border-radius: 0 10px 10px 10px;
}


/* ------------------------------ LANGUAGE SELECTOR STYLES ------------------------------ */

#lang_prompt_outer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;

	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;

	background-color: rgba(0, 0, 0, 0.8);
	width: 100vw;
	height: 100vh;
}

#lang_prompt_inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	background-color: white;
	min-width: 200px;
	min-height: 100px;

	border-radius: 5px;
	padding: 12px;
}

#lang_title,
#lang_select {
	margin: 0;
}

#lang_form {
	display: flex;
	justify-content: space-evenly;

	margin-top: 20px;
	width: 100%;
}


/* ------------------------------ FOLDABLE CATEGORIES ------------------------------ */

.foldable_category {
	position: relative;
	padding: 1em 0.25em;
	border-bottom: 1px solid var(--color-base);
}
.foldable_category:first-child {
	border-top: 1px solid var(--color-base);
	margin-top: 1em;
}
.foldable_category > h2,
.foldable_category > h3 {
	width: 100%;
	position: relative;
	padding-right: 2ch;
	box-sizing: border-box;
	margin: 0;
}
.foldable_category > .tab_button:not(.selected) {
	cursor: zoom-in;
}
.foldable_category > h2:not(.selected):hover,
.foldable_category > h3:not(.selected):hover {
	text-decoration: underline;
}
.foldable_category > h2::after,
.foldable_category > h3::after {
	position: absolute;
	right: 0;
	font-family: icomoon !important;
}
.foldable_category > h2:not(.selected)::after,
.foldable_category > h3:not(.selected)::after {
	content: "\e955";
}
.foldable_category > h2.selected::after,
.foldable_category > h3.selected::after {
	content: "\e95a";
}
.foldable_category .tab_content {
	margin-top: 0.5em;
}


/* ------------------------------ FOLDABLE DETAILS ------------------------------ */


details {
	border-radius: 5px;
	overflow: hidden;
	margin-top: 0.25em;
	border: 0.25em solid var(--color-base);
}

details > summary {
	background-color: var(--color-base);
	cursor: pointer;
	line-height: 1em;
	color: white;
	text-shadow:
		0 0 2px var(--color-dark),
		0 0 2px var(--color-dark);
	/*padding: 0.25em;*/
	user-select: none;
}
details > summary::before {
	content: " ";
}
details > summary::marker {
	content: "\e955";
	font-family: icomoon;
}
details[open] > summary::marker {
	content: "\e95a";
}

details summary + br {
	display: none;
}

details .details_content,
details > ul:first-child {
	border-top: 0.25em solid var(--color-base);
	padding: 0.25em;
}

/* For table of contets */

details.table_of_contents ul {
	margin: 0;
	border-top: 0.25em solid var(--color-base);
	padding-left: 1.25em;
}

details.table_of_contents ul li {
	margin: 0.25em 0;
	padding-left: 0.25em;
}

details.table_of_contents ul li::marker {
	content: "\ea34";
	font-family: icomoon;
	font-size: 0.75em;
	color: var(--color-base);
}

/* For the [hide] tag in comments */

details .details_content {
	padding: 0.25em;
}

details:not(.table_of_contents) summary::after {
	content: " (click to show)";
	opacity: 0.75;
}
details:not(.table_of_contents)[open] summary::after {
	content: " (click to hide)";
}


/* ------------------------------ INPUTS ------------------------------ */
/* ---- Regular inputs ---- */

input, select, textarea {
	text-align: var(--language-align);
	direction: var(--language-direction);
	margin: 0;
}

input:not([type="submit"]):not([type="button"]):disabled,
select:disabled,
textarea:disabled,
input:disabled + label {
	opacity: 0.5;
	cursor: not-allowed;
}

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

input:not([type="submit"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="range"]),
select, .custom_select,
textarea {
	color: var(--text-color);
	font-size: inherit;
	font-family: inherit;
	text-shadow: 0 1px 0.05em var(--shadow-color), 0 2px 0.05em var(--shadow-color);
	border: none;
	border-radius: 4px;
	background-color: var(--background-color-alt);
	box-shadow: inset 0 0.1em 0.1em var(--shadow-color);
	border: 1px solid var(--shadow-color);
	/* outline: 0 solid transparent; */
}
input:not([type="submit"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="range"]):focus-visible,
select:focus-visible, .custom_select:focus-visible, .custom_select:active,
textarea:focus-visible, label:focus-visible, details > summary:focus-visible {
	outline: 2px solid var(--color-base);
}
a:focus-visible {
	border-radius: 5px;
	outline: 2px solid currentColor;
}

.custom_select {
	display: flex;
	justify-content: space-between;
	/* border: 1px solid rgb(127, 127, 127); */
	padding: 1px 2px;
	gap: 0.25em;
}
.custom_select::after {
	content: "\e91f";
	font-family: icomoon;
}

textarea {
	resize: vertical;
}

label[for]:not([for=""]) {
	cursor: pointer;
}

.input_error {
	border-color: darkred !important;
	background-color: pink !important;
	color: red !important;
}
.dark_mode .input_error {
	border-color: red !important;
	background-color: darkred !important;
	color: pink !important;
}

.input_validated {
	border-color: darkgreen !important;
	background-color: lightgreen !important;
	color: green !important;
}
.dark_mode .input_validated {
	border-color: green !important;
	background-color: darkgreen !important;
	color: lightgreen !important;
}

/* ---- Custom inputs ---- */

p.switch_line, div.line.switch_line,
p.radio_line, div.line.radio_line,
p.checkbox_line, div.line.checkbox_line {
	margin: 12px 0;
}
.switch_line > label, .radio_line > label, .checkbox_line > label {
	border-radius: 5px;
}

/* Makes custom inputs light up (only if their hidden input is not disabled) */
.switch_line:hover input:not(:disabled) + label > .checkbox_switch,
.radio_line:hover input:not(:disabled) + label > .radio_button,
.checkbox_line:hover input:not(:disabled) + label > .checkbox_button {
	filter: brightness(1.25);
}

.switch_line > input,
.radio_line > input,
.checkbox_line > input {
	display: none;
}
.switch_line label,
.radio_line label,
.checkbox_line label {
	display: flex;
	/*flex-direction: var(--language-flex-direction);*/
	align-items: center;
	gap: 0.5em;
	width: 100%;
	box-sizing: border-box;
}

.switch_line input[type="checkbox"],
.radio_line input[type="radio"],
.checkbox_line input[type="checkbox"] {
	display: none;
}

/* ---- Custom switches ---- */

.checkbox_switch {
	--char-off: "\ea0f";
	--char-on: "\ea10";

	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex-shrink: 0;

	background-color: gray;
	border-radius: 20px;

	padding: 2px 1em 2px 2px;

	color: gray;

	transition: padding 0.25s ease-out /*cubic-bezier(0.3, 0.7, 0.6, 1.45)*/;
}
input[type="checkbox"]:checked + * > .checkbox_switch {
	background-color: var(--color-base);
	color: var(--color-base);
	padding: 2px 2px 2px 1em;
}
/*input[type="checkbox"]:disabled + * > .checkbox_switch {
	opacity: 0.5;
	cursor: not-allowed;
}*/

.checkbox_switch::after {
	content: var(--char-off);

	display: flex;
	align-items: center;
	justify-content: center;

	height: 1em;
	width: 1em;
	border-radius: 100%;

	background-color: lightgray;
	border: 0.3em solid lightgray;

	font-family: icomoon;
	font-size: 0.7em;
}
.dark_mode .checkbox_switch::after {
	background-color: #333;
	border-color: #333;
}
input[type="checkbox"]:checked + * > .checkbox_switch::after {
	content: var(--char-on);
	background-color: var(--color-brightest);
	border-color: var(--color-brightest);
}
.dark_mode input[type="checkbox"]:checked + * > .checkbox_switch::after {
	background-color: var(--color-darker);
	border-color: var(--color-darker);
}

/* ---- Custom radio buttons ---- */

.radio_button {
	width: 1.25em;
	height: 1.25em;
	border: 0.2em solid gray;
	border-radius: 100%;
	background-color: #fff;
	box-sizing: border-box;
	transition: border 0.1s ease-out;
	flex-shrink: 0;
}
.radio_button:hover,
label:hover > .radio_button,
.radio_button:active,
label:active > .radio_button {
	border-color: var(--color-base);
}

input[type="radio"]:checked + * > .radio_button {
	border-color: var(--color-base);
	border-width: 0.4em;
}

/*input[type="radio"]:disabled + * > .radio_button {
	opacity: 0.5;
	cursor: not-allowed;
}*/

/* ---- Custom checkbox buttons ---- */

.checkbox_button {
	--char: "\ea10";
	--indt: "\e929";

	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	width: 1.25em;
	height: 1.25em;
	border: 0.1em solid gray;
	border-radius: 0.25em;
	background-color: #fff;
	color: #fff;
	box-sizing: border-box;

	transition:
		border 0.1s ease-out,
		background-color 0.1s ease-out;
}
.checkbox_button::after {
	content: "";
	font-family: icomoon;
	font-size: 0;
	transition: font-size 0.1s ease-out;
}
.checkbox_button:hover,
label:hover > .checkbox_button,
.checkbox_button:active,
label:active > .checkbox_button {
	border-width: 0.15em;
	background-color: var(--color-brightest);
	border-color: var(--color-base);
}

input[type="checkbox"]:checked + * > .checkbox_button {
	background-color: var(--color-base);
	border-color: var(--color-dark);
}
input[type="checkbox"]:checked + * > .checkbox_button::after {
	content: var(--char);
	font-size: 0.75em;
}

input[type="checkbox"]:indeterminate + * > .checkbox_button {
	color: var(--color-bright);
	background-color: var(--color-dark);
	border-color: var(--color-dark);
}
input[type="checkbox"]:indeterminate + * > .checkbox_button::after {
	content: var(--indt);
	font-size: 1em;
}

/*input[type="checkbox"]:disabled + * > .checkbox_button {
	opacity: 0.5;
	cursor: not-allowed;
}*/

@media (prefers-reduced-motion: reduce) {
	.checkbox_switch, .radio_button, .checkbox_button, .checkbox_button::after {
		transition: none;
	}
}

/* ------------------------------ APRIL FOOLS PRESENTS ------------------------------ */

.clickable_present,
.modal_present,
.modal_present_open,
.modal_present_burnt,
.modal_present_pipe_bomb {
	background-image: url("/img/misc/present_closed.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.clickable_present {
	--hue: 0deg;

	position: absolute;

	width: 2rem;
	height: 2rem;

	animation: present_glow 2s ease-in-out infinite;
	animation-direction: alternate;
}

.modal_present,
.modal_present_burnt {
	width: 4rem;
	height: 4rem;
	margin: 0 auto;
}

.modal_present_open {
	background-image: url("/img/misc/present_open.png");
	width: 8rem;
	height: 4rem;
	margin: 0 auto;
}

.modal_present_prizes {
	background: url("/img/misc/present_prizes.png"), url("/img/misc/present_open.png");
	background-size: contain;
	background-position: center;
	background-repeat: repeat-x, no-repeat;

	animation: present_prizes_cycle 1.5s linear infinite;

	width: 100%;
	height: 6rem;
	margin: 0 auto;
}

.modal_present_burnt {
	background-image: url("/img/misc/present_burnt.png");
}

.modal_present_pipe_bomb {
	height: 8rem;
	background-image: url("/img/misc/pipe_bomb.png");

	animation: ignited_pipe_bomb 3s linear 1 1s forwards;
}

.modal_present_open_container {
	position: relative;

	height: 12rem;
	width: 100%;

	margin: 3rem 0 !important;

	overflow: hidden;
}

.modal_present_open_bottom,
.modal_present_open_surprise,
.modal_present_open_glow,
.modal_present_open_top {
	position: absolute;

	height: 6rem;
	width: 6rem;

	left: calc(50% - 3rem);
	bottom: 0;

	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;

	animation-fill-mode: forwards;
}

.modal_present_open_bottom {
	z-index: 260;
	background-image: url("/img/misc/present_open_bottom.png");
	animation: fade_out 1s linear 2s 1 forwards;
}

.modal_present_open_top {
	z-index: 261;
	background-image: url("/img/misc/present_open_top.png");
	animation:
		present_open_top 0.75s ease-out 0.75s 1 forwards,
		fade_out 1s linear 2s 1 forwards;
}

.modal_present_open_surprise {
	z-index: 259;
	transform: scale(0.5);
	/*background-image: url('/img/misc/present_prize_1.png');*/
	animation:
		present_random_cycle 0.5s linear 0s infinite none,
		present_open_surprise 2s ease-out 1s 1 forwards;
}

.modal_present_open_glow {
	position: absolute;

	left: calc(50% - 7rem);
	bottom: calc(50% - 7rem);

	z-index: 258;
	opacity: 0;
	height: 14rem;
	width: 14rem;
	background-image: url("/img/misc/present_prize_glow.png");
	animation:
		fade_in 1s ease-out 1.5s 1 forwards,
		spin 3s linear 0s infinite forwards;
}

.fullscreen_explosion {
	position: fixed;
	inset: 0;

	z-index: 999;
	background-image: url("/img/misc/explosion.gif");
	background-size: cover;
	background-position: center;
	background-color: rgba(0, 0, 0, 0.8);
	background-repeat: no-repeat;

	/*animation: explosion_bg_anim 2s steps(18) 0s 1 forwards;*/
}

@media (prefers-reduced-motion: reduce) {
	.clickable_present {
		animation: none;
	}
	.modal_present_prizes {
		animation: present_prizes_cycle 6s linear infinite;
	}
	.modal_present_open_bottom {
		animation: none;
		display: none;
	}
	.modal_present_open_surprise {
		animation:
			present_random_cycle 4s linear 0s infinite none,
			present_open_surprise_low_motion 2s ease-out 1s 1 forwards;
	}
	.modal_present_open_glow {
		opacity: 1;
		animation: none;
	}
}

/* ------------------------------ APRIL FOOLS AGE VERIFICATION ------------------------------ */

#age_bar {
	position: relative;
	width: 100%;
	height: 0.5em;

	margin-top: 1em;

	background-color: var(--background-color-alt);
	box-shadow: inset 0 0.1em 0.1em var(--shadow-color);
	border: 1px solid var(--shadow-color);
	border-radius: 5px;
}
#age_bar::before {
	content: "";
	position: absolute;
	left: 0;
	right: CALC(100% - var(--cal-age));
	top: 0;
	bottom: 0;
	background: linear-gradient(var(--color-dark), var(--color-base));
	border-radius: 5px;
}
#age_bar::after {
	content: "";
	position: absolute;
	top: -4px;
	bottom: -4px;
	left: var(--sel-age);
	width: 2px;
	background-color: var(--text-color);
}

/* ------------------------------ BORDER/CONTENT JOIN ------------------------------ */
/* These classes will make elements (or the content of elements) join with flat borders */

.border-join-top {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}
.border-join-right {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.border-join-bottom {
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
.border-join-left {
	border-bottom-left-radius: 0 !important;
	border-top-left-radius: 0 !important;
}

.border-join-top-left {
	border-top-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-top-left-radius: 0 !important;
}
.border-join-top-right {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.border-join-bottom-left {
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-top-left-radius: 0 !important;
}
.border-join-bottom-right {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.border-join-all {
	border-radius: 0 !important;
}


.content-join > *:first-child:not(:last-child),
.content-join-h > *:first-child:not(:last-child) {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.content-join > *:last-child:not(:first-child),
.content-join-h > *:last-child:not(:first-child) {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.content-join-v > *:first-child:not(:last-child) {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.content-join-v > *:last-child:not(:first-child) {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.content-join-h-bottom > * {
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
.content-join-h-bottom > *:first-child:not(:last-child) {
	border-top-right-radius: 0 !important;
}
.content-join-h-bottom > *:last-child:not(:first-child) {
	border-top-left-radius: 0 !important;
}

.content-join-h-top > * {
	border-top-right-radius: 0 !important;
	border-top-left-radius: 0 !important;
}
.content-join-h-top > *:first-child:not(:last-child) {
	border-bottom-right-radius: 0 !important;
}
.content-join-h-top > *:last-child:not(:first-child) {
	border-bottom-left-radius: 0 !important;
}

.content-join > *:not(:first-child):not(:last-child),
.content-join-h > *:not(:first-child):not(:last-child),
.content-join-v > *:not(:first-child):not(:last-child),
.content-join-h-top > *:not(:first-child):not(:last-child),
.content-join-h-bottom > *:not(:first-child):not(:last-child),
.content-join-all > * {
	border-radius: 0 !important;
}


/* ------------------------------ TEXT EDITOR TOOLBARS ------------------------------ */

.text_editor_toolbar {
	display: flex;
	gap: 0.25em 0.75em;
	flex-wrap: wrap;
	margin: 0.25em 0;
}
.text_editor_toolbar > div {
	display: flex;
}
.text_editor_toolbar button,
.text_editor_toolbar a {
	padding: 4px 5px;
}


/* ------------------------------ MISC ------------------------------ */

.gray {
	color: gray;
}

.small {
	font-size: 0.75rem;
	color: gray;
}

.tiny {
	font-size: 0.65rem;
	color: gray;
}

.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}

/* Hides ads in no-ad areas */
.no-ads .google-auto-placed {
	display: none !important;
}

/* Darkens ads in dark mode */
.dark_mode ins.adsbygoogle {
	filter: brightness(75%);
}

/* Rotates loading icons */
.icon-loading {
	animation: spin 1s linear infinite;
	display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
	.icon-loading {
		animation: none;
	}
}

/* Attempts to disable antialias on images */
.no-antialias {
	image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED  */
	image-rendering: -moz-crisp-edges; /* Firefox                        */
	image-rendering: -o-crisp-edges; /* Opera                          */
	image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
	image-rendering: pixelated; /* Universal support since 2021   */
	image-rendering: optimize-contrast; /* CSS3 Proposed                  */
	-ms-interpolation-mode: nearest-neighbor; /* IE8+                           */
}

#forced_theme {
	display: var(--forced-theme-warning-display);
}

.bb_background {
	padding: 0 0.25em;
	border-radius: 3px;
	color: var(--contrast-color-light);
}
.dark_mode .bb_background {
	color: var(--contrast-color-dark);
}

:not(.bb_background) > .bb_color {
	--contrast-border: var(--contrast-border-light);
	text-shadow:
		-2px -1px 0 var(--contrast-border),
		-2px  0   0 var(--contrast-border),
		-2px  1px 0 var(--contrast-border),

		-1px -2px 0 var(--contrast-border),
		-1px -1px 0 var(--contrast-border),
		-1px  0   0 var(--contrast-border),
		-1px  1px 0 var(--contrast-border),
		-1px  2px 0 var(--contrast-border),

		 0   -2px 0 var(--contrast-border),
		 0   -1px 0 var(--contrast-border),
		 0    0   0 var(--contrast-border),
		 0    1px 0 var(--contrast-border),
		 0    2px 0 var(--contrast-border),

		 1px -2px 0 var(--contrast-border),
		 1px -1px 0 var(--contrast-border),
		 1px  0   0 var(--contrast-border),
		 1px  1px 0 var(--contrast-border),
		 1px  2px 0 var(--contrast-border),

		 2px -1px 0 var(--contrast-border),
		 2px  0   0 var(--contrast-border),
		 2px  1px 0 var(--contrast-border)
	;
}
.dark_mode :not(.bb_background) > .bb_color {
	--contrast-border: var(--contrast-border-dark);
}

.spoiler:not(.revealed) {
	background: repeating-linear-gradient(45deg, transparent, var(--text-color), transparent 5px);
	cursor: help;
	transition: background 1s;
}
.spoiler:not(.revealed) > * {
	opacity: 0;
	pointer-events: none;
}

.spoiler.revealed {
	background: repeating-linear-gradient(45deg, transparent, #8883, transparent 5px);
	animation: fade_in 1s ease-out;
}
@media (prefers-reduced-motion: reduce) {
	.spoiler.revealied {
		animation: none;
		transition: none;
	}
}


.preview:not(.comment_outer_container) {
	padding-top: CALC(2.5em + 4px) !important;
	position: relative;
}
.preview::before {
	content: var(--preview-label);

	display: block;
	position: absolute;

	background-color: var(--color-base);
	border: 2px solid var(--background-color);
	border-radius: 5px;

	text-align: center;
	font-weight: bold;
	color: var(--color-brightest);

	padding: 0.2em;
	margin: 0.5em 3em;

	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.div_loading {
	filter: opacity(0.5);
	pointer-events: none;
}

/* ------------------------------ WIDE SCREEN ONLY STYLES ------------------------------ */

@media only screen and (min-width: 916px) {
	.mobile:not(.desktop), .tablet:not(.desktop) {
		display: none !important;
	}
}


/* ------------------------------ SMALL SCREEN / TABLET STYLES ------------------------------ */

@media only screen and (max-width: 916px) {

	#all {
		width: 100%;
		/*height: 100px;
		display: block;*/
		margin: 0 auto;
	}

	header {
		height: 100px;
		margin-top: 0;
		padding: 1em;
	}

	#header_bg {
		background-size: var(--theme-background-size-tablet);
		background-repeat: var(--theme-background-repeat-tablet);
		background-position: center;
		padding: 0.5em;
	}

	#header_bg.beta::after {
		font-size: 1.25em;
	}

	#header_title {
		background-image: var(--theme-header-title-small-image);
		background-size: contain;
		/*background-repeat: no-repeat;*/
		background-position: center;

		width: 100%;
		min-height: 100%;
	}

	main {
		/*margin-top: 10px;*/
		padding: 10px;
	}

	#upload {
		height: 300px;
		width: 100%;
		border-radius: 0;
		border: 0;
		box-shadow: none;
		margin-left: -25px;
	}

	#close {
		transform: translate(-5px, -296px);
	}

	#errormain {
		width: 100%;
		border-radius: 0;
		padding: 15px;
	}

	.notablet {
		display: none !important;
	}

	.desktop:not(.tablet), .mobile:not(.tablet) {
		display: none !important;
	}

}


/* ------------------------------ MOBILE PHONE STYLES ------------------------------ */

@media only screen and (max-width: 590px) {

	body {
		background-image: var(--theme-background-image);
	}

	/*.mobile_nav_open {
		overflow-y: hidden;
	}*/

	#all {
		position: relative;
		gap: 10px;
	}

	header {
		height: 60px;
		width: 100%;
		border-bottom: 1px solid black;
		padding: 0;
		/*z-index: 199;*/
	}

	#header_bg {
		margin: 0;
		/* padding: 6px 70px; */
		padding: 3px 55px;
		box-sizing: border-box;

		background-image: var(--theme-header-background-image);
		background-position: center;
		background-repeat: var(--theme-background-repeat-mobile);
		background-size: var(--theme-background-size-mobile);
	}

	#header_bg.beta::after {
		font-size: 1em;
	}

	#header_title {
		background-image: var(--theme-header-title-small-image) !important;
		background-position: center;
	}

	main {
		/*margin-top: 60px;*/
		margin-top: 0;
	}

	.desktop:not(.mobile), .tablet:not(.mobile) {
		display: none !important;
	}

	.nomobile {
		display: none !important;
	}

	#search_bar #search_button,
	.search_bar #search_button,
	.search_bar .search_button {
		margin-left: 30%;
		margin-right: 30%;
	}

	footer > div {
		gap: 0 1.5em;
	}
	footer > div > div:not(:last-child)::after {
		display: none;
	}
}

/* ------------------------------ ANIMATIONS ------------------------------ */

@keyframes spin {
	100% {
		transform: rotate(-360deg);
	}
}

@keyframes pulsating {
	0% {
		transform: scale(1);
		filter: opacity(0);
	}

	10% {
		transform: scale(1);
		filter: opacity(1);
	}

	90% {
		transform: scale(5);
		filter: opacity(0);
	}

	100% {
		transform: scale(5);
		filter: opacity(0);
	}
}

@keyframes present_glow {
	from {
		filter: drop-shadow(0 0 2px rgb(0, 255, 255)) hue-rotate(var(--hue));
		transform: translateY(10%);
	}
	to {
		filter: drop-shadow(0 0 8px rgb(54, 81, 255)) hue-rotate(var(--hue));
		transform: translateY(-10%);
	}
}

/*@keyframes present_prizes_cycle {

	0% {
		background-position-x: 0%, center;
	}

	100% {
		background-position-x: CALC(6rem * 11), center;
	}

}*/

@keyframes present_open_top {
	from {
		bottom: 0;
	}

	to {
		bottom: 6rem;
	}
}

@keyframes present_open_surprise {
	0% {
		bottom: 0;
		z-index: 259;
		transform: scale(0.5);
	}

	50% {
		bottom: 3rem;
		z-index: 259;
		transform: scale(0.5);
	}
	51% {
		bottom: 3rem;
		z-index: 262;
		transform: scale(0.5);
	}

	100% {
		bottom: 3rem;
		z-index: 262;
		transform: scale(1.25);
	}
}
@keyframes present_open_surprise_low_motion {
	49% {
		bottom: 0;
		z-index: 259;
		transform: scale(0.5);
	}
	50% {
		bottom: 3rem;
		z-index: 259;
		transform: scale(0.5);
	}
}

@keyframes present_random_cycle {
	  0% { background-image: url("/img/misc/present_prize_1.png"); }
	 16% { background-image: url("/img/misc/present_prize_2.png"); }
	 33% { background-image: url("/img/misc/present_prize_3.png"); }
	 49% { background-image: url("/img/misc/present_prize_4.png"); }
	 66% { background-image: url("/img/misc/present_prize_5.png"); }
	 82% { background-image: url("/img/misc/present_prize_6.png"); }
	100% { background-image: url("/img/misc/present_prize_1.png"); }
}

@keyframes ignited_pipe_bomb {
	0% {
		filter: brightness(1);
	}
	50% {
		filter: brightness(10);
	}
	75% {
		filter: brightness(15);
		opacity: 1;
	}
	100% {
		opacity: 0;
		filter: brightness(100);
	}
}

@keyframes fade_in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fade_out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes bubble_in {
	from {
		opacity: 0;
		transform: translateY(1em);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes bubble_out {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-1em);
	}
}

@keyframes rainbow_hue {
	from {
		filter: hue-rotate(0deg);
	}
	to {
		filter: hue-rotate(360deg);
	}
}

/*@keyframes explosion_bg_anim {
	100% { background-position: -100vw }
}*/