/* ============================
   BASIS
============================ */

.login-particle,
.star{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    z-index:2;

}


/* ============================
   PARTICLES
============================ */

.login-particle{

    filter:blur(3px);

}


/* Größen */

.p1,.p5,.p9,.p13,.p17{
    width:4px;
    height:4px;
}

.p2,.p6,.p10,.p14,.p18{
    width:6px;
    height:6px;
}

.p3,.p7,.p11,.p15,.p19{
    width:8px;
    height:8px;
}

.p4,.p8,.p12,.p16,.p20{
    width:10px;
    height:10px;
}


/* Farben */

.p1,.p6,.p11,.p16{
    background:rgba(0,217,255,.45);
}

.p2,.p7,.p12,.p17{
    background:rgba(0,217,255,.25);
}

.p3,.p8,.p13,.p18{
    background:rgba(255,255,255,.15);
}

.p4,.p9,.p14,.p19{
    background:rgba(0,217,255,.12);
}

.p5,.p10,.p15,.p20{
    background:rgba(255,255,255,.08);
}


/* Positionen */

.p1{top:8%;left:8%;}
.p2{top:15%;left:22%;}
.p3{top:25%;left:40%;}
.p4{top:12%;left:65%;}
.p5{top:20%;left:85%;}

.p6{top:35%;left:12%;}
.p7{top:45%;left:28%;}
.p8{top:40%;left:50%;}
.p9{top:35%;left:75%;}
.p10{top:50%;left:92%;}

.p11{top:65%;left:8%;}
.p12{top:72%;left:22%;}
.p13{top:78%;left:45%;}
.p14{top:70%;left:68%;}
.p15{top:80%;left:88%;}

.p16{top:55%;left:38%;}
.p17{top:60%;left:58%;}
.p18{top:30%;left:90%;}
.p19{top:88%;left:30%;}
.p20{top:90%;left:75%;}


/* Animationen */

.p1,.p4,.p7,.p10,.p13,.p16,.p19{

    animation:

    particleFloat 8s ease-in-out infinite;

}


.p2,.p5,.p8,.p11,.p14,.p17,.p20{

    animation:

    particleFloat2 12s ease-in-out infinite;

}


.p3,.p6,.p9,.p12,.p15,.p18{

    animation:

    particleFloat3 15s ease-in-out infinite;

}


/* ============================
   ORBS
============================ */

.orb{

    position:absolute;

    border-radius:50%;

    filter:blur(180px);

    pointer-events:none;

    z-index:0;

}


.orb1{

    width:350px;
    height:350px;

    top:15%;
    left:70%;

    background:

    rgba(0,217,255,.08);

}


.orb2{

    width:300px;
    height:300px;

    bottom:10%;
    left:80%;

    background:

    rgba(0,217,255,.05);

}


.orb3{

    width:200px;
    height:200px;

    top:60%;
    left:55%;

    background:

    rgba(255,255,255,.03);

}


.orb1{

    animation:

    orbFloat1 16s ease-in-out infinite;

}

.orb2{

    animation:

    orbFloat2 20s ease-in-out infinite;

}

.orb3{

    animation:

    orbFloat3 14s ease-in-out infinite;

}


/* ============================
   STERNE
============================ */

.star{

    width:2px;
    height:2px;

    background:white;

    box-shadow:

    0 0 10px rgba(255,255,255,.8);

}


.star1{

    top:12%;
    left:72%;

}

.star2{

    top:30%;
    left:95%;

}

.star3{

    top:80%;
    left:82%;

}

.star4{

    top:50%;
    left:65%;

}

.star5{

    top:18%;
    left:88%;

}


.star{

    animation:

    starBlink 3s ease-in-out infinite;

}


/* ============================
   KEYFRAMES
============================ */

@keyframes particleFloat{

    0%{

        transform:translateY(0);

        opacity:.2;

    }

    50%{

        transform:translateY(-35px);

        opacity:1;

    }

    100%{

        transform:translateY(0);

        opacity:.2;

    }

}


@keyframes particleFloat2{

    0%{

        transform:translate(0,0);

        opacity:.2;

    }

    50%{

        transform:translate(-20px,-25px);

        opacity:1;

    }

    100%{

        transform:translate(0,0);

        opacity:.2;

    }

}


@keyframes particleFloat3{

    0%{

        transform:translate(0,0);

        opacity:.2;

    }

    50%{

        transform:translate(25px,-40px);

        opacity:1;

    }

    100%{

        transform:translate(0,0);

        opacity:.2;

    }

}


@keyframes starBlink{

    0%,100%{

        opacity:.2;

    }

    50%{

        opacity:1;

    }

}


@keyframes orbFloat1{

    50%{

        transform:

        translateY(-30px);

    }

}


@keyframes orbFloat2{

    50%{

        transform:

        translateX(-40px);

    }

}


@keyframes orbFloat3{

    50%{

        transform:

        translateY(20px);

    }

}