html,body{
    height: 100%;
    overflow: hidden;
    background-color: #1e272e;
}
#wrap{
    position: relative;
    width: 100%;
    height: 100%;
    /* background-color: cornflowerblue; */
    transform: rotateZ(45deg);
}
.star{
    position: absolute;
    height: 2px;
    /* background-color: yellow; */
    background: linear-gradient(-45deg,#c7ecee,rgba(0,0,255,0));
    border-radius: 50%;
    filter: drop-shadow(0 0 6px #c7ecee);
    animation: scaling 3s ease-in-out infinite,move 3s ease-in-out infinite;
}
.star:nth-child(1){
    top: 30%;
    left: 25%;
    animation-delay: 6s;
}
.star:nth-child(2){
    top:40%;
    left: 30%;
    animation-delay: 5s;
}
.star:nth-child(3){
    top: 50%;
    left: 35%;
    animation-delay: 2.8s;
}
.star:nth-child(4){
    top: 60%;
    left: 40%;
    animation-delay: 2.5s;
}
.star:nth-child(5){
    top: 35%;
    left: 35%;
    animation-delay: 3s;
}
.star:nth-child(6){
    top: 45%;
    left: 25%;
    animation-delay: 2s;
}
.star:nth-child(7){
    top: 55%;
    left: 25%;
    animation-delay: 1s;
}
.star:nth-child(8){
    top: 65%;
    left: 25%;
    animation-delay: 1.5s;
}
.star:nth-child(9){
    top: 65%;
    left: 35%;
    animation-delay: 1.8s;
}
.star:nth-child(10){
    top: 60%;
    left: 28%;
    animation-delay: 3.5s;
}
.star:nth-child(11){
    top: 60%;
    left:20%;
    animation-delay: 4s;
}
.star:nth-child(12){
    top: 50%;
    left: 20%;
    animation-delay: 5.5s;
}
.star:nth-child(13){
    top: 55%;
    left: 45%;
    animation-delay: 1.2s;
}
.star:nth-child(14){
    top: 45%;
    left: 45%;
    animation-delay: 3.8s;
}
.star:nth-child(15){
    top: 38%;
    left: 25%;
    animation-delay: 3.4s;
}
.star:nth-child(16){
    top: 40%;
    left: 40%;
    animation-delay: .5s;
}
.star:nth-child(17){
    top: 50%;
    left: 50%;
    animation-delay: 5.3s;
}
.star:nth-child(18){
    top: 70%;
    left: 28%;
    animation-delay: 4s;
}
.star:nth-child(19){
    top: 60%;
    left: 40%;
    animation-delay: 3s;
}
.star:nth-child(20){
    top: 40%;
    left: 48%;
    animation-delay: 2s;
}
@keyframes scaling{
    0%{
        width: 0;
    }
    50%{
        width: 100px;
    }
    100%{
        width: 0;
    }
}
@keyframes move{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(300px);
    }
}