@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap");
/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

:root {
    --bg: #fff;
    --clr-1: #7D0A0A;
    --clr-2: #57B4BA;
    --clr-3: #FFB8E0;
    --clr-4: #1F7D53;
    --clr-5: #BF3131;
    --clr-6: #205781;
    --clr-7: #FFA725;
    --clr-8: #C599B6;
    --clr-9: #FF2DF1;
    --clr-10: #27391C;
    --clr-11: #003092;
    --clr-12: #F7A8C4;
    --clr-13: #7D1C4A;
    --clr-14: #FFB200;
    --clr-15: #A9C46C;
    --clr-16: #A294F9;
    --clr-17: #001A6E;
    --clr-18: #F0BB78;
    --clr-19: #EB5B00;
    --clr-20: #A1EEBD;
    --clr-21: #FF4545;
    --clr-22: #FCC6FF;
    --clr-23: #2A629A;
    --clr-24: #86A7FC;
    --clr-25: #8E7AB5;
    --clr-26: #B784B7;
    --clr-27: #FF9843;
    --clr-28: #FFF78A;
    --clr-29: #3D30A2;
    --clr-30: #FFA33C;
    --clr-31: #D8B4F8;
    --clr-32: #FF78C4;
    --clr-33: #B70404;
    --clr-34: #F79327;
    --clr-35: #9384D1;
    --clr-36: #FFB4B4;
    --clr-37: #F76E11;
    --clr-38: #FC4F4F;
    --clr-39: #9145B6;
    --clr-40: #F7FD04;
    --blur: 1rem;
    --fs: clamp(1rem, 8vw, 1.5rem);
    --ls: clamp(-1.75px, -0.25vw, -3.5px);
}

body {
    /*    display: grid;
    place-items: center;
    
   */
    font-family: "Inter", "DM Sans", Arial, sans-serif;
}

*,
*::before,
*::after {
    font-family: inherit;
    box-sizing: border-box;
}

.content {
    text-align: left;
    padding-left: 0px;
    background-color: var(--bg);
    color: #000;
}

.title {
    font-size: var(--fs);
    font-weight: 400;
    letter-spacing: var(--ls);
    position: relative;
    overflow: hidden;
    background: var(--bg);
    margin: 0;
}

.subtitle {
}

.aurora {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: darken;
    pointer-events: none;
}

.aurora__item {
    overflow: hidden;
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: var(--clr-1);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(var(--blur));
    mix-blend-mode: overlay;
}

    .aurora__item:nth-of-type(1) {
        top: -50%;
        animation: aurora-border 6s ease-in-out infinite, aurora-1 12s ease-in-out infinite alternate;
    }

    .aurora__item:nth-of-type(2) {
        background-color: var(--clr-3);
        right: 0;
        top: 0;
        animation: aurora-border 6s ease-in-out infinite, aurora-2 12s ease-in-out infinite alternate;
    }

    .aurora__item:nth-of-type(3) {
        background-color: var(--clr-2);
        left: 0;
        bottom: 0;
        animation: aurora-border 6s ease-in-out infinite, aurora-3 8s ease-in-out infinite alternate;
    }

    .aurora__item:nth-of-type(4) {
        background-color: var(--clr-4);
        right: 0;
        bottom: -50%;
        animation: aurora-border 6s ease-in-out infinite, aurora-4 24s ease-in-out infinite alternate;
    }

@keyframes aurora-1 {
    0% {
        top: 0;
        right: 0;
    }

    50% {
        top: 100%;
        right: 75%;
    }

    75% {
        top: 100%;
        right: 25%;
    }

    100% {
        top: 0;
        right: 0;
    }
}

@keyframes aurora-2 {
    0% {
        top: -50%;
        left: 0%;
    }

    60% {
        top: 100%;
        left: 75%;
    }

    85% {
        top: 100%;
        left: 25%;
    }

    100% {
        top: -50%;
        left: 0%;
    }
}

@keyframes aurora-3 {
    0% {
        bottom: 0;
        left: 0;
    }

    40% {
        bottom: 100%;
        left: 75%;
    }

    65% {
        bottom: 40%;
        left: 50%;
    }

    100% {
        bottom: 0;
        left: 0;
    }
}

@keyframes aurora-4 {
    0% {
        bottom: -50%;
        right: 0;
    }

    50% {
        bottom: 0%;
        right: 40%;
    }

    90% {
        bottom: 50%;
        right: 25%;
    }

    100% {
        bottom: -50%;
        right: 0;
    }
}

