/* Background shapes */

svg.clippy {
  position: absolute;
  top: -999px;
  left: -999px;
  width: 0;
  height: 0;
  display: block;
}

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Ensures it stays below the main content */
}


/*  SHAPE CONTAINERS  */ 

.svg-container {
    width: 80vw;
    height: 80vw;
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translate(-50%,-50%) rotate(0deg) scale(0.0001);
}

.svg-container.orange {
    z-index: -4;
    background-color: #F69643;
    clip-path: url(#orangeShape);
}

.svg-container.green {
    z-index: -3;
    background-color: #43BD8A;
    clip-path: url(#greenShape);
}

.svg-container.blue {
    z-index: -1;
    background-color: #7457CA;
    clip-path: url(#blueShape);
}

.svg-container.purple {
    z-index: -2;
    background-color: #D53C57;
    clip-path: url(#purpleShape);
}


.svg-scaling-adjustment {
    position: relative;
}

.svg-container.orange .svg-scaling-adjustment {
  width: 95%;
  height: 34%;
}


.svg-container.green .svg-scaling-adjustment {
    width: 93%;
    height: 93%;
}

.svg-container.blue .svg-scaling-adjustment {
    width: 34%;
    height: 93%;
}

.svg-container.purple .svg-scaling-adjustment {
    width: 93%;
    height: 93%;
}


@media (max-aspect-ratio: 9/16) {
    .svg-container.orange {
    width: 200vh;
    height: 200vh;
    top: 78%; left: 80%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.green {
    width: 125vh;
    height: 125vh;
    top: 45%; left: -44%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
}
.svg-container.blue {
    width: 130vh;
    height: 130vh;
    top: -8%; left: 19.5%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.purple {
    width: 100vh;
    height: 100vh;
    top: 10%; left: 107.5%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg);
}

@keyframes animateOrangeToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 50.7%; left: 39.1%; transform: translate(-50%, -50%) scale(0.037) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionOrange {
    from { top: 50.7%; left: 39.1%; transform: translate(-50%, -50%) scale(0.037) rotate(0deg); opacity: 1;}
    to { top: 78%; left: 80%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animateGreenToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 46.7%; left: 42.1%; transform: translate(-50%, -50%) scale(0.047) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionGreen {
    from { top: 46.7%; left: 42.1%; transform: translate(-50%, -50%) scale(0.047) rotate(0deg); opacity: 1;}
    to { top: 45%; left: -44%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg); opacity: 1;}
}

@keyframes animateBlueToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 44.8%; left: 50%; transform: translate(-50%, -50%) scale(0.065) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionBlue {
    from { top: 44.8%; left: 50%; transform: translate(-50%, -50%) scale(0.065) rotate(0deg); opacity: 1;}
    to { top: -8%; left: 19.5%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animatePurpleToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 46.8%; left: 57.7%; transform: translate(-50%, -50%) scale(0.055) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionPurple {
    from { top: 46.8%; left: 57.7%; transform: translate(-50%, -50%) scale(0.055) rotate(0deg); opacity: 1;}
    to { top: 10%; left: 107.5%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg); opacity: 1;}
}

.svg-container.svg-container-animation.orange.initial-animation {
    animation: animateOrangeToPetals 1s ease 0.1s forwards;
}
.svg-container.svg-container-animation.green.initial-animation {
    animation: animateGreenToPetals 1s ease 0.2s forwards;
}
.svg-container.svg-container-animation.blue.initial-animation {
    animation: animateBlueToPetals 1s ease 0.3s forwards;
}
.svg-container.svg-container-animation.purple.initial-animation {
    animation: animatePurpleToPetals 1s ease 0.4s forwards;
}

.svg-container.svg-container-animation.orange.second-animation {
    animation: moveToFinalPositionOrange 1s ease 0s forwards;
}
.svg-container.svg-container-animation.green.second-animation {
    animation: moveToFinalPositionGreen 1s ease 0s forwards;
}
.svg-container.svg-container-animation.blue.second-animation {
    animation: moveToFinalPositionBlue 1s ease 0s forwards;
}
.svg-container.svg-container-animation.purple.second-animation {
    animation: moveToFinalPositionPurple 1s ease 0s forwards;
}

}


@media (max-aspect-ratio: 9/18) {
    .svg-container.orange {
    width: 200vh;
    height: 200vh;
    top: 74%; left: 80%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.green {
    width: 125vh;
    height: 125vh;
    top: 39%; left: -58%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
}
.svg-container.blue {
    width: 130vh;
    height: 130vh;
    top: -8%; left: 15%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.purple {
    width: 100vh;
    height: 100vh;
    top: 8%; left: 117%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg);
}

@keyframes animateOrangeToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 50.2%; left: 40%; transform: translate(-50%, -50%) scale(0.033) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionOrange {
    from { top: 50.2%; left: 40%; transform: translate(-50%, -50%) scale(0.033) rotate(0deg); opacity: 1;}
    to { top: 74%; left: 80%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animateGreenToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 46.7%; left: 42.6%; transform: translate(-50%, -50%) scale(0.043) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionGreen {
    from { top: 46.7%; left: 42.6%; transform: translate(-50%, -50%) scale(0.043) rotate(0deg); opacity: 1;}
    to { top: 39%; left: -58%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg); opacity: 1;}
}

@keyframes animateBlueToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 44.8%; left: 50%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionBlue {
    from { top: 44.8%; left: 50%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
    to { top: -8%; left: 15%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animatePurpleToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 46.7%; left: 57.1%; transform: translate(-50%, -50%) scale(0.051) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionPurple {
    from { top: 46.7%; left: 57.1%; transform: translate(-50%, -50%) scale(0.051) rotate(0deg); opacity: 1;}
    to { top: 8%; left: 117%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg); opacity: 1;}
}

.svg-container.svg-container-animation.orange.initial-animation {
    animation: animateOrangeToPetals 1s ease 0.1s forwards;
}
.svg-container.svg-container-animation.green.initial-animation {
    animation: animateGreenToPetals 1s ease 0.2s forwards;
}
.svg-container.svg-container-animation.blue.initial-animation {
    animation: animateBlueToPetals 1s ease 0.3s forwards;
}
.svg-container.svg-container-animation.purple.initial-animation {
    animation: animatePurpleToPetals 1s ease 0.4s forwards;
}

.svg-container.svg-container-animation.orange.second-animation {
    animation: moveToFinalPositionOrange 1s ease 0s forwards;
}
.svg-container.svg-container-animation.green.second-animation {
    animation: moveToFinalPositionGreen 1s ease 0s forwards;
}
.svg-container.svg-container-animation.blue.second-animation {
    animation: moveToFinalPositionBlue 1s ease 0s forwards;
}
.svg-container.svg-container-animation.purple.second-animation {
    animation: moveToFinalPositionPurple 1s ease 0s forwards;
}

}


@media (max-aspect-ratio: 9/21) {
    .svg-container.orange {
    width: 200vh;
    height: 200vh;
    top: 74%; left: 80%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.green {
    width: 125vh;
    height: 125vh;
    top: 69%; left: -73%; transform: translate(-50%, -50%) scale(1.08) rotate(-8deg);
}
.svg-container.blue {
    width: 130vh;
    height: 130vh;
    top: -22%; left: 14%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.purple {
    width: 100vh;
    height: 100vh;
    top: 8%; left: 98%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg);
}

@keyframes animateOrangeToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 50%; left: 38.6%; transform: translate(-50%, -50%) scale(0.033) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionOrange {
    from { top: 50%; left: 38.6%; transform: translate(-50%, -50%) scale(0.033) rotate(0deg); opacity: 1;}
    to { top: 74%; left: 80%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animateGreenToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 46.7%; left: 41.4%; transform: translate(-50%, -50%) scale(0.043) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionGreen {
    from { top: 46.7%; left: 41.4%; transform: translate(-50%, -50%) scale(0.043) rotate(0deg); opacity: 1;}
    to { top: 69%; left: -73%; transform: translate(-50%, -50%) scale(1.08) rotate(-8deg); opacity: 1;}
}

@keyframes animateBlueToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 44.8%; left: 50%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionBlue {
    from { top: 44.8%; left: 50%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
    to { top: -22%; left: 14%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animatePurpleToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 46.7%; left: 58.5%; transform: translate(-50%, -50%) scale(0.051) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionPurple {
    from { top: 46.7%; left: 58.5%; transform: translate(-50%, -50%) scale(0.051) rotate(0deg); opacity: 1;}
    to { top: 8%; left: 98%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg); opacity: 1;}
}

.svg-container.svg-container-animation.orange.initial-animation {
    animation: animateOrangeToPetals 1s ease 0.1s forwards;
}
.svg-container.svg-container-animation.green.initial-animation {
    animation: animateGreenToPetals 1s ease 0.2s forwards;
}
.svg-container.svg-container-animation.blue.initial-animation {
    animation: animateBlueToPetals 1s ease 0.3s forwards;
}
.svg-container.svg-container-animation.purple.initial-animation {
    animation: animatePurpleToPetals 1s ease 0.4s forwards;
}

.svg-container.svg-container-animation.orange.second-animation {
    animation: moveToFinalPositionOrange 1s ease 0s forwards;
}
.svg-container.svg-container-animation.green.second-animation {
    animation: moveToFinalPositionGreen 1s ease 0s forwards;
}
.svg-container.svg-container-animation.blue.second-animation {
    animation: moveToFinalPositionBlue 1s ease 0s forwards;
}
.svg-container.svg-container-animation.purple.second-animation {
    animation: moveToFinalPositionPurple 1s ease 0s forwards;
}

}


@media (min-aspect-ratio: 5/9) {
    .svg-container.orange {
    width: 290vh;
    height: 290vh;
    top: 58%; left: 83%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.green {
    width: 180vh;
    height: 180vh;
    top: 36%; left: -72%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
}
.svg-container.blue {
    width: 200vh;
    height: 200vh;
    top: -45%; left: 17%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.purple {
    width: 125vh;
    height: 125vh;
    top: 9%; left: 87%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg);
}

@keyframes animateOrangeToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 48.8%; left: 40%; transform: translate(-50%, -50%) scale(0.032) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionOrange {
    from { top: 48.8%; left: 40%; transform: translate(-50%, -50%) scale(0.032) rotate(0deg); opacity: 1;}
    to { top: 58%; left: 83%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animateGreenToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 44.4%; left: 43.2%; transform: translate(-50%, -50%) scale(0.04) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionGreen {
    from { top: 44.4%; left: 43.2%; transform: translate(-50%, -50%) scale(0.04) rotate(0deg); opacity: 1;}
    to { top: 36%; left: -72%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg); opacity: 1;}
}

@keyframes animateBlueToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 41.7%; left: 51.4%; transform: translate(-50%, -50%) scale(0.053) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionBlue {
    from { top: 41.7%; left: 51.4%; transform: translate(-50%, -50%) scale(0.053) rotate(0deg); opacity: 1;}
    to { top: -45%; left: 17%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animatePurpleToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 44.3%; left: 59.3%; transform: translate(-50%, -50%) scale(0.056) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionPurple {
    from { top: 44.3%; left: 59.3%; transform: translate(-50%, -50%) scale(0.056) rotate(0deg); opacity: 1;}
    to { top: 9%; left: 87%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg); opacity: 1;}
}

.svg-container.svg-container-animation.orange.initial-animation {
    animation: animateOrangeToPetals 1s ease 0.1s forwards;
}
.svg-container.svg-container-animation.green.initial-animation {
    animation: animateGreenToPetals 1s ease 0.2s forwards;
}
.svg-container.svg-container-animation.blue.initial-animation {
    animation: animateBlueToPetals 1s ease 0.3s forwards;
}
.svg-container.svg-container-animation.purple.initial-animation {
    animation: animatePurpleToPetals 1s ease 0.4s forwards;
}

.svg-container.svg-container-animation.orange.second-animation {
    animation: moveToFinalPositionOrange 1s ease 0s forwards;
}
.svg-container.svg-container-animation.green.second-animation {
    animation: moveToFinalPositionGreen 1s ease 0s forwards;
}
.svg-container.svg-container-animation.blue.second-animation {
    animation: moveToFinalPositionBlue 1s ease 0s forwards;
}
.svg-container.svg-container-animation.purple.second-animation {
    animation: moveToFinalPositionPurple 1s ease 0s forwards;
}

}


@media (min-aspect-ratio: 6/9.6) {
    .svg-container.orange {
    width: 290vh;
    height: 290vh;
    top: 58%; left: 83%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.green {
    width: 180vh;
    height: 180vh;
    top: 36%; left: -43%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
}
.svg-container.blue {
    width: 200vh;
    height: 200vh;
    top: -45%; left: 20%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.purple {
    width: 125vh;
    height: 125vh;
    top: 10%; left: 90%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg);
}

@keyframes animateOrangeToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 48.8%; left: 40%; transform: translate(-50%, -50%) scale(0.032) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionOrange {
    from { top: 48.8%; left: 40%; transform: translate(-50%, -50%) scale(0.032) rotate(0deg); opacity: 1;}
    to { top: 58%; left: 83%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animateGreenToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 44.4%; left: 43.2%; transform: translate(-50%, -50%) scale(0.04) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionGreen {
    from { top: 44.4%; left: 43.2%; transform: translate(-50%, -50%) scale(0.04) rotate(0deg); opacity: 1;}
    to { top: 36%; left: -43%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg); opacity: 1;}
}

@keyframes animateBlueToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 41.7%; left: 50.3%; transform: translate(-50%, -50%) scale(0.053) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionBlue {
    from { top: 41.7%; left: 50.3%; transform: translate(-50%, -50%) scale(0.053) rotate(0deg); opacity: 1;}
    to { top: -45%; left: 20%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animatePurpleToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 44.3%; left: 57%; transform: translate(-50%, -50%) scale(0.056) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionPurple {
    from { top: 44.3%; left: 57%; transform: translate(-50%, -50%) scale(0.056) rotate(0deg); opacity: 1;}
    to { top: 10%; left: 90%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg); opacity: 1;}
}

.svg-container.svg-container-animation.orange.initial-animation {
    animation: animateOrangeToPetals 1s ease 0.1s forwards;
}
.svg-container.svg-container-animation.green.initial-animation {
    animation: animateGreenToPetals 1s ease 0.2s forwards;
}
.svg-container.svg-container-animation.blue.initial-animation {
    animation: animateBlueToPetals 1s ease 0.3s forwards;
}
.svg-container.svg-container-animation.purple.initial-animation {
    animation: animatePurpleToPetals 1s ease 0.4s forwards;
}

.svg-container.svg-container-animation.orange.second-animation {
    animation: moveToFinalPositionOrange 1s ease 0s forwards;
}
.svg-container.svg-container-animation.green.second-animation {
    animation: moveToFinalPositionGreen 1s ease 0s forwards;
}
.svg-container.svg-container-animation.blue.second-animation {
    animation: moveToFinalPositionBlue 1s ease 0s forwards;
}
.svg-container.svg-container-animation.purple.second-animation {
    animation: moveToFinalPositionPurple 1s ease 0s forwards;
}

}


@media (min-aspect-ratio: 5/6) {
    .svg-container.orange {
    width: 290vh;
    height: 290vh;
    top: 58%; left: 83%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.green {
    width: 246vh;
    height: 246vh;
    top: -14%; left: -63%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
}
.svg-container.blue {
    width: 200vh;
    height: 200vh;
    top: -33%; left: 20%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.purple {
    width: 125vh;
    height: 125vh;
    top: 10%; left: 83%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg);
}

@keyframes animateOrangeToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 49.4%; left: 40.5%; transform: translate(-50%, -50%) scale(0.034) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionOrange {
    from { top: 49.4%; left: 40.5%; transform: translate(-50%, -50%) scale(0.034) rotate(0deg); opacity: 1;}
    to { top: 58%; left: 83%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animateGreenToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 44.4%; left: 43.4%; transform: translate(-50%, -50%) scale(0.032) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionGreen {
    from { top: 44.4%; left: 43.4%; transform: translate(-50%, -50%) scale(0.032) rotate(0deg); opacity: 1;}
    to { top: -14%; left: -63%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg); opacity: 1;}
}

@keyframes animateBlueToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 41.7%; left: 49.5%; transform: translate(-50%, -50%) scale(0.056) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionBlue {
    from { top: 41.7%; left: 49.5%; transform: translate(-50%, -50%) scale(0.056) rotate(0deg); opacity: 1;}
    to { top: -33%; left: 20%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animatePurpleToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 44.3%; left: 55.4%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionPurple {
    from { top: 44.3%; left: 55.4%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
    to { top: 10%; left: 83%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg); opacity: 1;}
}

.svg-container.svg-container-animation.orange.initial-animation {
    animation: animateOrangeToPetals 1s ease 0.1s forwards;
}
.svg-container.svg-container-animation.green.initial-animation {
    animation: animateGreenToPetals 1s ease 0.2s forwards;
}
.svg-container.svg-container-animation.blue.initial-animation {
    animation: animateBlueToPetals 1s ease 0.3s forwards;
}
.svg-container.svg-container-animation.purple.initial-animation {
    animation: animatePurpleToPetals 1s ease 0.4s forwards;
}

.svg-container.svg-container-animation.orange.second-animation {
    animation: moveToFinalPositionOrange 1s ease 0s forwards;
}
.svg-container.svg-container-animation.green.second-animation {
    animation: moveToFinalPositionGreen 1s ease 0s forwards;
}
.svg-container.svg-container-animation.blue.second-animation {
    animation: moveToFinalPositionBlue 1s ease 0s forwards;
}
.svg-container.svg-container-animation.purple.second-animation {
    animation: moveToFinalPositionPurple 1s ease 0s forwards;
}

}


@media (min-aspect-ratio: 1/1) {
    .svg-container.orange {
    width: 230vh;
    height: 230vh;
    top: 65%; left: 70%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.green {
    width: 246vh;
    height: 246vh;
    top: -10%; left: -35%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
}
.svg-container.blue {
    width: 200vh;
    height: 200vh;
    top: -35%; left: 19.8%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.purple {
    width: 140vh;
    height: 140vh;
    top: 9%; left: 81%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg);
}

@keyframes animateOrangeToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 49.7%; left: 40.5%; transform: translate(-50%, -50%) scale(0.041) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionOrange {
    from { top: 49.7%; left: 40.5%; transform: translate(-50%, -50%) scale(0.041) rotate(0deg); opacity: 1;}
    to { top: 65%; left: 70%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animateGreenToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 44.4%; left: 43.4%; transform: translate(-50%, -50%) scale(0.031) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionGreen {
    from { top: 44.4%; left: 43.4%; transform: translate(-50%, -50%) scale(0.031) rotate(0deg); opacity: 1;}
    to { top: -10%; left: -35%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg); opacity: 1;}
}

@keyframes animateBlueToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 41.7%; left: 49.5%; transform: translate(-50%, -50%) scale(0.056) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionBlue {
    from { top: 41.7%; left: 49.5%; transform: translate(-50%, -50%) scale(0.056) rotate(0deg); opacity: 1;}
    to { top: -35%; left: 19%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animatePurpleToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 44.2%; left: 55.5%; transform: translate(-50%, -50%) scale(0.053) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionPurple {
    from { top: 44.2%; left: 55.5%; transform: translate(-50%, -50%) scale(0.053) rotate(0deg); opacity: 1;}
    to { top: 9%; left: 81%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg); opacity: 1;}
}

.svg-container.svg-container-animation.orange.initial-animation {
    animation: animateOrangeToPetals 1s ease 0.1s forwards;
}
.svg-container.svg-container-animation.green.initial-animation {
    animation: animateGreenToPetals 1s ease 0.2s forwards;
}
.svg-container.svg-container-animation.blue.initial-animation {
    animation: animateBlueToPetals 1s ease 0.3s forwards;
}
.svg-container.svg-container-animation.purple.initial-animation {
    animation: animatePurpleToPetals 1s ease 0.4s forwards;
}

.svg-container.svg-container-animation.orange.second-animation {
    animation: moveToFinalPositionOrange 1s ease 0s forwards;
}
.svg-container.svg-container-animation.green.second-animation {
    animation: moveToFinalPositionGreen 1s ease 0s forwards;
}
.svg-container.svg-container-animation.blue.second-animation {
    animation: moveToFinalPositionBlue 1s ease 0s forwards;
}
.svg-container.svg-container-animation.purple.second-animation {
    animation: moveToFinalPositionPurple 1s ease 0s forwards;
}

}


@media (min-aspect-ratio: 8/7) {
    .svg-container.orange {
    width: 245vh;
    height: 245vh;
    top: 63%; left: 70%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.green {
    width: 246vh;
    height: 246vh;
    top: -10%; left: -35%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
}
.svg-container.blue {
    width: 210vh;
    height: 210vh;
    top: -33%; left: 19%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.purple {
    width: 145vh;
    height: 145vh;
    top: 4%; left: 81%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg);
}

@keyframes animateOrangeToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 49.1%; left: 43.5%; transform: translate(-50%, -50%) scale(0.045) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionOrange {
    from { top: 49.1%; left: 43.5%; transform: translate(-50%, -50%) scale(0.045) rotate(0deg); opacity: 1;}
    to { top: 63%; left: 70%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animateGreenToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 43.5%; left: 45.5%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionGreen {
    from { top: 43.5%; left: 45.5%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
    to { top: -10%; left: -35%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg); opacity: 1;}
}

@keyframes animateBlueToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 40%; left: 50.4%; transform: translate(-50%, -50%) scale(0.055) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionBlue {
    from { top: 40%; left: 50.4%; transform: translate(-50%, -50%) scale(0.055) rotate(0deg); opacity: 1;}
    to { top: -33%; left: 19%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animatePurpleToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 43.3%; left: 55.1%; transform: translate(-50%, -50%) scale(0.057) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionPurple {
    from { top: 43.3%; left: 55.1%; transform: translate(-50%, -50%) scale(0.057) rotate(0deg); opacity: 1;}
    to { top: 4%; left: 81%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg); opacity: 1;}
}

.svg-container.svg-container-animation.orange.initial-animation {
    animation: animateOrangeToPetals 1s ease 0.1s forwards;
}
.svg-container.svg-container-animation.green.initial-animation {
    animation: animateGreenToPetals 1s ease 0.2s forwards;
}
.svg-container.svg-container-animation.blue.initial-animation {
    animation: animateBlueToPetals 1s ease 0.3s forwards;
}
.svg-container.svg-container-animation.purple.initial-animation {
    animation: animatePurpleToPetals 1s ease 0.4s forwards;
}

.svg-container.svg-container-animation.orange.second-animation {
    animation: moveToFinalPositionOrange 1s ease 0s forwards;
}
.svg-container.svg-container-animation.green.second-animation {
    animation: moveToFinalPositionGreen 1s ease 0s forwards;
}
.svg-container.svg-container-animation.blue.second-animation {
    animation: moveToFinalPositionBlue 1s ease 0s forwards;
}
.svg-container.svg-container-animation.purple.second-animation {
    animation: moveToFinalPositionPurple 1s ease 0s forwards;
}

}



@media (min-aspect-ratio: 5/4) {
    .svg-container.orange {
    width: 245vh;
    height: 245vh;
    top: 63%; left: 70%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.green {
    width: 246vh;
    height: 246vh;
    top: -10%; left: -35%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
}
.svg-container.blue {
    width: 250vh;
    height: 250vh;
    top: -53%; left: 20%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.purple {
    width: 145vh;
    height: 145vh;
    top: 4%; left: 81%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg);
}

@keyframes animateOrangeToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 48.8%; left: 44.3%; transform: translate(-50%, -50%) scale(0.044) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionOrange {
    from { top: 48.8%; left: 44.3%; transform: translate(-50%, -50%) scale(0.044) rotate(0deg); opacity: 1;}
    to { top: 63%; left: 70%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animateGreenToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 43.2%; left: 46%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionGreen {
    from { top: 43.2%; left: 46%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
    to { top: -10%; left: -35%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg); opacity: 1;}
}

@keyframes animateBlueToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 40%; left: 50.4%; transform: translate(-50%, -50%) scale(0.05) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionBlue {
    from { top: 40%; left: 50.4%; transform: translate(-50%, -50%) scale(0.05) rotate(0deg); opacity: 1;}
    to { top: -53%; left: 20%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animatePurpleToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0;}
    to { top: 43%; left: 54.7%; transform: translate(-50%, -50%) scale(0.058) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionPurple {
    from { top: 43%; left: 54.7%; transform: translate(-50%, -50%) scale(0.058) rotate(0deg); opacity: 1;}
    to { top: 4%; left: 81%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg); opacity: 1;}
}

.svg-container.svg-container-animation.orange.initial-animation {
    animation: animateOrangeToPetals 1s ease 0.1s forwards;
}
.svg-container.svg-container-animation.green.initial-animation {
    animation: animateGreenToPetals 1s ease 0.2s forwards;
}
.svg-container.svg-container-animation.blue.initial-animation {
    animation: animateBlueToPetals 1s ease 0.3s forwards;
}
.svg-container.svg-container-animation.purple.initial-animation {
    animation: animatePurpleToPetals 1s ease 0.4s forwards;
}

.svg-container.svg-container-animation.orange.second-animation {
    animation: moveToFinalPositionOrange 1s ease 0s forwards;
}
.svg-container.svg-container-animation.green.second-animation {
    animation: moveToFinalPositionGreen 1s ease 0s forwards;
}
.svg-container.svg-container-animation.blue.second-animation {
    animation: moveToFinalPositionBlue 1s ease 0s forwards;
}
.svg-container.svg-container-animation.purple.second-animation {
    animation: moveToFinalPositionPurple 1s ease 0s forwards;
}

}



@media (min-aspect-ratio: 4/3) {
    
    .svg-container.orange {
        width: 305vh;
        height: 305vh;
        top: 57%; left: 83%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
        
    }
    .svg-container.green {
       width: 246vh;
       height: 246vh;
       top: -14%; left: -30%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
       
   }
   .svg-container.blue {
    width: 210vh;
    height: 210vh;
    top: -33%; left: 41%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
    }
    .svg-container.purple {
        width: 135vh;
        height: 135vh;
        top: 43%; left: 66%; transform: translate(-50%, -50%) scale(1.08) rotate(-1deg);
    }
    

    @keyframes animateOrangeToPetals {
        from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
        to { top: 48.8%; left: 44.8%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
    }
    @keyframes moveToFinalPositionOrange {
        from { top: 48.8%; left: 44.8%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
        to { top: 57%; left: 83%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1; }
    }


    @keyframes animateGreenToPetals {
        from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
        to { top: 43.4%; left: 46.4%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
    }
     @keyframes moveToFinalPositionGreen {
        from { top: 43.4%; left: 46.4%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
        to { top: -14%; left: -30%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg); opacity: 1;}
    }


   @keyframes animateBlueToPetals {
        from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
        to { top: 40%; left: 50.4%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
    }
    @keyframes moveToFinalPositionBlue {
        from { top: 40%; left: 50.4%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
        to { top: -33%; left: 41%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
    }


    @keyframes animatePurpleToPetals {
        from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
        to { top: 43%; left: 54.6%; transform: translate(-50%, -50%) scale(0.065) rotate(0deg); opacity: 1;}
    }
    @keyframes moveToFinalPositionPurple {
        from { top: 43%; left: 54.6%; transform: translate(-50%, -50%) scale(0.065) rotate(0deg); opacity: 1;}
        to { top: 43%; left: 66%; transform: translate(-50%, -50%) scale(1.08) rotate(-1deg); opacity: 1;}
    }
   

    .svg-container.svg-container-animation.orange.initial-animation {
        animation: animateOrangeToPetals 1s ease 0.1s forwards;
    }
   .svg-container.svg-container-animation.green.initial-animation {
        animation: animateGreenToPetals 1s ease 0.2s forwards;
    }
    .svg-container.svg-container-animation.blue.initial-animation {
        animation: animateBlueToPetals 1s ease 0.3s forwards;
    }
    .svg-container.svg-container-animation.purple.initial-animation {
        animation: animatePurpleToPetals 1s ease 0.4s forwards;
    }

    .svg-container.svg-container-animation.orange.second-animation {
        animation: moveToFinalPositionOrange 1s ease 0s forwards;
    }
   .svg-container.svg-container-animation.green.second-animation {
        animation: moveToFinalPositionGreen 1s ease 0s forwards;
    }
    .svg-container.svg-container-animation.blue.second-animation {
        animation: moveToFinalPositionBlue 1s ease 0s forwards;
    }
    .svg-container.svg-container-animation.purple.second-animation {
        animation: moveToFinalPositionPurple 1s ease 0s forwards;
    }

}



@media (min-aspect-ratio: 14/9) {

    .svg-container.orange {
        width: 305vh;
        height: 305vh;
        transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
        top: 58%; left: 83%;
    }

    .svg-container.green {
       width: 246vh;
       height: 246vh;
       transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
       top: -14%; left: -23%;
   }

   .svg-container.blue {
        width: 200vh;
        height: 200vh;
        transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
       top: -30%; left: 40%;
       
    }

    .svg-container.purple {
        width: 145vh;
        height: 145vh; 
        transform: translate(-50%, -50%) scale(1.08) rotate(-7deg);
        top: 43%; left: 57%;
        
    }


    @keyframes animateOrangeToPetals {
        from { top: 50%; left: 47%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
        to { top: 50%; left: 41.7%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
    }
    @keyframes moveToFinalPositionOrange {
        from { top: 50%; left: 41.7%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
        to { top: 58%; left: 83%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
    }


    @keyframes animateGreenToPetals {
        from { top: 50%; left: 47%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
        to { top: 44.4%; left: 43.2%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
    }
     @keyframes moveToFinalPositionGreen {
        from { top: 44.4%; left: 43.2%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
        to { top: -14%; left: -23%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg); opacity: 1;}
    }


   @keyframes animateBlueToPetals {
        from { top: 50%; left: 47%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
        to { top: 41.6%; left: 47.1%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
    }
    @keyframes moveToFinalPositionBlue {
        from { top: 41.6%; left: 47.1%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
        to { top: -30%; left: 40%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
    }


    @keyframes animatePurpleToPetals {
        from { top: 50%; left: 47%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
        to { top: 44.3%; left: 51%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
    }
    @keyframes moveToFinalPositionPurple {
        from { top: 44.3%; left: 51%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
        to { top: 43%; left: 57%; transform: translate(-50%, -50%) scale(1.08) rotate(-7deg); opacity: 1;}
    }

    .svg-container.svg-container-animation.orange.initial-animation {
        animation: animateOrangeToPetals 1s ease 0.2s forwards;
    }

    .svg-container.svg-container-animation.orange.second-animation {
        animation: moveToFinalPositionOrange 1s ease 0s forwards;
    }

    .svg-container.svg-container-animation.green.initial-animation {
        animation: animateGreenToPetals 1s ease 0.3s forwards;
    }
    .svg-container.svg-container-animation.green.second-animation {
        animation: moveToFinalPositionGreen 1s ease 0s forwards;
    }

    .svg-container.svg-container-animation.blue.initial-animation {
        animation: animateBlueToPetals 1s ease 0.4s forwards;
    }

    .svg-container.svg-container-animation.blue.second-animation {
        animation: moveToFinalPositionBlue 1s ease 0s forwards;
    }
    
    .svg-container.svg-container-animation.purple.initial-animation {
        animation: animatePurpleToPetals 1s ease 0.5s forwards;
    }
    .svg-container.svg-container-animation.purple.second-animation {
        animation: moveToFinalPositionPurple 1s ease 0s forwards;
    }
}



@media (min-aspect-ratio: 16/9) {
    .svg-container.orange {
    width: 310vh;
    height: 310vh;
    top: 57%; left: 76%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.green {
    width: 235vh;
    height: 235vh;
    top: 7%; left: -12%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
}
.svg-container.blue {
    width: 200vh;
    height: 200vh;
    top: -33%; left: 37%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.purple {
    width: 150vh;
    height: 150vh;
    top: 43%; left: 58%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg);
}

@keyframes animateOrangeToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
    to { top: 50%; left: 45.7%; transform: translate(-50%, -50%) scale(0.033) rotate(0deg); opacity: 1; }
}
@keyframes moveToFinalPositionOrange {
    from { top: 50%; left: 45.7%; transform: translate(-50%, -50%) scale(0.033) rotate(0deg); opacity: 1; }
    to { top: 57%; left: 76%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animateGreenToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
    to { top: 44.4%; left: 46.7%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionGreen {
    from { top: 44.4%; left: 46.7%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
    to { top: 7%; left: -12%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg); opacity: 1;}
}

@keyframes animateBlueToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
    to { top: 41.6%; left: 50%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionBlue {
    from { top: 41.6%; left: 50%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
    to { top: -33%; left: 37%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animatePurpleToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
    to { top: 44.4%; left: 53.2%; transform: translate(-50%, -50%) scale(0.053) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionPurple {
    from { top: 44.4%; left: 53.2%; transform: translate(-50%, -50%) scale(0.053) rotate(0deg); opacity: 1;}
    to { top: 43%; left: 58%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg); opacity: 1;}
}

.svg-container.svg-container-animation.orange.initial-animation {
    animation: animateOrangeToPetals 1s ease 0.1s forwards;
}
.svg-container.svg-container-animation.green.initial-animation {
    animation: animateGreenToPetals 1s ease 0.2s forwards;
}
.svg-container.svg-container-animation.blue.initial-animation {
    animation: animateBlueToPetals 1s ease 0.3s forwards;
}
.svg-container.svg-container-animation.purple.initial-animation {
    animation: animatePurpleToPetals 1s ease 0.4s forwards;
}

.svg-container.svg-container-animation.orange.second-animation {
    animation: moveToFinalPositionOrange 1s ease 0s forwards;
}
.svg-container.svg-container-animation.green.second-animation {
    animation: moveToFinalPositionGreen 1s ease 0s forwards;
}
.svg-container.svg-container-animation.blue.second-animation {
    animation: moveToFinalPositionBlue 1s ease 0s forwards;
}
.svg-container.svg-container-animation.purple.second-animation {
    animation: moveToFinalPositionPurple 1s ease 0s forwards;
}

}

@media (min-aspect-ratio: 18/9) {
    .svg-container.orange {
    width: 310vh;
    height: 310vh;
    top: 57%; left: 76%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.green {
    width: 235vh;
    height: 235vh;
    top: 10%; left: -5%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
}
.svg-container.blue {
    width: 230vh;
    height: 230vh;
    top: -36%; left: 36.5%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.purple {
    width: 160vh;
    height: 160vh;
    top: 43%; left: 59%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg);
}

@keyframes animateOrangeToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
    to { top: 50%; left: 45.7%; transform: translate(-50%, -50%) scale(0.033) rotate(0deg); opacity: 1; }
}
@keyframes moveToFinalPositionOrange {
    from { top: 50%; left: 45.7%; transform: translate(-50%, -50%) scale(0.033) rotate(0deg); opacity: 1; }
    to { top: 57%; left: 76%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animateGreenToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
    to { top: 44.4%; left: 46.7%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionGreen {
    from { top: 44.4%; left: 46.7%; transform: translate(-50%, -50%) scale(0.035) rotate(0deg); opacity: 1;}
    to { top: 10%; left: -5%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg); opacity: 1;}
}

@keyframes animateBlueToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
    to { top: 41.6%; left: 50%; transform: translate(-50%, -50%) scale(0.054) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionBlue {
    from { top: 41.6%; left: 50%; transform: translate(-50%, -50%) scale(0.054) rotate(0deg); opacity: 1;}
    to { top: -36%; left: 36.5%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animatePurpleToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
    to { top: 44.4%; left: 53.2%; transform: translate(-50%, -50%) scale(0.053) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionPurple {
    from { top: 44.4%; left: 53.2%; transform: translate(-50%, -50%) scale(0.053) rotate(0deg); opacity: 1;}
    to { top: 43%; left: 59%; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg); opacity: 1;}
}

.svg-container.svg-container-animation.orange.initial-animation {
    animation: animateOrangeToPetals 1s ease 0.1s forwards;
}
.svg-container.svg-container-animation.green.initial-animation {
    animation: animateGreenToPetals 1s ease 0.2s forwards;
}
.svg-container.svg-container-animation.blue.initial-animation {
    animation: animateBlueToPetals 1s ease 0.3s forwards;
}
.svg-container.svg-container-animation.purple.initial-animation {
    animation: animatePurpleToPetals 1s ease 0.4s forwards;
}

.svg-container.svg-container-animation.orange.second-animation {
    animation: moveToFinalPositionOrange 1s ease 0s forwards;
}
.svg-container.svg-container-animation.green.second-animation {
    animation: moveToFinalPositionGreen 1s ease 0s forwards;
}
.svg-container.svg-container-animation.blue.second-animation {
    animation: moveToFinalPositionBlue 1s ease 0s forwards;
}
.svg-container.svg-container-animation.purple.second-animation {
    animation: moveToFinalPositionPurple 1s ease 0s forwards;
}

}

@media (min-aspect-ratio: 22/9) {
    .svg-container.orange {
    width: 330vh;
    height: 330vh;
    top: 57%; left: 76%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.green {
    width: 270vh;
    height: 270vh;
    top: 55%; left: 12%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
}
.svg-container.blue {
    width: 270vh;
    height: 270vh;
    top: -39%; left: 35.3%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
}
.svg-container.purple {
    width: 190vh;
    height: 190vh;
    top: 43%; left: 55%; transform: translate(-50%, -50%) scale(1.08) rotate(-4deg);
}

@keyframes animateOrangeToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
    to { top: 55.1%; left: 41.7%; transform: translate(-50%, -50%) scale(0.045) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionOrange {
    from { top: 55.1%; left: 41.7%; transform: translate(-50%, -50%) scale(0.045) rotate(0deg); opacity: 1;}
    to { top: 57%; left: 76%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animateGreenToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
    to { top: 47.4%; left: 43.2%; transform: translate(-50%, -50%) scale(0.043) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionGreen {
    from { top: 47.4%; left: 43.2%; transform: translate(-50%, -50%) scale(0.043) rotate(0deg); opacity: 1;}
    to { top: 55%; left: 12%; transform: translate(-50%, -50%) scale(1.08) rotate(8deg); opacity: 1;}
}

@keyframes animateBlueToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
    to { top: 43.3%; left: 46.6%; transform: translate(-50%, -50%) scale(0.062) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionBlue {
    from { top: 43.3%; left: 46.6%; transform: translate(-50%, -50%) scale(0.062) rotate(0deg); opacity: 1;}
    to { top: -39%; left: 35.3%; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); opacity: 1;}
}

@keyframes animatePurpleToPetals {
    from { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.0001) rotate(0deg); opacity: 0; }
    to { top: 47%; left: 50%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
}
@keyframes moveToFinalPositionPurple {
    from { top: 47%; left: 50%; transform: translate(-50%, -50%) scale(0.06) rotate(0deg); opacity: 1;}
    to { top: 43%; left: 55%; transform: translate(-50%, -50%) scale(1.08) rotate(-4deg); opacity: 1;}
}

.svg-container.svg-container-animation.orange.initial-animation {
    animation: animateOrangeToPetals 1s ease 0.1s forwards;
}
.svg-container.svg-container-animation.green.initial-animation {
    animation: animateGreenToPetals 1s ease 0.2s forwards;
}
.svg-container.svg-container-animation.blue.initial-animation {
    animation: animateBlueToPetals 1s ease 0.3s forwards;
}
.svg-container.svg-container-animation.purple.initial-animation {
    animation: animatePurpleToPetals 1s ease 0.4s forwards;
}

.svg-container.svg-container-animation.orange.second-animation {
    animation: moveToFinalPositionOrange 1s ease 0s forwards;
}
.svg-container.svg-container-animation.green.second-animation {
    animation: moveToFinalPositionGreen 1s ease 0s forwards;
}
.svg-container.svg-container-animation.blue.second-animation {
    animation: moveToFinalPositionBlue 1s ease 0s forwards;
}
.svg-container.svg-container-animation.purple.second-animation {
    animation: moveToFinalPositionPurple 1s ease 0s forwards;
}

}


/*  END OF SHAPES CONTAINERS  */ 


.dont-animate-bg-shapes .svg-container.orange,
.dont-animate-bg-shapes .svg-container.green,
.dont-animate-bg-shapes .svg-container.blue,
.dont-animate-bg-shapes .svg-container.purple {
    opacity: 1 !important;
}



/*  IMAGE CONTAINERS  */ 

.image-container {
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Hide anything that goes outside this container */
}


@media (max-aspect-ratio: 9/16) {
    .image-container.orange-images {
        top: 43%;
    left: 48.5%;
    width: 26%;
    height: 82%;
    }

    .image-container.green-images {
    top: 71.5%;
    left: 83%;
    width: 39%;
    height: 44%;
    }

    .image-container.blue-images {
        left: 54.5%;
    top: 81%;
    width: 100%;
    height: 40%;
    }

    .image-container.purple-images {
     top: 73%;
    left: 29%;
    width: 58%;
    height: 57%;
    }
}

@media (max-aspect-ratio: 9/18) {
    .image-container.orange-images {
     top: 51%;
    left: 49.5%;
    width: 23%;
    height: 78%;
    }

    .image-container.green-images {
            top: 77%;
    left: 86%;
    width: 33%;
    height: 40%;
    }

    .image-container.blue-images {
        left: 61%;
        top: 81%;
        width: 72%;
        height: 40%;
    }

    .image-container.purple-images {
               top: 74%;
    left: 27.5%;
    width: 54.5%;
    height: 55%;
    }
}

@media (max-aspect-ratio: 9/21) {
    .image-container.orange-images {
        top: 41%;
    left: 48%;
    width: 32%;
    height: 94%;
    }

    .image-container.green-images {
               top: 64%;
    left: 81%;
    width: 40%;
    height: 40%;
    }

    .image-container.blue-images {
            left: 59%;
    top: 86%;
    width: 76%;
    height: 32%;
    }

    .image-container.purple-images {
    top: 74%;
    left: 32.5%;
    width: 57.5%;
    height: 58%;
    }
}

@media (min-aspect-ratio: 5/9) {
    .image-container.orange-images {
    top: 65%;
    left: 47.5%;
    width: 20%;
    height: 60%;
    }

    .image-container.green-images {
        top: 73%;
    left: 87%;
    width: 24%;
    height: 24%;
    }

    .image-container.blue-images {
    left: 56%;
    top: 88%;
    width: 67%;
    height: 25.5%;
    }

    .image-container.purple-images {
        top: 78%;
    left: 31.5%;
    width: 63.5%;
    height: 63.5%;
    }
}

@media (min-aspect-ratio: 6/9.6) {
    .image-container.orange-images {
         top: 65%;
    left: 48.5%;
    width: 21%;
    height: 58.5%;
    }

    .image-container.green-images {
        top: 68%;
    left: 82.5%;
    width: 36%;
    height: 37.5%;
    }

    .image-container.blue-images {
        left: 56%;
    top: 88%;
    width: 67%;
    height: 25.5%;
    }

    .image-container.purple-images {
        top: 73%;
    left: 29%;
    width: 58.5%;
    height: 56.5%;
    }
}

@media (min-aspect-ratio: 5/6) {
    .image-container.orange-images {
    top: 70%;
    left: 48.5%;
    width: 29%;
    height: 87.5%;
    }

    .image-container.green-images {
        top: 85%;
    left: 88%;
    width: 32%;
    height: 30%;
    }

    .image-container.blue-images {
    top: 85%;
    left: 56%;
    width: 81%;
    height: 32%;
    }

    .image-container.purple-images {
        top: 73.5%;
    left: 32%;
    width: 64%;
    height: 59.5%;
    }
}

@media (min-aspect-ratio: 1/1) {
    .image-container.orange-images {
    top: 59%;
    left: 56.5%;
    width: 33%;
    height: 99.5%;
    }

    .image-container.green-images {
            top: 85%;
    left: 83%;
    width: 35%;
    height: 35%;
    }

    .image-container.blue-images {
        top: 85.5%;
    left: 56%;
    width: 81%;
    height: 32%;
    }

    .image-container.purple-images {
        top: 72.5%;
    left: 33%;
    width: 68%;
    height: 61.5%;
    }
}

@media (min-aspect-ratio: 8/7) {
    .image-container.orange-images {
        top: 64%;
    left: 54.5%;
    width: 37%;
    height: 115.5%;
    }

    .image-container.green-images {
    top: 86%;
    left: 84%;
    width: 34%;
    height: 34%;
    }

    .image-container.blue-images {
        top: 84.5%;
    left: 52%;
    width: 83%;
    height: 34%;
    }

    .image-container.purple-images {}
}

@media (min-aspect-ratio: 5/4) {
    .image-container.orange-images {
            top: 63.5%;
    left: 54.5%;
    width: 37%;
    height: 115.5%;
    }

    .image-container.green-images {}

    .image-container.blue-images {
        top: 87%;
    left: 55%;
    width: 77%;
    height: 29%;
    }

    .image-container.purple-images {}
}

@media (min-aspect-ratio: 4/3) {
    .image-container.orange-images {
    top: 63%;
    left: 50%;
    width: 36%;
    height: 104%;
    }

    .image-container.green-images {
       top: 74.6%;
    left: 77.5%;
    width: 35%;
    height: 40.4%;
    }

    .image-container.blue-images {
    left: 50%;
    top: 84.4%;
    width: 87%;
    height: 33%;
    }

    .image-container.purple-images {
    top: 58%;
    left: 46%;
    width: 94%;
    height: 92%;
    }
}

@media (min-aspect-ratio: 14/9) {
    .image-container.orange-images {
            top: 54%;
    left: 51%;
    width: 37%;
    height: 104%;
    }

    .image-container.green-images {
            top: 74%;
    left: 77.5%;
    width: 34%;
    height: 40%;
    }

    .image-container.blue-images {
        left: 50%;
    top: 84%;
    width: 87%;
    height: 33%;
    }

    .image-container.purple-images {
            top: 61%;
    left: 46%;
    width: 91%;
    height: 85%;
    }
}

@media (min-aspect-ratio: 16/9) {
    .image-container.orange-images {
            top: 55%;
    left: 55%;
    width: 37.3%;
    height: 103%;
    }

    .image-container.green-images {
            top: 67.5%;
    left: 72.5%;
    width: 38%;
    height: 42.5%;
    }

    .image-container.blue-images {}

    .image-container.purple-images {}
}

@media (min-aspect-ratio: 18/9) {
    .image-container.orange-images {
    top: 49%;
    left: 54%;
    width: 37.3%;
    height: 100%;
    }

    .image-container.green-images {
            top: 66.5%;
        left: 72.5%;
   width: 43.2%;
    height: 42.5%;
    }

    .image-container.blue-images {}

    .image-container.purple-images {
        top: 57%;
    left: 46%;
    width: 88%;
    height: 85%;
    }
}

@media (min-aspect-ratio: 22/9) {
    .image-container.orange-images {
    top: 50%;
    left: 53%;
    width: 44.3%;
    height: 100%;
    }

    .image-container.green-images {
            top: 50.5%;
    left: 52.5%;
    width: 42.2%;
    height: 40.5%;
    }

    .image-container.blue-images {
        left: 50%;
    top: 84%;
    width: 89%;
    height: 35%;
    }

    .image-container.purple-images {
            top: 57%;
    left: 45%;
    width: 85%;
    height: 77%;
    }
}



.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    filter: grayscale(100%);
    mix-blend-mode: overlay;
    opacity: 0; /* Start with the image hidden, Javascript makes it visible */
    transition: opacity 2s ease;
}