/* Tweaked the design with reference to the link - https://www.youtube.com/watch?v=25npMh1hzi8 */

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
section
{
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000200;
    display: flex;
    justify-content: center;
    align-items: center;
}
section .star
{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    animation: animate 8s ease-in-out infinite,
               backgroundmove 16s linear infinite;
}
section .star.star1
{
    animation-delay: 0s;
    background: url(star1.png);
}
section .star.star2
{
    animation-delay: -1s;
    background: url(star2.png);
}
section .star.star3
{
    animation-delay: -2s;
    background: url(star3.png);
}
section .star.star4
{
    animation-delay: -3s;
    background: url(star4.png);
}
section .star.star5
{
    animation-delay: -4s;
    background: url(star5.png);
}
section .star.star6
{
    animation-delay: -5s;
    background: url(star6.png);
}
section .star.star7
{
    animation-delay: -6s;
    background: url(star7.png);
}
section .star.star8
{
    animation-delay: -7s;
    background: url(star8.png);
}
@keyframes animate
{
    0%,20%,40%,60%,80%,100%
    {
        opacity: 0;
    }

    10%,30%,50%,70%,90%
    {
        opacity: 1;
    }
}
@keyframes backgroundmove
{
    0%
    {
        transform: scale(1);
    }
    100%
    {
        transform: scale(2);
    }
}