@keyframes aurora-border {
    0% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }

    25% {
        border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
    }

    50% {
        border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
    }

    75% {
        border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
    }

    100% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
}



.sumpurna {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: darken;
    pointer-events: none;
}

.sumpurna__item {
    overflow: hidden;
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: var(--clr-5);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(var(--blur));
    mix-blend-mode: overlay;
}

    .sumpurna__item:nth-of-type(1) {
        top: -50%;
        animation: sumpurna-border 6s ease-in-out infinite, sumpurna-1 12s ease-in-out infinite alternate;
    }

    .sumpurna__item:nth-of-type(2) {
        background-color: var(--clr-6);
        right: 0;
        top: 0;
        animation: sumpurna-border 6s ease-in-out infinite, sumpurna-2 12s ease-in-out infinite alternate;
    }

    .sumpurna__item:nth-of-type(3) {
        background-color: var(--clr-7);
        left: 0;
        bottom: 0;
        animation: sumpurna-border 6s ease-in-out infinite, sumpurna-3 8s ease-in-out infinite alternate;
    }

    .sumpurna__item:nth-of-type(4) {
        background-color: var(--clr-8);
        right: 0;
        bottom: -50%;
        animation: sumpurna-border 6s ease-in-out infinite, sumpurna-4 24s ease-in-out infinite alternate;
    }

@keyframes sumpurna-1 {
    0% {
        top: 0;
        right: 0;
    }

    50% {
        top: 100%;
        right: 75%;
    }

    75% {
        top: 100%;
        right: 25%;
    }

    100% {
        top: 0;
        right: 0;
    }
}

@keyframes sumpurna-2 {
    0% {
        top: -50%;
        left: 0%;
    }

    60% {
        top: 100%;
        left: 75%;
    }

    85% {
        top: 100%;
        left: 25%;
    }

    100% {
        top: -50%;
        left: 0%;
    }
}

@keyframes sumpurna-3 {
    0% {
        bottom: 0;
        left: 0;
    }

    40% {
        bottom: 100%;
        left: 75%;
    }

    65% {
        bottom: 40%;
        left: 50%;
    }

    100% {
        bottom: 0;
        left: 0;
    }
}

@keyframes sumpurna-4 {
    0% {
        bottom: -50%;
        right: 0;
    }

    50% {
        bottom: 0%;
        right: 40%;
    }

    90% {
        bottom: 50%;
        right: 25%;
    }

    100% {
        bottom: -50%;
        right: 0;
    }
}

@keyframes sumpurna-border {
    0% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }

    25% {
        border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
    }

    50% {
        border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
    }

    75% {
        border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
    }

    100% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
}



.barnela {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: darken;
    pointer-events: none;
}

.barnela__item {
    overflow: hidden;
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: var(--clr-9);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(var(--blur));
    mix-blend-mode: overlay;
}

    .barnela__item:nth-of-type(1) {
        top: -50%;
        animation: barnela-border 6s ease-in-out infinite, barnela-1 12s ease-in-out infinite alternate;
    }

    .barnela__item:nth-of-type(2) {
        background-color: var(--clr-10);
        right: 0;
        top: 0;
        animation: barnela-border 6s ease-in-out infinite, barnela-2 12s ease-in-out infinite alternate;
    }

    .barnela__item:nth-of-type(3) {
        background-color: var(--clr-11);
        left: 0;
        bottom: 0;
        animation: barnela-border 6s ease-in-out infinite, barnela-3 8s ease-in-out infinite alternate;
    }

    .barnela__item:nth-of-type(4) {
        background-color: var(--clr-12);
        right: 0;
        bottom: -50%;
        animation: barnela-border 6s ease-in-out infinite, barnela-4 24s ease-in-out infinite alternate;
    }

@keyframes barnela-1 {
    0% {
        top: 0;
        right: 0;
    }

    50% {
        top: 100%;
        right: 75%;
    }

    75% {
        top: 100%;
        right: 25%;
    }

    100% {
        top: 0;
        right: 0;
    }
}

@keyframes barnela-2 {
    0% {
        top: -50%;
        left: 0%;
    }

    60% {
        top: 100%;
        left: 75%;
    }

    85% {
        top: 100%;
        left: 25%;
    }

    100% {
        top: -50%;
        left: 0%;
    }
}

