@font-face {
	font-family: "Pixel Operator";
	src: url("https://files.catbox.moe/kyguk9.ttf") format("truetype");
}

:root {
	--bg-color: #1e1b1b;
	--container-color: #25222280;
	--container-color-2: #252222;
	--text-color: #b7ac8e;
	--link-color: #ebdbb2;
	--shadow-color: #b7ac8e;
	--fonts: "Pixel Operator", "Trebuchet MS", sans-serif;
}

/* GLOBAL */
iframe {
	border: none;
	height: 100%;
	line-height: 1.25em;
	background-color: transparent;
	font-size: 16px;
}

#top_banner {
	display: none;
}

/* lowercase */
#loginBanner,
#settingsMenu p,
#settingsMenu h2,
#settingsMenu label,
.senderInfo,
#scrollToBottom,
#footer {
	text-transform: lowercase;
}

#main,
#background,
#input,
#settingsMenu,
#scrollToBottom {
	color: var(--text-color);
	font-family: var(--fonts) !important;
	font-size: 16px !important;
	image-rendering: pixelated;
	line-height: 1.4em;
}

/* MESSAGES */
.msgWrapper {
	margin: 1em 0;
}

.allMessages {
	display: inline-block;
	width: auto !important;
	min-width: 150px;
	font-size: 1em !important;
	padding: 1em;
	image-rendering: pixelated;
	background-color: var(--container-color-2);
}

.owner {
	background-color: var(--text-color);
	color: var(--link-color);
	text-transform: lowercase;
	border-radius: 0;
	margin-right: 5px;
}

#scrollToBottom {
	background-color: var(--container-color-2) !important;
	color: var(--text-color) !important;
	border-radius: 0 !important;
	padding: 0.5em !important;
}

#is_typing {
	background-color: var(--container-color);
	border-radius: 0;
	padding: 0.5em;
	left: -2px;
}

#is_typing span {
	background-color: var(--text-color);
	border-radius: 0;
}

/* INPUT */
#input {
	background-color: transparent;
	border-radius: 0;
	position: relative;
	margin-left: 2px;
	overflow: hidden;
	padding: 1em;
	background-color: var(--container-color);
}

#input::before {
	display: inline;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	top: 0;
	left: 0;
	overflow: hidden;
	background-color: var(--bg-color);
	vertical-align: baseline;
}

#input:empty::before {
	position: relative;
	content: "send message (hit enter to send)";
	font-size: 1em;
	color: var(--text-color);
	opacity: 0.75;
	overflow: hidden;
	background-color: transparent;
}

#emojiTrayToggle {
	background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c304e557-8931-49c6-87d3-de409d5f7bf7/dle3ytc-7db1b2f7-10b3-4980-85e8-a73712c60597.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiIvZi9jMzA0ZTU1Ny04OTMxLTQ5YzYtODdkMy1kZTQwOWQ1ZjdiZjcvZGxlM3l0Yy03ZGIxYjJmNy0xMGIzLTQ5ODAtODVlOC1hNzM3MTJjNjA1OTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.eSIo9A-kn-FDlbUGCbORSAeSkyVdO2AEiSB5yKlFH90);
}

#emojiTray {
	text-transform: lowercase;
}

/* SETTINGS */
#settings,
#emojiTrayToggle {
	image-rendering: crisp-edges;
	width: 16px;
	height: 16px;
	margin: 1rem;
	object-fit: cover;
}

#settings {
	background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c304e557-8931-49c6-87d3-de409d5f7bf7/dle3ytk-a57bfade-5da3-4992-b99f-7c4b7b53a9a7.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiIvZi9jMzA0ZTU1Ny04OTMxLTQ5YzYtODdkMy1kZTQwOWQ1ZjdiZjcvZGxlM3l0ay1hNTdiZmFkZS01ZGEzLTQ5OTItYjk5Zi03YzRiN2I1M2E5YTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.Mz-nHvoFIpSlDQK1sqUn-yDLgWmAB_gfAbBEW1KsAeU);
}

#settingsMenu {
	background-color: var(--bg-color);
	color: var(--text-color);
}

#loginBanner,
#settingsMenu p,
#settingsMenu h2,
#settingsMenu label,
#closeSettingsBtn,
#footer,
#save {
	text-transform: lowercase;
}

#loginBanner,
#closeSettingsBtn {
	background-color: var(--text-color);
	color: var(--bg-color);
}

#loginBanner {
	color: var(--bg-color) !important;
}

hr {
	display: none;
}

#settingsMenu button,
#settingsMenu input {
	font-size: 1em;
	font-family: var(--fonts) !important;
	border: none;
	border-radius: 0;
	padding: 0.25em;
	color: var(--container-color-2);
	background-color: var(--text-color);
}

label {
	margin-left: 0;
}

input[type="checkbox"] + label::after {
	color: var(--text-color);
}