:root {
    --primary-bg-color: #000000;
    --secondary-bg-color: #1A1A1A;
    --tertiary-bg-color: #333;
    --primary-text-color: #ffffff;
    --border-color: #ff2211;
    --box-shadow-color: #ff2211; /* You may adjust the box shadow color as needed */
    --font-family: 'Orbitron', sans-serif;
    --reply-border-color: #22ff11;
}

body {
    font-family: var(--font-family);
    color: var(--primary-text-color);
    background-color: var(--primary-bg-color);
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
}


/*.nav-list {
    list-style: none;
    padding: 0;
}

.nav-item {
    padding: 10px;
    border-left: 3px solid transparent;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-item.active, .nav-item:hover {
    border-left-color: var(--border-color);
}
*/

.content {
    width: 100%;
    background: linear-gradient(to bottom, #330000, var(--primary-bg-color)); 
    padding: 20px;
    color: var(--primary-text-color);
}

.messages-container {
        max-width: 800px; /* Max width for larger screens */
        width: 100%; /* Full width on smaller screens */
        height: 90%;
        margin: 0px auto;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative; /* For positioning the settings button */
        background-color: var(--secondary-bg-color);
        border: 1px solid var(--border-color);
        /*box-shadow: 0 0 10px var(--box-shadow-color);*/
        /* ... (other properties) ... */
    }

    .message-thread {
        width: 90%; /* Will take up 100% of .messages-container width */
        background-color: #333; /* Dark background for message thread */
        margin-bottom: 20px;
        border: 1px solid #ff2211; /* Neon red border */
        height: 100%;
        max-height: 1000px;
        overflow-y: auto;
        padding: 10px;
        padding-bottom: 20px;
        padding-top: 40px;
        /*box-shadow: 0 0 10px #ff2211; */
    }


.reply-username-box{
    min-width: 50px; /* Fixed width for the username box */
    padding:3px;
    color: #fff;
    text-align: center;
    border: 1px solid #22ff11; /* Neon green for reply messages */
    background-color: #22ff11;
    border-bottom: none;
    border-radius: 8px 0px 0px 0px;
    /* Other styling for username */
}

.username-box {
    min-width: 50px; /* Fixed width for the username box */
    padding:3px;
    color: #fff;
    text-align: center;
    border: 1px solid #ff2211;
    background-color:  #ff2211;;
    border-bottom: none;
    border-radius: 0px 8px 0px 0px;


}

.message {
    display: flex;
    align-items: center; /* Align items vertically */
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    position: relative; /* To position timestamp absolutely within message */
}

.message-container {
    border-radius: 0px 0px 8px 8px;
    display: flex;
    width: 90%;
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Align items to the left */
    margin-bottom: 15px;
}
.message-container .message {
    border: 1px solid #ff2211;
    border-radius: 0px 8px 8px 0px;
}


.reply-message-container {
    border-radius: 8px 0px 0px 8px;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-end; /* Align items to the left */
    margin-bottom: 15px;
}


.reply-message-container .message {
    border-color: #22ff11; /* Neon green for reply messages */

}

.timestamp {
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 0.8em;
    color: #888;
}

.message p {
    flex-grow: 1; /* Message content takes up remaining space */
}

.message, .message.reply {
    width: 70%; /* Message boxes take up 70% of the container */
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ff2211; /* Neon red border */
    background-color: #000; /* Black background for messages */
}

.message.reply {
    border-color: #22ff11; /* Neon green for reply messages */
    margin-left: auto; /* Aligns reply message box to the right */
}
.message-thread,
#chat-input,
.messages-header,
.reply-box,
.username-box,
.message,
.message-container,
.reply-message-container,
.message.reply{}

.btn-nav,
#send-btn {
    transition: background-color 0.3s;
    flex-grow: 1;
    color: var(--primary-text-color);
    border-radius: 0px 5px 0px 0px;
    border: 0px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.3s;
}

#chat-input {
    width: 100%;
    border: 1px solid var(--border-color);
text-decoration: dotted;
}

.reply-box {
    width: 100%;
    display:flex;


}
#chat-input,
.message-thread {
    border: 1px solid var(--border-color);

}

.reply-username-box {
    border: 1px solid var(--reply-border-color);
    background-color: var(--reply-border-color);
}

.reply-message-container .message, 
.message.reply {
    border-color: var(--reply-border-color);
    border-radius: 0px 10px 0px 0px;
}

.btn-nav,
#send-btn {
    background-color: var(--border-color);
    border-radius: 0px 0px 5px 0px;
}

#menu {
    flex:1;
   /* border: 1px solid var(--border-color); */
}

/* Add any additional style changes using the variables as needed */
#menu-container {
    max-width: 800px; /* Max width for larger screens */
    width: 100%; /* Full width on smaller screens */
    border-radius: 0px 0px 5px 0px;
    display: flex;
    flex-direction: row;

   /* position: relative; */
    /*background-color: var(--secondary-bg-color);*/
   /* border: 1px solid var(--border-color);*/
    /*box-shadow: 0 0 10px var(--box-shadow-color);*/
}
.messages-header {
    margin-bottom: -10px;   
}