.menu-container{position:relative}div:has(.balloons){overflow:hidden}.balloons{--hue:240;--time:10s;--ease-out:cubic-bezier(0.470, 0.000, 0.745, 0.715);--ratio:1.3;--size:3rem}.balloon{top:80px;opacity:.95;position:absolute;transform:translate3d(-50%,-50%,0) rotate(45deg);width:var(--size);height:var(--size);border-radius:var(--size) var(--size) calc(var(--size) * 0.4) var(--size);box-shadow:inset calc(var(--size) * -0.05) calc(var(--size) * -0.05) calc(var(--size) * 0.5) calc(var(--size) * -0.05) hsl(var(--hue),30%,70%),calc(var(--size) * 0.3) calc(var(--size) * 0.3) calc(var(--size) * 0.15) hsla(var(--hue),20%,50%,.2);animation:float1 var(--time) infinite ease-out}.red{background:red}.yellow{background:#ff0}.blue{background:blue}.green{background:green}.balloon:after{content:'';position:absolute;bottom:calc(var(--size) * -0.005);right:calc(var(--size) * -0.005);border-top:calc(var(--size) * 0.075) solid #fff0;border-bottom:calc(var(--size) * 0.075) solid #fff0;border-right:calc(var(--size) * 0.1) solid hsl(var(--hue),30%,80%);transform:rotate(45deg);border-radius:calc(0.1 * var(--size))}.holder.back{position:relative;z-index:2}.holder.back .balloon:nth-child(1){left:50%;animation:float2 calc(var(--time) * 0.95) infinite cubic-bezier(.47,0,.745,.715);animation-delay:calc(var(--time) * 0)}.holder.back .balloon:nth-child(2){left:20%;animation:float1 var(--time) infinite cubic-bezier(.47,0,.745,.715);animation-delay:calc(var(--time) * 0.32)}.holder.back .balloon:nth-child(3){left:90%;animation:float3 calc(var(--time) * 1.05) infinite cubic-bezier(.47,0,.745,.715);animation-delay:calc(var(--time) * 0.77)}.holder.back .balloon:nth-child(4){left:70%;animation:float1 calc(var(--time) * 0.9) infinite cubic-bezier(.47,0,.745,.715);animation-delay:calc(var(--time) * 0.13)}.holder.back .balloon:nth-child(5){left:35%;animation:float2 calc(var(--time) * 1.02) infinite cubic-bezier(.47,0,.745,.715);animation-delay:calc(var(--time) * 0.56)}.holder.front{position:relative;z-index:4}.holder.front .balloon{box-shadow:inset calc(var(--size) * -0.05) calc(var(--size) * -0.05) calc(var(--size) * 0.5) calc(var(--size) *-0.05) hsl(var(--hue),30%,70%),calc(var(--size) * 0.8) calc(var(--size) * 0.8) calc(var(--size) * 0.4) hsla(var(--hue),20%,50%,.2)}.holder.front .balloon:nth-child(1){left:80%;animation:floatfront1 var(--time) infinite cubic-bezier(.47,0,.745,.715);animation-delay:calc(var(--time) * 0.28)}.holder.front .balloon:nth-child(2){left:35%;animation:floatfront1 var(--time) infinite cubic-bezier(.47,0,.745,.715);animation-delay:calc(var(--time) * 0.14)}.holder.front .balloon:nth-child(3){left:7%;animation:floatfront3 var(--time) infinite cubic-bezier(.47,0,.745,.715);animation-delay:calc(var(--time) * 0.77)}.holder.front .balloon:nth-child(4){left:46%;animation:floatfront2 var(--time) infinite cubic-bezier(.47,0,.745,.715);animation-delay:calc(var(--time) * 0.63)}.holder.front .balloon:nth-child(5){left:75%;animation:floatfront1 var(--time) infinite cubic-bezier(.47,0,.745,.715);animation-delay:calc(var(--time) * 0.89)}@keyframes float1{0%{transform:rotate(40deg) translateY(0) translateX(0)}100%{transform:rotate(50deg) translateY(-85vh) translateX(-85vh)}}@keyframes float2{0%{transform:rotate(55deg) translateY(0) translateX(0)}100%{transform:rotate(45deg) translateY(-85vh) translateX(-85vh)}}@keyframes float3{0%{transform:rotate(45deg) translateY(0) translateX(0)}100%{transform:rotate(35deg) translateY(-85vh) translateX(-85vh)}}@keyframes floatfront1{0%{transform:scale(var(--ratio)) rotate(40deg) translateY(0) translateX(0)}100%{transform:scale(var(--ratio)) rotate(50deg) translateY(-100vh) translateX(-100vh)}}@keyframes floatfront2{0%{transform:scale(var(--ratio)) rotate(55deg) translateY(0) translateX(0)}100%{transform:scale(var(--ratio)) rotate(45deg) translateY(-100vh) translateX(-85vh)}}@keyframes floatfront3{0%{transform:scale(var(--ratio)) rotate(45deg) translateY(0) translateX(0)}100%{transform:scale(var(--ratio)) rotate(35deg) translateY(-85vh) translateX(-100vh)}}