@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

html {
	/* Chat */
	--message-color: rgb(224, 224, 224);
	--message-color-selected: white;
	--server-message-color: lightblue;
	--server-alert-color: red;
	--timestamp-color: rgb(224, 224, 224);
	--timestamp-color-selected: white;
	--background-color: black;
	--background-color-selected: rgb(20, 20, 20);
	/* Sidebars */
	--secondary-background-color: #262626;
	--good-color: rgb(0, 255, 0);
	--bad-color: red;
	--unknown-color: #808080;

	--header-color: white;
}

html, body {
	background-color: var(--secondary-background-color);
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: "Rockwell", "Arial";
	display: flex;
	flex-direction: column;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	max-height: 100vh;
}

main {
	flex: 1 0 auto;
}

footer {
	flex-shrink: 0;
	text-align: center;
	padding: 10px;
}

a:link {
	text-decoration: none;
  	color: rgb(0, 255, 255);
}

a:visited {
  	color: rgb(0, 179, 179);
}

a:hover {
	text-decoration: underline;
  	color: #008181;
}

a:active {
  	color: rgb(138, 255, 255);
}

input, button {
	background-color: var(--secondary-background-color);
	border: 3px var(--background-color-selected) solid;
	outline: 0px;
	color: var(--message-color);
}

button:active {
	background-color: var(--background-color-selected);
}

#page-heading {
	text-align: center; 
	color: var(--header-color);
}

.small-form {
	background-color:rgb(110, 110, 110);
	text-align: center;
	margin: 0 auto 20px auto;
	width: 40vw;
	padding: 30px 20px 30px 20px;
}

.small-form-section {
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
	display: flex; 
	flex-direction: row; 
	justify-content: space-between; 
	width: 70%;
}

.small-form input {
	width: inherit;
	padding: 0px;
}

.small-form #submit {
	margin-top: 30px;
}

.small-form ul {
	text-align: left;
}

nav {
	display: flex;
	align-items: center;
	padding: 10px;
	background-color: #494949;
	position: relative;
}

#nav-right {
	margin-left: auto;
}

#nav-right a {
	padding-left: 15px;
}

#nav-middle {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

#chat-screen {
	display: flex;
}

#chat-bar-left {
	width: 10%;
}

#chat-bar-right {
	width: 15%;
}

#room-name {
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	color: var(--header-color)
}

#chat-bar-middle {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 39px);
}

.chat-bar {
	max-height: calc(100vh - 39px);
	overflow-y: auto;
}

#known-room-list {
	list-style: none;
	width: 70%;
	margin: 0 auto 0 auto;
	padding-left: 0px;
	white-space: wrap;
	word-wrap: break-word;
}

#known-room-list li {
	margin-bottom: 10px;
}

#known-room-list.secondary-render {
	font-size: 20px;
	width: 30%;
	margin-bottom: 50px;
}

#known-room-list.secondary-render li {
	margin-bottom: 10px;
}

#timestamps {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-start;
	overflow-y: auto;
	color: var(--timestamp-color);

	width: fit-content;
	background-color: var(--background-color);
	border-left: 1px var(--timestamp-color);
	margin: 0px;
	padding: 0px;

	-ms-overflow-style: none;
}

#chat-messages-area {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	background-color: var(--background-color);
}

#chat-container {
	display: grid;
    grid-template-columns: 1fr auto; 
    gap: 0px 0px;
    width: 100%;
	font-size: 12px;
	background-color: var(--background-color);
	grid-auto-rows: min-content;
	font-family: "JetBrains Mono", 'Courier New', Courier, monospace;
	font-variant-ligatures: normal;
}

.timestamp {
	white-space: nowrap;
	color: var(--timestamp-color);
	background-color: var(--background-color);
	align-self: start;
	height: fit-content;
	border-left: 1px white solid;
	padding: 0px 2px 0px 2px;
	height: 100%;
}

.message {
	word-wrap: break-word;
	word-break: break-word;
	white-space: pre-wrap;
	color: var(--message-color);
	min-width: 0;
	height: fit-content;
	display: inline;
	padding: 0px 2px 0px 2px;
}

.message-text {
	display: inline;
}

.message:hover + .timestamp {
    color: var(--timestamp-color-selected);
	background-color: var(--background-color-selected);
}

.message:hover {
    color: var(--message-color-selected);
	background-color: var(--background-color-selected);
}

.timestamp:hover {
    color: var(--message-color-selected);
	background-color: var(--background-color-selected);
}

.message + .timestamp:hover {
    color: var(--timestamp-color-selected);
	background-color: var(--background-color-selected);
}

.message-author {
	display: inline;
}

p {
	margin: 0px;
}

#chat-input {
	padding: 10px;
	border: none;
}

#chat-input:focus {
	outline: 0;
	border: none;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #000000;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #909090; 
}

#warning {
	color: red;
}

#home-container {
	display: flex;
	min-height: calc(100vh - 39px);
}

.home-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--header-color);
}

.search-results {
	display: flex;
	flex-direction: column;
	background-color: var(--background-color-selected);
	flex: 1;
	align-items: left;
	width: 70%;
	margin: 40px 0px 40px 0px;
	justify-content: top; 
	overflow-y: auto;
	padding: 10px;
}

.search-results-list {
	margin: 0px;
	display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;
    padding: 0;
}

.search-result-item {
	padding: 5px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: var(--secondary-background-color);
}

img {
    image-rendering: -webkit-optimize-contrast;
	image-rendering: pixelated; 
    image-rendering: crisp-edges;
}

.result-actions {
	display: flex;
	flex-direction: row;
	gap: 0px 5px;
}

.result-actions a {
	display: flex;
}

.result-actions img {
	flex: 1;
}