* {
    font-family: 'Outfit', sans-serif;
}

.breathing {
    height: 400px;
    width: 400px;
    animation: pulse 4s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite;
}

.circle {
    height: 400px;
    width: 400px;
    border-radius: 50%;
    position: absolute;
    mix-blend-mode: screen;
    transform: translate(0, 0);
    animation: center 6s infinite;
}

.circle:nth-child(odd) {
    background: #61bea2;
}

.circle:nth-child(even) {
    background: #529ca0;
}

.circle:nth-child(1) {
    animation: circle-1 4s ease alternate infinite;
}

.circle:nth-child(2) {
    animation: circle-2 4s ease alternate infinite;
}

.circle:nth-child(3) {
    animation: circle-3 4s ease alternate infinite;
}

.circle:nth-child(4) {
    animation: circle-4 4s ease alternate infinite;
}

.circle:nth-child(5) {
    animation: circle-5 4s ease alternate infinite;
}

.circle:nth-child(6) {
    animation: circle-6 4s ease alternate infinite;
}

@keyframes pulse {
    0% {
        transform: scale(.8) rotate(180deg);
    }

    100% {
        transform: scale(1.4);
    }
}

@keyframes circle-1 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-35px, -50px);
    }
}

@keyframes circle-2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(35px, 50px);
    }
}

@keyframes circle-3 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-60px, 0);
    }
}

@keyframes circle-4 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(60px, 0);
    }
}

@keyframes circle-5 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-35px, 50px);
    }
}

@keyframes circle-6 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(35px, -50px);
    }
}