@keyframes barnela-3 {
    0% {
        bottom: 0;
        left: 0;
    }

    40% {
        bottom: 100%;
        left: 75%;
    }

    65% {
        bottom: 40%;
        left: 50%;
    }

    100% {
        bottom: 0;
        left: 0;
    }
}

@keyframes barnela-4 {
    0% {
        bottom: -50%;
        right: 0;
    }

    50% {
        bottom: 0%;
        right: 40%;
    }

    90% {
        bottom: 50%;
        right: 25%;
    }

    100% {
        bottom: -50%;
        right: 0;
    }
}

@keyframes barnela-border {
    0% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }

    25% {
        border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
    }

    50% {
        border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
    }

    75% {
        border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
    }

    100% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
}



.jangir {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: darken;
    pointer-events: none;
}

.jangir__item {
    overflow: hidden;
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: var(--clr-13);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(var(--blur));
    mix-blend-mode: overlay;
}

    .jangir__item:nth-of-type(1) {
        top: -50%;
        animation: jangir-border 6s ease-in-out infinite, jangir-1 12s ease-in-out infinite alternate;
    }

    .jangir__item:nth-of-type(2) {
        background-color: var(--clr-14);
        right: 0;
        top: 0;
        animation: jangir-border 6s ease-in-out infinite, jangir-2 12s ease-in-out infinite alternate;
    }

    .jangir__item:nth-of-type(3) {
        background-color: var(--clr-15);
        left: 0;
        bottom: 0;
        animation: jangir-border 6s ease-in-out infinite, jangir-3 8s ease-in-out infinite alternate;
    }

    .jangir__item:nth-of-type(4) {
        background-color: var(--clr-16);
        right: 0;
        bottom: -50%;
        animation: jangir-border 6s ease-in-out infinite, jangir-4 24s ease-in-out infinite alternate;
    }

@keyframes jangir-1 {
    0% {
        top: 0;
        right: 0;
    }

    50% {
        top: 100%;
        right: 75%;
    }

    75% {
        top: 100%;
        right: 25%;
    }

    100% {
        top: 0;
        right: 0;
    }
}

@keyframes jangir-2 {
    0% {
        top: -50%;
        left: 0%;
    }

    60% {
        top: 100%;
        left: 75%;
    }

    85% {
        top: 100%;
        left: 25%;
    }

    100% {
        top: -50%;
        left: 0%;
    }
}

@keyframes jangir-3 {
    0% {
        bottom: 0;
        left: 0;
    }

    40% {
        bottom: 100%;
        left: 75%;
    }

    65% {
        bottom: 40%;
        left: 50%;
    }

    100% {
        bottom: 0;
        left: 0;
    }
}

@keyframes jangir-4 {
    0% {
        bottom: -50%;
        right: 0;
    }

    50% {
        bottom: 0%;
        right: 40%;
    }

    90% {
        bottom: 50%;
        right: 25%;
    }

    100% {
        bottom: -50%;
        right: 0;
    }
}

@keyframes jangir-border {
    0% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }

    25% {
        border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
    }

    50% {
        border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
    }

    75% {
        border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
    }

    100% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
}


.css5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: darken;
    pointer-events: none;
}

.css5__item {
    overflow: hidden;
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: var(--clr-17);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(var(--blur));
    mix-blend-mode: overlay;
}

    .css5__item:nth-of-type(1) {
        top: -50%;
        animation: css5-border 6s ease-in-out infinite, css5-1 12s ease-in-out infinite alternate;
    }

    .css5__item:nth-of-type(2) {
        background-color: var(--clr-18);
        right: 0;
        top: 0;
        animation: css5-border 6s ease-in-out infinite, css5-2 12s ease-in-out infinite alternate;
    }

    .css5__item:nth-of-type(3) {
        background-color: var(--clr-19);
        left: 0;
        bottom: 0;
        animation: css5-border 6s ease-in-out infinite, css5-3 8s ease-in-out infinite alternate;
    }

    .css5__item:nth-of-type(4) {
        background-color: var(--clr-20);
        right: 0;
        bottom: -50%;
        animation: css5-border 6s ease-in-out infinite, css5-4 24s ease-in-out infinite alternate;
    }

@keyframes css5-1 {
    0% {
        top: 0;
        right: 0;
    }

    50% {
        top: 100%;
        right: 75%;
    }

    75% {
        top: 100%;
        right: 25%;
    }

    100% {
        top: 0;
        right: 0;
    }
}

