@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&family=Open+Sans:wght@400;600&family=Raleway:wght@400;700&family=Roboto+Mono:wght@300&family=Source+Code+Pro:wght@500&display=swap');

/* ⬇️ Colors ⬇️ */

:root {
	--background-color: #2D3047;
	--title: #FFFD82;
	--text-main: #D9F7FA;

	--red: #FF5E5B;
	--blue: #033F63;
	--green: #83E8BA;

	--font-primary: 'Open Sans', sans-serif;
	--font-title: 'Raleway', sans-serif;
	--font-placeholder: 'Flow Circular', monospace;
	--font-text: 'Source Code Pro', monospace;
	
	--vanity-font-1: 'Roboto Mono', monospace;
}

body {
	background-color: var(--background-color);
	color: var(--text-main);
	font-family: var(--font-primary);
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-title);
	color: var(--title)
}

.placeholder {
	font-family: var(--font-placeholder);
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Old versions of Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

a {
	color: #00b4d8;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	border: 0;
	background-color: var(--title);
	padding: 12px 15px;
	border-radius: 8px;
	margin: 2px;
}

input[type=submit] {
	border: 0;
	background-color: var(--title);
	padding: 12px 15px;
	border-radius: 8px;
	font-weight: bold;
	color: var(--background-color);
	margin: 2px;
}

input[type=file] {
	border: 3px dotted var(--title);
	background-color: var(--background-color);
	padding: 12px 15px;
	border-radius: 8px;
	font-weight: bold;
	color: var(--title);
	margin: 2px;
}

input[type=text] {
	border: 2px solid var(--title);
	background-color: white;
	padding: 12px 15px;
	border-radius: 8px;
	font-weight: bold;
	color: black;
	text-align: center;
	margin: 2px;
}

.progress-bar {
	width: 150px;
	height: 10px;
	background: linear-gradient(90deg, #fffd82 60%, #fffd82 60%);
	margin-left: auto;
	margin-right: auto;
	border-radius: 8px;
	margin-top: px;
	margin-bottom: 0;
	
}
/* ⬇️ Alignment ⬇️ */
.left-text {
	text-align: left;
}

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

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

/* ⬇️ Customisation ⬇️ */
.choosing-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	text-align: left;
	/* align-content: stretch; */
}

.choosing-grid > .item {
	height: 350px;
	border: 2px solid var(--title);
	border-radius: 10px;
	width: 250px;
	margin: 5px 15px 0px 0px;
}

.txt {
	background-color: #fff;
	color: #000;
	font-family: var(--font-text);
}

/* ⬇️ Themes ⬇️ */
.raw {
	background-color: #fff;
	color: #000;
	font-family: 'Times New Roman', Times, serif;
}

.cuschat {
	background-color: #D6D6D6;
	color: #1F1F1F;
	font-family: 'Open Sans', sans-serif;
}

.cuschat .msgln {
	margin: 0 0 5px 0;
}

.cuschat .msgln span.left-info {
	color: #FF5E5B;
}

.cuschat .msgln span.chat-time {
	color: #666;
	font-size: 60%;
	vertical-align: middle;
}

.cuschat .msgln b.user-name,
.cuschat .msgln b.user-name-left {
	font-weight: bold;
	/* background: #546e7a; */
	background: #78c3fb;
	color: white;
	padding: 2px 4px;
	font-size: 90%;
	border-radius: 4px;
	margin: 0 5px 0 0;
}

.cuschat .msgln b.user-name-left {
	background: #FF5E5B;
}

.cuschat .msgln b.system-name {
	font-weight: bold;
	background: #118ab2;
	color: white;
	padding: 2px 4px;
	font-size: 90%;
	border-radius: 4px;
	margin: 0 5px 0 0;
}

.archyve {
	background-color: #2D3047;
	color: #D9F7FA;
	font-family: 'Raleway', sans-serif;
}

.archyve .msgln {
	margin: 0 0 5px 0;
}

.archyve .msgln span.left-info {
	color: #FF5E5B;
}

.archyve .msgln span.chat-time {
	color: #cbcbcb;
	font-size: 60%;
	vertical-align: middle;
}

.archyve .msgln b.user-name,
.archyve .msgln b.user-name-left {
	font-weight: bold;
	/* background: #546e7a; */
	background: #FFFD82;
	color: black;
	padding: 2px 4px;
	font-size: 90%;
	border-radius: 4px;
	margin: 0 5px 0 0;
}

.archyve .msgln b.user-name-left {
	background: #FF5E5B;
}

.archyve .msgln b.system-name {
	font-weight: bold;
	background: #2bb9cf;
	color: white;
	padding: 2px 4px;
	font-size: 90%;
	border-radius: 4px;
	margin: 0 5px 0 0;
}


.terminal {
	background-color: #000;
	color: #4AF626;
	font-family: 'Roboto Mono', monospace;
}

.terminal .msgln {
	margin: 0 0 5px 0;
}

.terminal .msgln span.left-info {
	color: #4AF626;
}

.terminal .msgln span.chat-time {
	color: #4AF626;
	font-size: 60%;
	vertical-align: middle;
}

.terminal .msgln b.user-name,
.terminal .msgln b.user-name-left {
	font-weight: bold;
	/* background: #546e7a; */
	background: #4AF626;
	color: white;
	padding: 2px 4px;
	font-size: 90%;
	border-radius: 4px;
	margin: 0 5px 0 0;
}

.terminal .msgln b.user-name-left {
	background: #4AF626;
}

.terminal .msgln b.system-name {
	font-weight: bold;
	background: #1d660f;
	color: white;
	padding: 2px 4px;
	font-size: 90%;
	border-radius: 4px;
	margin: 0 5px 0 0;
}

.text-message {
	background-color: #f4f4f4;
	color: black;
	font-family: 'Open Sans', sans-serif;
}

.text-message .msgln {
	margin: 5px;
	border: 1px solid #235789;
	border-radius: 8px;
}

.text-message .msgln span.left-info {
	color: #ff3936;
}

.text-message .msgln span.chat-time {
	display: none;
}

.text-message .msgln b.user-name,
.text-message .msgln b.user-name-left {
	font-weight: bold;
	background: #FF70A6;
	/* background: #4AF626; */
	color: white;
	padding: 2px 4px;
	font-size: 90%;
	border-radius: 4px;
	margin-right: 2px;
}

.text-message .msgln b.user-name-left {
	background: #ff3936;
}

.text-message .msgln b.system-name {
	font-weight: bold;
	background: #ff3b86;
	color: white;
	padding: 2px 4px;
	font-size: 90%;
	border-radius: 4px;
	margin: 0 5px 0 0;
}

.text-message .msgln p {
	padding: 2px;
}

/* ⬇️ Code Styling ⬇️ */

code.hljs {
	background-color: var(--background-color) !important;
	display: flex;
	word-break: break-all !important;
	max-width: 100% !important;
	overflow-x: hidden !important;
}