/* Allgemeine Hintergrund- und Textformatierung */
body {
    background: linear-gradient(to bottom, #535353, #333); /* Leichter Verlauf von dunkel zu etwas heller */
    color: white;
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 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 */
}

.online-players {
    display: inline-block; /* Zeigt die Boxen nebeneinander */
    background: linear-gradient(to bottom, #00c479, #5eff00); /* Grün ins Grün */
    color: white; /* Weißer Text */
    padding: 5px 10px; /* Innenabstand für mehr Platz */
    border-radius: 25px; /* Runde Ecken */
    font-size: 1rem; /* Textgröße */
    margin-left: 160px; /* Abstand zum nächsten Element */
    font-weight: bold; /* Fetter Text */
    text-transform: uppercase; /* Großbuchstaben */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Sanfte Übergänge */
    cursor: default; /* Verhindert, dass der Cursor als Text oder Hand erscheint */
}

/* Hover-Effekte */
.online-players:hover {
    background: linear-gradient(to bottom, #00c479, #5eff00); /* Grün ins Grün */
    color: white; /* Weißer Text */
    transform: scale(1.1); /* Vergrößert die Box bei Hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Schatten um die Box für einen cooleren Effekt */
    cursor: default; /* Standard-Cursor beibehalten */
}

/* 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;
}

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

/* Container für den Inhalt */
.container {
    width: 80%;
    max-width: 1200px;
    margin: 120px auto 60px auto; /* Abstand nach oben (Header) und unten (Footer) */
    padding: 20px;
    display: flex;
    justify-content: space-between;
    gap: 40px; /* Abstand zwischen den beiden Bereichen */
}

/* Server-Info Box */
.server-info {
    background-color: #2a2a2a; /* Gelb */
    border: #ff9900;
    border-style: solid;
    border-width: 4px;
    color: black;
    border-radius: 20px;
    padding: 40px;
    width: 25%; /* Server Info nimmt nun 25% der Containerbreite ein */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin-top: 40px; /* Abstand nach oben */
    position: absolute; /* Server Info Box rechts positionieren */
    right: 75px; /* Ganz rechts am Container */
    z-index: 1;
}

/* Server-Beschreibungen und Bilder im Hauptbereich */
.server-page-main {
    width: 65%; /* Hauptbereich nimmt 65% der Containerbreite ein */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; /* Links ausrichten */
    margin-top: 40px; /* Abstand nach oben */
    margin-left: -150px; /* Etwas Abstand zum Server Info Bereich */
    z-index: 2;
}

/* Positionierung des Logos */
.server-logo {
    width: 100%; /* Volle Breite */
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.server-logo img {
    width: 50%; /* Logo auf 50% der Breite des Containers */
    max-width: 300px; /* Maximale Breite des Logos */
    border-radius: 10px;
}

/* Serverbild */
.server-image img {
    width: 100%;
    border-radius: 10px;
    margin-top: 20px;
    max-height: 400px; /* Bildhöhe limitiert */
    object-fit: cover;
    margin-bottom: 20px;
}

/* Styling für Serverinformationen */
.server-info h4 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 15px;
    text-align: center;
}

/* Boxen für die Server-Informationen */

.green-box {
    background-color: #2ecc71; /* Grün */
    color: white; /* Weißer Text */
    padding: 10px; /* Innenabstand für mehr Platz */
    border-radius: 10px; /* Runde Ecken */
    font-size: 1rem; /* Textgröße */
    margin-bottom: 10px; /* Abstand nach unten */
    text-align: center; /* Zentriert den Text */
}

.orange-box {
    background-color: #f39c12; /* Orange */
    color: white; /* Weißer Text */
    padding: 10px; /* Innenabstand für mehr Platz */
    border-radius: 10px; /* Runde Ecken */
    font-size: 1rem; /* Textgröße */
    margin-bottom: 10px; /* Abstand nach unten */
    text-align: center; /* Zentriert den Text */
}

.yellow-box {
    background-color: #f1c40f; /* Gelb */
    color: white; /* Weißer Text */
    padding: 10px; /* Innenabstand für mehr Platz */
    border-radius: 10px; /* Runde Ecken */
    font-size: 1rem; /* Textgröße */
    margin-bottom: 10px; /* Abstand nach unten */
    text-align: center; /* Zentriert den Text */
}

.grey-box {
    background-color: #95a5a6; /* Grau */
    color: white; /* Weißer Text */
    padding: 10px; /* Innenabstand für mehr Platz */
    border-radius: 10px; /* Runde Ecken */
    font-size: 1rem; /* Textgröße */
    margin-bottom: 10px; /* Abstand nach unten */
    text-align: center; /* Zentriert den Text */
}

.purple-box {
    background-color: #8e44ad; /* Lila */
    color: white; /* Weißer Text */
    padding: 10px; /* Innenabstand für mehr Platz */
    border-radius: 10px; /* Runde Ecken */
    font-size: 1rem; /* Textgröße */
    margin-bottom: 10px; /* Abstand nach unten */
    text-align: center; /* Zentriert den Text */
}

.blue-box {
    background-color: #3498db; /* Blau */
    color: white; /* Weißer Text */
    padding: 10px; /* Innenabstand für mehr Platz */
    border-radius: 10px; /* Runde Ecken */
    font-size: 1rem; /* Textgröße */
    margin-bottom: 10px; /* Abstand nach unten */
    text-align: center; /* Zentriert den Text */
}

.aqua-box {
    background-color: #1abc9c; /* Türkis */
    color: white; /* Weißer Text */
    padding: 10px; /* Innenabstand für mehr Platz */
    border-radius: 10px; /* Runde Ecken */
    font-size: 1rem; /* Textgröße */
    margin-bottom: 10px; /* Abstand nach unten */
    text-align: center; /* Zentriert den Text */
}

/* Boxen halb befüllt mit sanften farbverlauf mit übergang */
.half-green-box {
    background: linear-gradient(to right, #666666 50%, #7e7e7e 50%); /* Grün ins Blau */
    color: white; /* Weißer Text */
    padding: 10px; /* Innenabstand für mehr Platz */
    border-radius: 10px; /* Runde Ecken */
    font-size: 1rem; /* Textgröße */
    margin-bottom: 10px; /* Abstand nach unten */
    text-align: center; /* Zentriert den Text */
}

/* Server-Informationen als Listen */
.server-info p {
    font-size: 1rem;
    line-height: 1.8;
    color: #ffffff;
    margin-bottom: 10px;
    text-align: left;
}

/* Website-Link Styling */
.server-info a {
    color: #999999; /* Orange */
    text-decoration: none;
}

.server-info a:hover {
    color: #999999; /* Dunkleres Orange */
}



.server-info .tag {
    display: inline-block; /* Zeigt die Boxen nebeneinander */
    background-color: #f39c12; /* Gelber Hintergrund */
    color: black; /* Schwarzer Text */
    padding: 3px 7px; /* Innenabstand für mehr Platz */
    margin: 3px; /* Abstand zwischen den Boxen */
    border-radius: 25px; /* Runde Ecken */
    font-size: 1rem; /* Textgröße */
    font-weight: bold; /* Fetter Text */
    text-transform: uppercase; /* Großbuchstaben */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Sanfte Übergänge */
    cursor: default; /* Verhindert, dass der Cursor als Text oder Hand erscheint */
}

/* Hover-Effekte */
.server-info .tag:hover {
    background-color: #e67e22; /* Dunkleres Orange, wenn die Box gehobelt wird */
    color: white; /* Weißer Text beim Hover */
    transform: scale(1.1); /* Vergrößert die Box bei Hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Schatten um die Box für einen cooleren Effekt */
    cursor: default; /* Standard-Cursor beibehalten */
}


/* Responsives Design für kleinere Bildschirme */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        margin: 80px auto 60px auto;
    }

    .server-info {
        width: 100%;
        margin-bottom: 20px;
    }

    .server-page-main {
        width: 100%;
    }

    header h1 {
        font-size: 2rem;
    }
}