*{
	margin: 0px;
	padding: 0px;
	font-family: courier;
	color: var(--txt-color);
	
}
body {
	background: var(--bg-color);
	}



input{
	border: 2px solid var(--txt-color);
	border-radius: 10px;
	background-color: rgba(0,0,0,0);
	font-size: 24px;
	height: 32px;
	width: 80%;
}

button{
	border: 2px solid var(--txt-color);
	border-radius: 10px;
	background-color: rgba(0,0,0,0);
	font-size: 24px;
	height: 32px;
}

#header{
	width: 100%;
	height: 64px;
	text-align: center;
}
#header > img{
	height: 100%;
}

h1{
	margin-top: 20px;
}


#login-div{
	text-align: center;
	height: 80%;
	margin: 0 auto;
}

#chat-div{
	text-align: center;
	margin: 0 auto;
	height: 80%;
}

#chat-output-div{
	height: 75%;
	overflow-y: scroll;
	overflow-wrap: break-word;
}

#nickname-txt{}

#room-name-txt{}

#message-txt{
	width: 80%;
	}
	
#join-btn{
	width: 60%;
}

#send-btn{
	width: 15%;
}

.msg-div{
	border: 2px solid var(--txt-color);
	border-radius: 10px;
	background-color: rgba(0,0,0,0);
	padding: 5px;
	margin-top: 10px;
	
}

@media (prefers-color-scheme: light) {

#header > img {
    filter: invert(1);
}
    
}@media (prefers-color-scheme: dark){

#header > img {
    filter: invert(0);
}
    
}