/* Basic Reset & Setup */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* Hauptstyling für den Body */
body {
    position: relative;
    min-height: 100vh;
    background-color: #0a0a1a;
    font-family: 'Times New Roman', Times, serif;
}

/* Haupthintergrund mit sanften Farbverläufen */
.bg-layer-1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    
    background: linear-gradient(-45deg, 
        #0a0a1a, /* Dark Blue/Black */
        #1a0a2a, /* Dark Purple */
        #2a0a1a, /* Darker Purple/Red */
        #1a1a2a, /* Dark Indigo */
        #0a0a1a  /* Dark Teal/Cyan */
    );
    background-size: 400% 400%;
    
    animation: gradientMove 20s ease infinite;
    will-change: background-position;
}

/* Zweite Hintergrundschicht mit anderem Verlauf und Timing */
.bg-layer-2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    
    background: linear-gradient(45deg, 
        rgba(10, 10, 26, 0.6), /* Halbtransparent */
        rgba(26, 10, 42, 0.6),
        rgba(42, 10, 26, 0.6),
        rgba(10, 26, 26, 0.6)
    );
    background-size: 300% 300%;
    
    animation: gradientMove 15s ease-in-out infinite;
    mix-blend-mode: overlay;
    opacity: 0.7;
    will-change: background-position;
}

/* Dritte Schicht für Welleneffekte */
.bg-layer-3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    background: 
        radial-gradient(
            circle at 20% 30%,
            rgba(26, 10, 42, 0.4) 0%,
            transparent 40%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(10, 26, 26, 0.4) 0%,
            transparent 40%
        );
    
    animation: pulseEffect 15s alternate infinite;
    mix-blend-mode: soft-light;
}

/* Container für zentrierten Text */
.content-container {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* Keyframes für fließende Gradientenbewegung */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Keyframes für pulsierenden Welleneffekt */
@keyframes pulseEffect {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
    100% {
        opacity: 0.6;
        transform: scale(1);
    }
}


#fyllou-text {
/* Text-Styling */
    font-size: 20vw;
    font-weight: 400;
    color: white;
/* Zentrierung */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* Styling für h1, falls verwendet */
h1 {
    color: white;
}