@keyframes css5-2 {
    0% {
        top: -50%;
        left: 0%;
    }

    60% {
        top: 100%;
        left: 75%;
    }

    85% {
        top: 100%;
        left: 25%;
    }

    100% {
        top: -50%;
        left: 0%;
    }
}

@keyframes css5-3 {
    0% {
        bottom: 0;
        left: 0;
    }

    40% {
        bottom: 100%;
        left: 75%;
    }

    65% {
        bottom: 40%;
        left: 50%;
    }

    100% {
        bottom: 0;
        left: 0;
    }
}

@keyframes css5-4 {
    0% {
        bottom: -50%;
        right: 0;
    }

    50% {
        bottom: 0%;
        right: 40%;
    }

    90% {
        bottom: 50%;
        right: 25%;
    }

    100% {
        bottom: -50%;
        right: 0;
    }
}

@keyframes css5-border {
    0% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }

    25% {
        border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
    }

    50% {
        border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
    }

    75% {
        border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
    }

    100% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
}



.css6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: darken;
    pointer-events: none;
}

.css6__item {
    overflow: hidden;
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: var(--clr-21);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(var(--blur));
    mix-blend-mode: overlay;
}

    .css6__item:nth-of-type(1) {
        top: -50%;
        animation: css6-border 6s ease-in-out infinite, css6-1 12s ease-in-out infinite alternate;
    }

    .css6__item:nth-of-type(2) {
        background-color: var(--clr-22);
        right: 0;
        top: 0;
        animation: css6-border 6s ease-in-out infinite, css6-2 12s ease-in-out infinite alternate;
    }

    .css6__item:nth-of-type(3) {
        background-color: var(--clr-23);
        left: 0;
        bottom: 0;
        animation: css6-border 6s ease-in-out infinite, css6-3 8s ease-in-out infinite alternate;
    }

    .css6__item:nth-of-type(4) {
        background-color: var(--clr-24);
        right: 0;
        bottom: -50%;
        animation: css6-border 6s ease-in-out infinite, css6-4 24s ease-in-out infinite alternate;
    }

@keyframes css6-1 {
    0% {
        top: 0;
        right: 0;
    }

    50% {
        top: 100%;
        right: 75%;
    }

    75% {
        top: 100%;
        right: 25%;
    }

    100% {
        top: 0;
        right: 0;
    }
}

@keyframes css6-2 {
    0% {
        top: -50%;
        left: 0%;
    }

    60% {
        top: 100%;
        left: 75%;
    }

    85% {
        top: 100%;
        left: 25%;
    }

    100% {
        top: -50%;
        left: 0%;
    }
}

@keyframes css6-3 {
    0% {
        bottom: 0;
        left: 0;
    }

    40% {
        bottom: 100%;
        left: 75%;
    }

    65% {
        bottom: 40%;
        left: 50%;
    }

    100% {
        bottom: 0;
        left: 0;
    }
}

@keyframes css6-4 {
    0% {
        bottom: -50%;
        right: 0;
    }

    50% {
        bottom: 0%;
        right: 40%;
    }

    90% {
        bottom: 50%;
        right: 25%;
    }

    100% {
        bottom: -50%;
        right: 0;
    }
}

@keyframes css6-border {
    0% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }

    25% {
        border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
    }

    50% {
        border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
    }

    75% {
        border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
    }

    100% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
}


.css7 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: darken;
    pointer-events: none;
}

.css7__item {
    overflow: hidden;
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: var(--clr-25);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(var(--blur));
    mix-blend-mode: overlay;
}

    .css7__item:nth-of-type(1) {
        top: -50%;
        animation: css7-border 6s ease-in-out infinite, css7-1 12s ease-in-out infinite alternate;
    }

    .css7__item:nth-of-type(2) {
        background-color: var(--clr-26);
        right: 0;
        top: 0;
        animation: css7-border 6s ease-in-out infinite, css7-2 12s ease-in-out infinite alternate;
    }

    .css7__item:nth-of-type(3) {
        background-color: var(--clr-27);
        left: 0;
        bottom: 0;
        animation: css7-border 6s ease-in-out infinite, css7-3 8s ease-in-out infinite alternate;
    }

    .css7__item:nth-of-type(4) {
        background-color: var(--clr-28);
        right: 0;
        bottom: -50%;
        animation: css7-border 6s ease-in-out infinite, css7-4 24s ease-in-out infinite alternate;
    }

