body {
    margin: 0;
    padding: 0;
    font-family: 'Josefin Sans', sans-serif;
}

section {
    position: absolute;
    width: 100%;
    height: 100vh;
    background: #000;
    overflow: hidden;
    animation: bgColor 20s linear infinite;
}

.bgPulse {
    width: 100%;
    height: 100%;
}

    .bgPulse span {
        position: absolute;
        width: 80px;
        height: 80px;
        background: #fff;
    }

        .bgPulse span:nth-child(3n+1) {
            background: transparent;
            border: 5px solid #fff;
        }

        .bgPulse span:nth-child(1) {
            top: 50%;
            left: 20%;
            animation: animate 10s linear infinite;
        }

        .bgPulse span:nth-child(2) {
            top: 80%;
            left: 40%;
            animation: animate 12s linear infinite;
        }

        .bgPulse span:nth-child(3) {
            top: 10%;
            left: 65%;
            animation: animate 15s linear infinite;
        }

        .bgPulse span:nth-child(4) {
            top: 50%;
            left: 70%;
            animation: animate 6s linear infinite;
        }

        .bgPulse span:nth-child(5) {
            top: 10%;
            left: 30%;
            animation: animate 9s linear infinite;
        }

        .bgPulse span:nth-child(6) {
            top: 90%;
            left: 95%;
            animation: animate 8s linear infinite;
        }

        .bgPulse span:nth-child(7) {
            top: 80%;
            left: 5%;
            animation: animate 5s linear infinite;
        }

        .bgPulse span:nth-child(8) {
            top: 35%;
            left: 50%;
            animation: animate 14s linear infinite;
        }

        .bgPulse span:nth-child(9) {
            top: 5%;
            left: 5%;
            animation: animate 11s linear infinite;
        }

        .bgPulse span:nth-child(10) {
            top: 25%;
            left: 90%;
            animation: animate 10s linear infinite;
        }

        .bgPulse span:nth-child(10) {
            top: 25%;
            left: 90%;
        }

@keyframes animate {
    0% {
        transform: scale(0) translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes bgColor {
    0% {
        background: #f44336;
    }

    10% {
        background: #E91E63;
    }

    20% {
        background: #9C27B0;
    }

    30% {
        background: #3F51B5;
    }

    400% {
        background: #03A9F4;
    }
    50% {
        background: #009688;
    }

    60% {
        background: #4CAF50;
    }

    70% {
        background: #CDDC39;
    }

    80% {
        background: #FFC107;
    }

    90% {
        background: #FF9800;
    }

    100% {
        background: #f44336;
    }
}






.blurred-box {
    position: fixed;
    width: 40%;
    height: 45%;
    top: 30%;
    left: 30%;
    background: inherit;
    border-radius: 2px;
    overflow: hidden;
    opacity: 0.5;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}






#circle {
    position: absolute;
    top:50%;
    right:10%;  
    transform: translate(-50%,-50%);
    width: 150px;
    height: 150px;
}

.loader {
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    border: 8px solid #162534;
    border-top: 8px solid #09f;
    border-radius: 50%;
    animation: rotate 7s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}