/* Körper-Styling */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(to bottom, #535353, #333); /* Leichter Verlauf von dunkel zu etwas heller */
    color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center; /* Vertikal zentrieren */
    align-items: center; /* Horizontal zentrieren */
}

/* Header-Styling */
header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between; /* Verteilte Anordnung der Elemente im Header */
    align-items: center; /* Vertikale Ausrichtung */
    padding: 10px 20px; /* Etwas Innenabstand */
}

/* Header-Inhalt */
.header-content {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

/* Container für die Icons */
.icon-container {
    display: flex; /* Setzt die Icons nebeneinander */
    align-items: center; /* Zentriert sie vertikal */
    justify-content: flex-start; /* Setzt die Icons am linken Rand */
    right: 60px; /* Abstand zum rechten Rand */
    position: absolute; /* Positionierung relativ zum Elternelement */
    top: 50%; /* Zentriert vertikal */
    transform: translateY(-50%); /* Korrektur für die Zentrierung */
}

/* Home-Icon-Styling */
.home-icon {
    text-decoration: none;
    margin-right: 10px; /* Abstand zum nächsten Icon */
}

.home-icon img {
    width: 40px; /* Größe des Icons */
    height: 40px;
}

/* Website-Icon-Styling */
.website-icon {
    text-decoration: none;
}

.website-icon img {
    width: 40px; /* Größe des Icons */
    height: 40px;
}


/* Server-Liste - 5 Server-Karten nebeneinander */
.server-list {
    display: flex;
    flex-wrap: wrap; /* Ermöglicht Umbruch bei Überschreiten der Breite */
    justify-content: center; /* Zentriert die Serverkarten */
    gap: 20px; /* Abstand zwischen den Karten */
    padding: 20px;
    max-width: 100%; /* Verhindert, dass der Container zu breit wird */
}

/* Server-Karten */
.server-card {
    position: relative;
    width: 18%; /* Breite der Karten - 5 Karten nebeneinander */
    min-width: 160px; /* Mindestbreite für die Karten */
}

/* Stil für das Bild */
.server-card img {
    width: 100%;
    border-radius: 8px;
    transition: transform 0.3s, background-color 0.3s ease;
}

/* Hover-Effekt für das Bild */
.server-card:hover img {
    transform: scale(1.25);
}

/* Styling für die Gesamtanzahl der Spieler */
.player-count {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5); /* Leicht transparente Hintergrundfarbe */
    padding: 15px;
    margin-top: 30px; /* Abstand zum Header */
    margin-bottom: 20px; /* Abstand zum Server-Listenbereich */
    border-radius: 10px;
    font-size: 1.2em;
    color: white;
}

/* Footer-Styling */
footer {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}