@import url("font.css");
@import url("layout.css");
@import url("reset.css");
@import url("variables.css");

.MeshGradient {
    min-height: 100vh;
    position: relative;
    background-color:hsla(0,100%,50%,1);

    background-color:hsla(238,72%,10%,1);
    background-image:
    radial-gradient(at 62% 19%, hsla(231,90%,2%,0.92) 0px, transparent 50%),
    radial-gradient(at 93% 52%, hsla(227,90%,3%,0.91) 0px, transparent 50%),
    radial-gradient(at 88% 27%, hsla(217,90%,53%,1) 0px, transparent 50%),
    radial-gradient(at 80% 11%, hsla(221,90%,8%,1) 0px, transparent 50%),
    radial-gradient(at 47% 44%, hsla(239,90%,2%,1) 0px, transparent 50%),
    radial-gradient(at 0% 67%, hsla(217,90%,53%,0.29) 0px, transparent 50%),
    radial-gradient(at 18% 38%, hsla(221,90%,7%,1) 0px, transparent 50%);
}

.blueprint::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('../images/CytoFortis-Blueprint.png') right center / auto 95% no-repeat;
    pointer-events: none;
}

.MeshGradient::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4.8' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Alle direkten Kinder des Body über dem Bild halten */
body > * {
    position: relative;
    z-index: 1;
}

/* Animations*/