@keyframes css7-1 {
    0% {
        top: 0;
        right: 0;
    }

    50% {
        top: 100%;
        right: 75%;
    }

    75% {
        top: 100%;
        right: 25%;
    }

    100% {
        top: 0;
        right: 0;
    }
}

@keyframes css7-2 {
    0% {
        top: -50%;
        left: 0%;
    }

    60% {
        top: 100%;
        left: 75%;
    }

    85% {
        top: 100%;
        left: 25%;
    }

    100% {
        top: -50%;
        left: 0%;
    }
}

@keyframes css7-3 {
    0% {
        bottom: 0;
        left: 0;
    }

    40% {
        bottom: 100%;
        left: 75%;
    }

    65% {
        bottom: 40%;
        left: 50%;
    }

    100% {
        bottom: 0;
        left: 0;
    }
}

@keyframes css7-4 {
    0% {
        bottom: -50%;
        right: 0;
    }

    50% {
        bottom: 0%;
        right: 40%;
    }

    90% {
        bottom: 50%;
        right: 25%;
    }

    100% {
        bottom: -50%;
        right: 0;
    }
}

@keyframes css7-border {
    0% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }

    25% {
        border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
    }

    50% {
        border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
    }

    75% {
        border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
    }

    100% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
}




.css8 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: darken;
    pointer-events: none;
}

.css8__item {
    overflow: hidden;
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: var(--clr-29);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(var(--blur));
    mix-blend-mode: overlay;
}

    .css8__item:nth-of-type(1) {
        top: -50%;
        animation: css8-border 6s ease-in-out infinite, css8-1 12s ease-in-out infinite alternate;
    }

    .css8__item:nth-of-type(2) {
        background-color: var(--clr-30);
        right: 0;
        top: 0;
        animation: css8-border 6s ease-in-out infinite, css8-2 12s ease-in-out infinite alternate;
    }

    .css8__item:nth-of-type(3) {
        background-color: var(--clr-31);
        left: 0;
        bottom: 0;
        animation: css8-border 6s ease-in-out infinite, css8-3 8s ease-in-out infinite alternate;
    }

    .css8__item:nth-of-type(4) {
        background-color: var(--clr-32);
        right: 0;
        bottom: -50%;
        animation: css8-border 6s ease-in-out infinite, css8-4 24s ease-in-out infinite alternate;
    }

@keyframes css8-1 {
    0% {
        top: 0;
        right: 0;
    }

    50% {
        top: 100%;
        right: 75%;
    }

    75% {
        top: 100%;
        right: 25%;
    }

    100% {
        top: 0;
        right: 0;
    }
}

@keyframes css8-2 {
    0% {
        top: -50%;
        left: 0%;
    }

    60% {
        top: 100%;
        left: 75%;
    }

    85% {
        top: 100%;
        left: 25%;
    }

    100% {
        top: -50%;
        left: 0%;
    }
}

@keyframes css8-3 {
    0% {
        bottom: 0;
        left: 0;
    }

    40% {
        bottom: 100%;
        left: 75%;
    }

    65% {
        bottom: 40%;
        left: 50%;
    }

    100% {
        bottom: 0;
        left: 0;
    }
}

@keyframes css8-4 {
    0% {
        bottom: -50%;
        right: 0;
    }

    50% {
        bottom: 0%;
        right: 40%;
    }

    90% {
        bottom: 50%;
        right: 25%;
    }

    100% {
        bottom: -50%;
        right: 0;
    }
}

@keyframes css8-border {
    0% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }

    25% {
        border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
    }

    50% {
        border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
    }

    75% {
        border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
    }

    100% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
}




.css9 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: darken;
    pointer-events: none;
}

.css9__item {
    overflow: hidden;
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: var(--clr-33);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(var(--blur));
    mix-blend-mode: overlay;
}

    .css9__item:nth-of-type(1) {
        top: -50%;
        animation: css9-border 6s ease-in-out infinite, css9-1 12s ease-in-out infinite alternate;
    }

    .css9__item:nth-of-type(2) {
        background-color: var(--clr-34);
        right: 0;
        top: 0;
        animation: css9-border 6s ease-in-out infinite, css9-2 12s ease-in-out infinite alternate;
    }

    .css9__item:nth-of-type(3) {
        background-color: var(--clr-35);
        left: 0;
        bottom: 0;
        animation: css9-border 6s ease-in-out infinite, css9-3 8s ease-in-out infinite alternate;
    }

    .css9__item:nth-of-type(4) {
        background-color: var(--clr-36);
        right: 0;
        bottom: -50%;
        animation: css9-border 6s ease-in-out infinite, css9-4 24s ease-in-out infinite alternate;
    }

