body {
	align-items: center;
	justify-content: center;
	height: 100vh;
}

#main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: 80%;
	height: 80%;
	padding: 20px;
	background: #363a4f;
	border: 4px solid #494d64;
}

#username-input-container, #room-join-input, #room-list {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 80%;
}

#room-list {
	flex-direction: column;
	max-height: 50%;
	overflow: auto;
	background: #494d64;
	padding: 10px;
}

#room-list button {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

#room-list button span:nth-child(1)::before {
	content: "Code: ";
}

#room-list button span:nth-child(2)::after {
	content: " players";
}

.room-playing {
	color: #a6da95;
}

.room-playing::after {
	content: "playing";
}

.room-waiting {
	color: #eed49f;
}

.room-waiting::after {
	content: "waiting";
}

.error {
	color: #ed8796;
}

hr {
	width: 90% !important;
	border: 2px solid #494d64;
}

#play {
	display: flex;
	width: 100%;
	flex: 1;
	min-height: 0;
	flex-direction: row;
	gap: 10px;
}

#play-left {
	width: 70%;
	height: 100%;
	background: #494d64;
	border: 2px solid #5b6078;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#play-right {
	display: flex;
	width: 30%;
	height: 100%;
	flex-direction: column;
	gap: 10px;
}

#play-right > span {
	background: #494d64;
	border: 2px solid #5b6078;
	padding: 10px;
}

#play-right > div {
	background: #494d64;
	border: 2px solid #5b6078;
	padding: 10px;
	height: 100%;
}

#day-chat {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
}

#day-chat-inner {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

#day-chat-input {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.vote-update-text {
	color: #a6adc8;
}

dialog {
  padding: 20px;
  width: 90%;
	background: #363a4f;
	border: 4px solid #494d64;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

dialog::backdrop {
  background-color: #1819267f;
  backdrop-filter: blur(3px);
}

@keyframes modal-open {
	from { opacity: 0%; transform: translateY(-5px); }
	to { opacity: 100%; transform: translateY(0px); }
}