body{

background:black;
color:#00ff00;
font-family:Consolas,monospace;
margin:0;
padding:0;

}

/* Center login screen */
#loginScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#loginScreen input,
#loginScreen button {
    margin: 8px 0;
    width: 50%;
    font-size: 1em; 
    padding: 6px;
    border: 1px solid #00ff00;
    background: black;
    color: #00ff00;
}

#loginBtn {
    cursor: pointer;
    transition: background 0s, color 0s;
}

#loginBtn:hover {
    background: #00ff00;
    color: black;
}

#loginBtn:active {
    animation: clickPulse 0.3s ease;
}

@keyframes clickPulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

#backBtn {
    padding: 6px 12px;
    border: 1px solid #00ff00;
    background: black;
    color: #00ff00;
    cursor: pointer;
    transition: background 0s, color 0s;
    font-family: inherit;
    font-size: 0.9em;
}

#backBtn:hover {
    background: #00ff00;
    color: black;
}

#backBtn:active {
    animation: clickPulse 0.3s ease;
}

#loginScreen h3 {
    font-size: 1.8em;
    margin-bottom: 16px;
    border: 1px solid #00ff00;
    padding: 5px;
}

.footer {
    margin-top: auto;
    font-size: 0.8em;
    opacity: 0.7;
    margin-bottom: 20px;
}


#terminal{
width:1000px;
margin:40px auto;
}

#chat{

height:400px;
overflow-y:auto;
border:1px solid #00ff00;
padding:10px;
box-sizing: border-box;

}

#input{

width:100%;
background:black;
color:#00ff00;
border:1px solid #00ff00;
padding:10px;
outline:none;
font-family:inherit;
font-size:16px;
box-sizing: border-box;

}

#imageInput{

width:100%;
background:transparent;
color:transparent;
border:none;
padding:0;
outline:none;
font-family:inherit;
font-size:14px;
box-sizing: border-box;
margin-top:5px;

}

#imageInput::file-selector-button {
    background: black;
    color: #00ff00;
    border: 1px solid #00ff00;
    padding: 10px 40px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
}

#imageInput::file-selector-button:hover {
    background: #00ff00;
    color: black;
}

#imageInput.rainbow-border::file-selector-button {
    animation: rainbow 2s linear infinite;
}

#inputRow{
display:flex;
gap:8px;
margin-top:5px;
}

#sendBtn{
background:black;
color:#00ff00;
border:1px solid #00ff00;
padding:10px 16px;
cursor:pointer;
font-family:inherit;
font-size:16px;
}

#sendBtn:hover{
background:#00ff00;
color:black;
}

#sendBtn:active{
transform:scale(0.95);
}
#input{
flex:1;
}

#typing{
font-style:italic;
opacity:0.7;
border:1px solid #00ff00;
padding:5px;
width:160px;
min-width:160px;
text-align:center;
}

.username {
    color: #00ffff;
    font-weight: bold;
    margin-right: 8px;
}

.messageContent {
    color: #00ff00;
    opacity: 0.9;
}

#header {
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}

#note {
    font-size: 0.9em;
    opacity: 0.7;
    margin-bottom: 10px;
    font-style: italic;
}

#login {
    border: 1px solid #00ff00;
    padding: 5px;
}

#serverStatus {
    border: 1px solid #00ff00;
    padding: 5px;
    font-size: 0.9em;
    flex: 1;
    min-width: 150px;
}

#statusIndicator {
    font-weight: bold;
    animation: pulse 1s infinite;
}

#statusIndicator.online {
    color: #00ff00;
    animation: none;
}

#statusIndicator.offline {
    color: #ff0000;
    animation: none;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.rainbow-border {
    animation: rainbow 2s linear infinite;
}

.rainbow-text {
    animation: rainbow-text 2s linear infinite;
}

