#chat-box {
    width: 100%;
            height: 300px;
            border: none;
            overflow-y: scroll;
            margin-bottom: 10px;
            background-color: rgba(0, 0, 0, 0.505); /* Optionaler Hintergrund für den Chat-Bereich */
            color: rgb(24, 165, 161);
}
.message {
    margin: 5px;
}

.message username {
    color: red;
}

input {
    height: 30px;
}

button {
    height: 30px;
    margin-top: 10px;

    font-size: 14px; /* Standard-Schriftgröße für alle Buttons */
    padding: 6px 12px; /* Standard-Padding für alle Buttons */
    cursor: pointer; /* Zeigt den Mauszeiger als Zeiger, wenn man über den Button fährt */
}


    body {
        background-image: url('img/handy.jpg'); /* Pfad zum Bild */
        background-size: cover; /* Das Bild soll den gesamten Bereich abdecken */
        background-position: center; /* Das Bild wird zentriert */
        background-repeat: no-repeat; /* Das Bild wird nicht wiederholt */
    }


.click img {
    width: 50%;
    
}

.click{
    text-align: center;
}

.abmelden button {
    background-color: red;
    border-radius: 5px;
    border-color: black;
}

h1 {
    color:white;
}

#username{
    color: red;
    font-size :15px;
    font-weight: bold;
}



/* Mobile Styles */
@media (max-width: 800px) {
    body {
        background-color: rgb(3, 69, 61); 
        font-size: 14px; 
        background-image: none;
    }
}

button.delete {
    font-size: 12px; /* Kleinere Schriftgröße für den Löschen-Button */
    padding: 2px 4px; /* Weniger Padding für den Löschen-Button */
    background-color: red; /* Roter Hintergrund für den Löschen-Button */
    color: white; /* Weißer Text für den Löschen-Button */
    border: none; /* Keine Umrandung für den Button */
    border-radius: 4px; /* Abgerundete Ecken für den Button */
    margin-left: 50px;

}

button.delete:hover {
    background-color: darkred; /* Dunklerer Hintergrund bei Hover */
    cursor: pointer; /* Zeigt den Mauszeiger als Zeiger, wenn man über den Button fährt */
}