:root
{
	--dark-bg-color: #FF99FF; 
	--medium-bg-color: #FFBBFF;
	--lite-bg-color: #FFCCFF;
	--even-liter-bg-color: #FFDDFF;
}

*,
*:before,
*:after {
    box-sizing: border-box !important;
	margin: 0px;
	padding: 0px;
}

body, html
{
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-image: url('../about-image.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
}

.Div_WholePageContainer
{
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-color: var(--dark-bg-color);
}

.Div_SiteMenu
{
	font-size: 16px;
	line-height: 40px;
	display: inline-flex;
	justify-content: right;
	width: calc(100% - 300px - 4px);
	height: 40px;
	padding: 0px;
	margin: 0px;
	padding-right: 8px;
}

.Span_Text
{
	margin: 0px;
	padding: 0px;
}

.Div_LogoAndSearchContainer
{
	display: inline-block;
	height: 40px;
	width: 300px;
	padding: 0px;
	margin: 0px;
	font-size: 28px;
}

.Div_LogoAndSearchContainer input[type="text"]
{
	height: 30px;
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
	background-color: var(--medium-bg-color);
	border: 0px;
}

.Span_UserOptions
{
	font-size: 14px;
}

.Div_PageContent
{
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: calc(100% - 41px);
	background-color: var(--lite-bg-color);
	display: flex;
}

.Div_ChatContainer 
{
	display: flex;
	width: 100%;
	height: 100%;
}

.chat_options_pane
{
	padding: 0px;
	margin: 0px;
	width: 300px;
	height: 100%;
	display: inline-block;
}

.Div_ChatCommunityTitleBar
{
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 40px;
	font-size: 24px;
	background-color: var(--dark-bg-color);
	display: flex;
	justify-content: left;
	padding-top: 8px;
	padding-bottom: auto;
}

.Div_ChatCommunityTitleBar h1
{
	margin: 0px;
	padding: 0px;
	font-size: 24px;
}

.chat_options
{
	width: 100%;
	height: 256px;
	font-size: 24px;
	background-color: var(--dark-bg-color);
	margin: 0px;
	padding: 0px;
	overflow-y: scroll;
}

.chat_suboptions
{
	width: 100%;
	height: calc(100% - 250px - 40px);
	font-size: 24px;
	margin: 0px;
	padding: 0px;
	background-color: var(--lite-bg-color);
	overflow-y: scroll;
}

.chat_log_plus_input_box
{
	
	display: inline-block;
	width: calc(100% - 600px);
	height: 100%;
	margin: 0px;
	padding: 0px;
}

.Div_ChatLog
{
	width: 100%;
	height: calc(100% - 112px);
	margin: 0px;
	padding: 0px;
	overflow-y: scroll;
	background-color: var(--even-liter-bg-color);
}

.Textarea_ChatTextInput
{
	width: 100%;
	height: 112px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-color: var(--medium-bg-color);
}

.Div_ChatMembersAndAdContainer
{
	width: 300px;
	height: 100%;
	display: inline-block;
	margin: 0px;
	padding: 0px;
}

.Div_ChatMembersLabelBar
{
	width: 100%;
	height: 40px;
	margin: 0px;
	padding: 0px;
	background-color: var(--dark-bg-color);
}

.Div_ChatMembers
{
	width: 100%;
	height: calc(100% - 40px);
	overflow-y: scroll;
	margin: 0px;
	padding: 0px;
	background-color: var(--lite-bg-color);
}

.Div_MemberPFPAndDetailsContainer
{
	height: 100%;
	width: 400px;
	display: inline-block;
	background-color: #FFBBFF;
	margin-left: auto;
}

.Div_MemberPostsContainer
{
	height: 100%;
	width: 600px;
	display: inline-block;
	background-color: #FFCCFF;
	margin-right: auto;
}

#DIV_CHAT_LOG {
    scroll-behavior: smooth;
    overflow-y: auto;
}

/* Optional: Subtle fade-in for new members */
.member-online {
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}