@font-face { font-family: XPTahoma; src: url('font/windows-xp-tahoma.otf'); } 
body {
  display: grid; 
  place-items: center; 
  min-height: 100vh;
  margin: 0;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  background-image: url('src/img/background.jpg'); 
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: center center; 
  background-attachment: fixed; 
}
.chat {
  height: 400px; 
  overflow-y: auto;
}

#messages {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chat-box {
  overflow-y: auto;
  color: blue;
  border: 3px solid #ccc;
  border-radius: 5px;
  margin: 20px auto;
  max-width: 600px;
  padding: 10px;
}

.header {
  background-color: blue;
  border-bottom: 1px solid #ccc;
  border-radius: 1px 1px 0 0;
  font-size: 18px;
  padding: 3px;
  text-align: center;
}
body {
   background-color: black;
  font-family: XPTahoma;
  font-size: 23px;

}
a {
  text-decoration: none;
}
h1 {
  color: white;
  font-weight: normal;
  font-size: 21px;
}
p1 {
  color: white;
  font-size: 18px;
}

.music-controls {
    text-align: center;
    margin-top: 10px;
    color: white;
}
.music-controls select, .music-controls button {
    padding: 5px;
    margin: 5px;
}
  .custom-emoji-img {
  height: 1em; 
  vertical-align: middle; 
  width: auto; 
  display: inline-block; 
  }
  .mention {
    color: #ff7f32; 
}
 .chat-window {
        max-width: 900px;
        margin: 20px auto;
    }
    .chat-box {
        height: 300px;
        overflow-y: auto;
        padding: 5px;
	font-size: 26px;
    }
.chat-window .chat-box {
    width: 640px;
    height: 300px;
    overflow-y: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px;
}

.trans-word {
  background: linear-gradient(180deg, #5BCEFA, #F5A9B8, #FFFFFF, #F5A9B8, #5BCEFA);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 100% 200%;
  animation: trans-move 2s linear infinite;
}


.field-row {
  place-items: center;
}

@keyframes trans-move {
  0% { background-position: 0% 0%; }
  50% { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}
  .typing-notification {
    font-size: 20px
  }
.logo {
  opacity: 0.6;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}
.logo:hover {
  opacity: 1.0;
  transition: opacity .55s ease-in-out;
  -moz-transition: opacity .55s ease-in-out;
  -webkit-transition: opacity .55s ease-in-out;
}

#popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    z-index: 999; 
    
}


#welcome-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 1000; 
    font-size: 30px;
    
}

.draggable-window {
  position: absolute;

  cursor: crosshair;
}

.draggable-window .title-bar {
  cursor: grab;

}

#settings-btn {
  position: fixed;
  left: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.9);
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 99999;
  transition: opacity 0.18s ease-in-out, transform 0.12s;
}
#settings-btn:hover { opacity: 1; transform: translateY(-1px); }

#settings-panel { width: 260px; }
#settings-panel .window-body { font-size: 14px; }
#settings-panel .field-row { margin-bottom: 8px; }

.no-toggle { pointer-events: none; margin-left: 6px; }

#messages { width:100%; }
#messages li { margin: 4px 0; }