:root{--color-1:#fff;--color-2:#fff;--color-3:#3cce49;--color-4:#3cce49;--blur:blur(150px)}.gradient-container{background:#fff;background:var(--color-2);flex-wrap:wrap;height:100vh;overflow:hidden;position:absolute;right:0;top:0;width:100vw;z-index:-10}.gradient-color{animation-direction:alternate;animation-duration:5s;animation-iteration-count:infinite;animation-name:animate;animation-timing-function:ease-in-out;border-radius:30% 80% 75% 40%/40% 40% 70% 50%;display:flex;height:50px;opacity:.4;position:absolute;width:100px}@keyframes animate{0%{border-radius:30% 70% 70% 30%/30% 30% 70% 60%;transform:scale(2) rotate(0) translate(10%,10%)}to{border-radius:88% 10% 22% 58%/73% 56% 34% 77%;transform:scale(2) rotate(180deg) translate(10%,40%)}}.gradient-color:first-child{background-color:#fff;background-color:var(--color-1);height:400px;width:300px}.gradient-color:nth-child(2){background-color:#fff;background-color:var(--color-2);height:400px;width:300px}.gradient-color:nth-child(3){background-color:#3cce49;background-color:var(--color-3);height:200px;right:0;width:300px}.gradient-color:nth-child(4){background-color:#3cce49;background-color:var(--color-4);height:200px;top:200px;width:200px}.gradient-backdrop{-webkit-backdrop-filter:blur(150px);backdrop-filter:blur(150px);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);background:transparent;display:block;height:100vh;left:0;position:absolute;top:0;width:100%}