@keyframes rainbow {
    0% { border-color: #ff0000; }
    10% { border-color: #ff8000; }
    20% { border-color: #ffff00; }
    30% { border-color: #80ff00; }
    40% { border-color: #00ff00; }
    50% { border-color: #00ff80; }
    60% { border-color: #00ffff; }
    70% { border-color: #0080ff; }
    80% { border-color: #0000ff; }
    90% { border-color: #8000ff; }
    100% { border-color: #ff00ff; }
}

@keyframes rainbow-text {
    0% { color: #ff0000; }
    10% { color: #ff8000; }
    20% { color: #ffff00; }
    30% { color: #80ff00; }
    40% { color: #00ff00; }
    50% { color: #00ff80; }
    60% { color: #00ffff; }
    70% { color: #0080ff; }
    80% { color: #0000ff; }
    90% { color: #8000ff; }
    100% { color: #ff00ff; }
}



#title {
    text-align: center;
    margin-bottom: 10px;
}

#title pre {
    display: inline-block;
    margin: 0;
}

/* Calendar */
#calendarContainer {
    border: 1px solid #00ff00;
    padding: 10px;
    margin-top: 15px;
    background-color: rgba(0, 255, 0, 0.05);
    width: 90%;
    max-width: 500px;
    box-sizing: border-box;
}

#calendarLabel {
    font-size: 0.9em;
    margin-bottom: 5px;
    font-weight: bold;
    border-bottom: 1px solid #00ff00;
    padding-bottom: 5px;
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8em;
}

.calendar-table th, .calendar-table td {
    border: 1px solid #00ff00;
    padding: 5px;
    text-align: center;
    width: 14.28%;
}

.calendar-table th {
    background-color: rgba(0, 255, 0, 0.1);
    font-weight: bold;
}

.calendar-table .today {
    background-color: rgba(0, 255, 0, 0.2);
    font-weight: bold;
}

/*About box*/
#aboutBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#aboutContent {
    background: black;
    border: 1px solid #00ff00;
    padding: 20px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    color: #00ff00;
    font-size: 0.9em;
}

#aboutContent h3 {
    margin-top: 0;
    border-bottom: 1px solid #00ff00;
    padding-bottom: 10px;
}

#aboutContent ul {
    text-align: left;
    list-style-type: none;
    padding: 0;
}

#aboutContent li {
    margin: 5px 0;
}

#closeAboutBtn {
    margin-top: 15px;
    padding: 8px 16px;
    border: 1px solid #00ff00;
    background: black;
    color: #00ff00;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

#closeAboutBtn:hover {
    background: #00ff00;
    color: black;
}

#aboutBtn {
    margin-top: 10px;
    padding: 4px 8px;
    border: 1px solid #00ff00;
    background: black;
    color: #00ff00;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-family: inherit;
    font-size: 0.8em;
    width: 70%;
    max-width: 350px;
    box-sizing: border-box;
}

#aboutBtn:hover {
    background: #00ff00;
    color: black;
}

@media (max-width: 700px){

body{
font-size:18px;
}


#terminal{
width:95%;
margin:10px auto;
}

#chat{
height:55vh;
font-size:16px;
}

#typing{
font-size:15px;
}

#input{
font-size:18px;
padding:14px;
}

#imageInput{
font-size:16px;
padding:10px;
}

#loginScreen input,
#loginScreen button{
width:80%;
font-size:18px;
padding:10px;

}

#header{
gap:15px;
}

#stressGraphContainer{
width:95%;
}

#stressStats span{
font-size:14px;
}

#title pre,
#loginScreen pre{
font-size:9px;
line-height:9px;
overflow-x:auto;

}

}

pre{
overflow-x:auto;
}

.timestamp{
color:#00ff00;
opacity:0.5;
font-size:11px;
margin-right:6px;
}

#imageInput::file-selector-button{
background:black;
color:#00ff00;
border:1px solid #00ff00;
padding:6px 10px;
font-family:Consolas,monospace;
cursor:pointer;
margin-right:10px;
}

#imageInput::file-selector-button:hover{
background:#00ff00;
color:black;
}

#chat::-webkit-scrollbar{
width:10px;
}

#chat::-webkit-scrollbar-track{
background:black;
border-left:1px solid #00ff00;
}

#chat::-webkit-scrollbar-thumb{
background:#00ff00;
}

#chat::-webkit-scrollbar-thumb:hover{
background:#00cc00;
}

#jumpBtn{
width:100%;
margin:5px 0;
background:black;
color:#00ff00;
border:1px solid #00ff00;
padding:8px;
cursor:pointer;
font-family:inherit;
}

#jumpBtn:hover{
background:#00ff00;
color:black;
}

#jumpBtn:active{
transform:scale(0.96);
}

#importLogBtn{
width:100%;
margin:5px 0;
background:black;
color:#00ff00;
border:1px solid #00ff00;
padding:4px;
cursor:pointer;
font-family:inherit;
}

#importLogBtn:hover{
background:#00ff00;
color:black;
}

#importLogBtn:active{
transform:scale(0.96);
}