body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #333333; /* Dark grey background color */
    color: white; /* White text for better contrast */
}

.default-message {
    text-align: center;
    font-size: 18px;
    color: #aaa; /* Light gray color for the message */
    margin: 50px 0; /* Spacing above and below the message */
}
.buttons {
    padding: 20px;
    text-align: center;
}

.server-btn {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #444;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.server-btn:hover {
    background-color: #555;
}

.gallery {
    display: grid; /* Verwende ein Grid-Layout anstelle von Flexbox */
    grid-template-columns: repeat(4, 1fr); /* 4 Spalten mit gleicher Breite */
    gap: 20px; /* Abstand zwischen den Bildern */
    padding: 20px;
    justify-content: center; /* Zentriere die Galerie insgesamt */
}

.default-message {
    position: absolute; /* Position the message over the gallery */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    font-size: 18px;
    color: #aaa; /* Light gray color for the message */
    text-align: center;
    pointer-events: none; /* Allow clicks to pass through to buttons */
}

.gallery-item-container {
    text-align: center; /* Center content inside each gallery item */
    margin: 0; /* Kein zusätzlicher Rand, da das Grid den Abstand regelt */
    width: 100%; /* Automatische Breite innerhalb des Grid-Layouts */
    box-sizing: border-box; /* Padding und Border zur Breite hinzufügen */
}

.gallery-item-container img {
    width: 100%; /* Thumbnails will adapt to the container's width */
    height: 270px; /* Fixed height not all images have a 1920x1080 resolution */
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer; /* Indicate that the image is clickable */
}

.filename {
    margin-top: 10px;
    font-size: 14px;
    color: #ccc; /* Light grey color for the filename */
    text-align: center; /* Center-align the filename under the image */
}

@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr); /* 2 Bilder pro Reihe auf kleineren Geräten */
    }
}

@media (max-width: 480px) {
    .gallery {
        grid-template-columns: 1fr; /* 1 Bild pro Reihe auf sehr kleinen Geräten */
    }
}