/* Grundlegende Styles für die Seite */
body, html {
    margin: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(6deg, #101010, #C1121C 10%, #000 45%);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 55%;
    }

    50% {
        background-position: 100% 55%;
    }

    100% {
        background-position: 0% 55%;
    }
}


/* Optionale Media Queries für eine genauere Kontrolle auf verschiedenen Geräten */
@media (max-width: 200px) {
    body, html {
        background-size: cover; /* Sicherstellen, dass der Hintergrund immer den gesamten Bildschirm abdeckt */
    }
}

/* Styling der Menüleiste */
nav {
    background-color: #333; /* Dunkler Hintergrund */
    overflow: hidden; /* Klare Abgrenzung */
}
    /* Styling der Links in der Menüleiste */
    nav a {
        float: left; /* Links ausrichten */
        display: block;
        color: #f2f2f2; /* Helle Schriftfarbe */
        text-align: center;
        padding: 14px 16px; /* Abstand */
        text-decoration: none; /* Unterstreichung entfernen */
        transition: background-color 0.4s; /* Weicher Übergang bei Hover */
        font-family: Bahnschrift SemiBold;
    }
        /* Hover-Effekt für Links */
        nav a:hover {
            background-color: #575757; /* Hellere Farbe bei Hover */
        }