.bg-circle {
    position: absolute;
    left: 0%;
    top: 0%;
    right: auto;
    bottom: auto;
    width: 30vw;
    height: 30vw;
    border-radius: 100%;
    background-color: #455268;
}

.bg-circle.red-gradient {
    width: 70vw;
    height: 70vw;
    margin-top: -16%;
    margin-left: -16%;
    background-color: #fb1818;
    opacity: 1;
    top: 50%;
    animation: bg-circle-red-anim 8s ease 0s infinite;
    filter: blur(16rem);
}

@keyframes bg-circle-red-anim {
    0% {
        left: 0%;
        width: 50vw;
        height: 50vw;
    }

    50% {
        left: 40%;
        width: 60vw;
        height: 60vw;
    }

    100% {
        left: 0%;
        width: 50vw;
        height: 50vw;
    }
}

.bg-circle.yellow-gradient {
    left: auto;
    right: 0px;
    width: 60vw;
    height: 60vw;
    margin-top: -11%;
    margin-right: -10%;
    background-color: #ebe315;
    animation: bg-circle-yellow-anim 8s ease 0s infinite;
    filter: blur(16rem);
}

@keyframes bg-circle-yellow-anim {
    0% {
        right: 0%;
        width: 50vw;
        height: 50vw;
    }

    50% {
        right: 30%;
        width: 70vw;
        height: 70vw;
    }

    100% {
        right: 0%;
        width: 50vw;
        height: 50vw;
    }
}

.bg-circle.blue-gradient {
    width: 70vw;
    height: 70vw;
    margin-top: -30%;
    margin-left: -30%;
    background-color: #18a0fb;
    opacity: 1;
    top: 50%;
    animation: bg-circle-blue-anim 8s ease 0s infinite;
    filter: blur(16rem);
}

@keyframes bg-circle-blue-anim {
    0% {
        right: 0%;
        width: 90vw;
        height: 90vw;
    }

    50% {
        left: 40%;
        width: 90vw;
        height: 90vw;
    }

    100% {
        left: 0%;
        width: 90vw;
        height: 90vw;
    }
}

.gradient-bg {
    position: fixed;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    z-index: -1;
    overflow: hidden;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 0.7;
    -webkit-filter: blur(2rem);
    filter: blur(2rem);
    height: 100vh;
}

.gradient-bg-blue {
    position: absolute;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    z-index: -1;
    overflow: hidden;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 1;
    -webkit-filter: blur(2rem);
    filter: blur(2rem);
    height: 100%;
}