@media only screen and (min-width: 1024px) {
    .discord-banner {
        position: fixed;
        top: 50%;
        right: 0px;
        transform: translateY(-50%);
        width: 300px;
        height: 100px;
        background-image: url(../img/icons/join_discord.png);
        background-size: cover; /* Deckt das gesamte Banner ab */
        background-repeat: no-repeat; /* Verhindert Wiederholung des Bildes */
        background-position: center; /* Zentriert das Bild */
        padding: 0; /* Entfernt jegliche Abstände innerhalb des Banners */
        margin: 0; /* Entfernt jegliche äußeren Abstände */
        border: none; /* Entfernt jegliche Standard-Border, falls vorhanden */
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        z-index: 999;
        scale: 0.8;
        cursor: pointer;
    }
    

    .discord-banner a {
        text-decoration: none;
        color: white;
        font-family: 'Poppins', sans-serif;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        width: 100%;
    }

    .discord-banner:hover {
        transform: translateY(-50%) scale(1.1); /* Vergrößert und verschiebt den Banner leicht beim Hover */
        box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.3); /* Vergrößert den Schatten beim Hover */
    }

    .discord-banner:hover a span {
        animation: pulse 1s infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.2);
        }
        100% {
            transform: scale(1);
        }
    }
}

@media only screen and (max-width: 768px) {
    .discord-banner {
       display: none;
    }

}

@media only screen and (max-width: 1199px) and (min-width: 1000px) {
    /* CSS-Regeln für Bildschirme zwischen 1199px und 1600px */
    .discord-banner {
        position: fixed;
        bottom: 10%;
        left: 50%; /* Zentriert horizontal */
        transform: translate(-50%, 0); /* Verschiebt das Element, um es sowohl horizontal als auch vertikal zu zentrieren */
        width: 300px;
        height: 100px;
        background-image: url(../img/icons/join_discord.png);
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        z-index: 999;
        scale: 0.8;
        cursor: pointer;
    }

    .discord-banner a {
        text-decoration: none;
        color: white;
        font-family: 'Poppins', sans-serif;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        width: 100%;
    }

    .discord-banner:hover {
        transform: translateY(-50%) scale(1.1); /* Vergrößert und verschiebt den Banner leicht beim Hover */
        box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.3); /* Vergrößert den Schatten beim Hover */
    }

    .discord-banner:hover a span {
        animation: pulse 1s infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.2);
        }
        100% {
            transform: scale(1);
        }
    }
}