body {
  background: linear-gradient(270deg, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000, #ffff00, #00ff00);
  background-size: 2000% 2000%;
  animation: rainbow 12s ease infinite;
  color: #00ff00;
  font-family: Consolas, monospace;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@keyframes rainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


.app {
  width: 400px;
  background: #000;
  padding: 20px;
  border: 2px solid #00ff00;
  border-radius: 10px;
}

#messages {
  height: 300px;
  overflow-y: auto;
  background: #000;
  padding: 10px;
  border: 1px solid #00ff00;
  border-radius: 5px;
  margin-bottom: 15px;
}

.message {
  margin-bottom: 10px;
}

.username {
  font-weight: bold;
  color: #00ff00;
}

.input-area, .username-box {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

input {
  flex: 1;
  padding: 8px;
  background: #000;
  color: #00ff00;
  border: 1px solid #00ff00;
  border-radius: 5px;
}

button {
  padding: 8px 12px;
  background: #003300;
  border: 1px solid #00ff00;
  border-radius: 5px;
  color: #00ff00;
  cursor: pointer;
}