body {
    background-color: #333; /* Dark background color for the body */
    color: #fff; /* White text color */
    font-family: 'Segoe UI', sans-serif; /* Modern font family */
}
#chat_view{
	
	width: 100% ;
	
}

h1{
	font-size: 6vh;	
}

textarea{
	resize: none;
	max-height: 20vh;
	height: auto;
	min-height: auto;
	overflow: hidden;
}


#chatDisplay {
	text-align: left;
	font-size: 2.1vh;
	width: auto ;
    height: 60vh; /* Adjust height as needed */
    overflow-y: auto; /* Enable vertical scrolling */
    display: flex;
    flex-direction: column-reverse; /* Display messages in reverse order */
    border: none; /* Remove border */
    padding: 2vh;
    margin-bottom: 2vh;
    border-radius: 1.1vh; /* More rounded corners */
    background-color: #222; /* Dark background color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle box shadow */
}

#message_form{
	
	display: flex;
	
}

img {
    max-width: 90%;
    border-radius: 20px;
    display: block;
}

#messageInput {
	
	font-size: 3vh;
	float: left;
    flex-grow:1;	
    padding: 1.1vh;
    border: none; /* Remove border */
    border-radius: 2.1vh; /* Rounded corners */
    background-color: #333; /* Dark background color */
    color: #fff; /* White text color */
	margin-bottom: 1.1vh;
	margin-right: 1.1vh;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle box shadow */
}

svg{
	width: 5vh;
	height:5vh;
	vertical-align: middle;
	float:none;
	display: block;
	margin: auto;
	
}

#msg{
	
	background-color: rgb(0,0,0,0.1);
	border-radius: 1.1vh;	
	padding: 1.1vh;
}


#send {
	font-size: 3vh;
	float: right;
	text-align: center
	width: auto;
	height: auto;
    padding: 1.1vh;
    background-color: rgb(0,0,0,0); 
	opacity: 0.7;
    color: #fff; 
    border: none;
    border-radius: 360vh; 
    cursor: pointer;
    transition: opacity 0.3s ease; 
	margin-bottom: 1.1vh;
}

#send:hover {
    opacity: 1;
}




#username{
	font-size: 3vh;
    padding: 1.1vh;
    border: none; /* Remove border */
    border-radius: 2.1vh; /* Rounded corners */
    background-color: rgba(0,0,0,0.5); /* Dark background color */
    color: #fff; /* White text color */
	margin-bottom: 1.1vh;
	margin-right: 1.1vh;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle box shadow */
	
}


p{
	
	font-size: 2.5vh;
}

#login{
	
	font-size: 3vh;
	text-align: center
	width: auto;
	height: auto;
    padding: 1.1vh;
    background-color: rgb(87,160,255,1); 
	opacity: 0.7;
    color: #fff; 
    border: none;
    border-radius: 360vh; 
    cursor: pointer;
    transition: opacity 0.3s ease; 
	margin-bottom: 1.1vh;
}

#login:hover{
	
	opacity:1;
}