.background{
    position: fixed;
    overflow: hidden;
    z-index: -999;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(60deg, black, white, black );
}

.star{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -999;
    animation: apparition 8s ease infinite, scale 15s linear infinite;

}

.star.star1{
    animation-delay: -1s;
    background: url("../images/etoiles/star1.png");
    background: cover;
    background-position: center;
}
.star.star2{
    animation-delay: -2s;
    background: url("../images/etoiles/star3.png");
    background: cover;
    background-position: center;
    /* backdrop-filter: hue-rotate(80deg); */
}
.star.star3{
    /* backdrop-filter: hue-rotate(170deg); */
    animation-delay: -3s;
    background: url("../images/etoiles/star4.png");
    background: cover;
    background-position: center;
}
.star.star4{
    animation-delay: -4s;
    background: url("../images/etoiles/star6.png");
    background: cover;
    background-position: center;
    
}
.star.star5{
    animation-delay: -5s;
    background: url("../images/etoiles/star7.png");
    background: cover;
    background-position: center;
    
}
.star.star6{
    animation-delay: -6s;
    background: url("../images/etoiles/star8.png");
    background: cover;
    background-position: center;
}

@keyframes apparition {
    0%, 20%, 40%, 60%, 80%, 100%{
        opacity: 0;
    }
    10%, 30%, 50%, 70%, 90%{
        opacity: 1;
    }
}

@keyframes scale{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(2);
    }
}