@keyframes css9-1 {
    0% {
        top: 0;
        right: 0;
    }

    50% {
        top: 100%;
        right: 75%;
    }

    75% {
        top: 100%;
        right: 25%;
    }

    100% {
        top: 0;
        right: 0;
    }
}

@keyframes css9-2 {
    0% {
        top: -50%;
        left: 0%;
    }

    60% {
        top: 100%;
        left: 75%;
    }

    85% {
        top: 100%;
        left: 25%;
    }

    100% {
        top: -50%;
        left: 0%;
    }
}

@keyframes css9-3 {
    0% {
        bottom: 0;
        left: 0;
    }

    40% {
        bottom: 100%;
        left: 75%;
    }

    65% {
        bottom: 40%;
        left: 50%;
    }

    100% {
        bottom: 0;
        left: 0;
    }
}

@keyframes css9-4 {
    0% {
        bottom: -50%;
        right: 0;
    }

    50% {
        bottom: 0%;
        right: 40%;
    }

    90% {
        bottom: 50%;
        right: 25%;
    }

    100% {
        bottom: -50%;
        right: 0;
    }
}

@keyframes css9-border {
    0% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }

    25% {
        border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
    }

    50% {
        border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
    }

    75% {
        border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
    }

    100% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
}



.css10 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: darken;
    pointer-events: none;
}

.css10__item {
    overflow: hidden;
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: var(--clr-37);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(var(--blur));
    mix-blend-mode: overlay;
}

    .css10__item:nth-of-type(1) {
        top: -50%;
        animation: css10-border 6s ease-in-out infinite, css10-1 12s ease-in-out infinite alternate;
    }

    .css10__item:nth-of-type(2) {
        background-color: var(--clr-38);
        right: 0;
        top: 0;
        animation: css10-border 6s ease-in-out infinite, css10-2 12s ease-in-out infinite alternate;
    }

    .css10__item:nth-of-type(3) {
        background-color: var(--clr-39);
        left: 0;
        bottom: 0;
        animation: css10-border 6s ease-in-out infinite, css10-3 8s ease-in-out infinite alternate;
    }

    .css10__item:nth-of-type(4) {
        background-color: var(--clr-40);
        right: 0;
        bottom: -50%;
        animation: css10-border 6s ease-in-out infinite, css10-4 24s ease-in-out infinite alternate;
    }

@keyframes css10-1 {
    0% {
        top: 0;
        right: 0;
    }

    50% {
        top: 100%;
        right: 75%;
    }

    75% {
        top: 100%;
        right: 25%;
    }

    100% {
        top: 0;
        right: 0;
    }
}

@keyframes css10-2 {
    0% {
        top: -50%;
        left: 0%;
    }

    60% {
        top: 100%;
        left: 75%;
    }

    85% {
        top: 100%;
        left: 25%;
    }

    100% {
        top: -50%;
        left: 0%;
    }
}

@keyframes css10-3 {
    0% {
        bottom: 0;
        left: 0;
    }

    40% {
        bottom: 100%;
        left: 75%;
    }

    65% {
        bottom: 40%;
        left: 50%;
    }

    100% {
        bottom: 0;
        left: 0;
    }
}

@keyframes css10-4 {
    0% {
        bottom: -50%;
        right: 0;
    }

    50% {
        bottom: 0%;
        right: 40%;
    }

    90% {
        bottom: 50%;
        right: 25%;
    }

    100% {
        bottom: -50%;
        right: 0;
    }
}

@keyframes css10-border {
    0% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }

    25% {
        border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
    }

    50% {
        border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
    }

    75% {
        border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
    }

    100% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
}

/*  Type Animation  CSS*/

/* Cursor */
.cursor {
    position: relative;
    width: 24em;
    margin: 0 0 0 0;
    padding-top: 15px;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
}
/* Animation */
.typewriter-animation {
    animation: typewriter 5s steps(50) 1s 1 normal both, blinkingCursor 500ms steps(50) infinite normal;
}

@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blinkingCursor {
    from {
        border-right-color: rgba(255,255,255,.75);
    }

    to {
        border-right-color: transparent;
    }
}