:root{--color1:#ff007f;--color2:#00d2ff}.bubbles{top:0;left:0;width:100%;height:100%;overflow:visible}.bubble,.bubbles{position:absolute}.bubble{border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--color1),var(--color2));opacity:.75;animation:float ease-in-out infinite alternate,morph ease-in-out infinite alternate;mix-blend-mode:screen;transition:transform .3s ease}.bubble:hover{transform:scale(2)}.bubble-1{width:6vw;height:6vw;top:50%;left:-5%;animation-duration:6s,15s}.bubble-1,.bubble-2{max-width:80px;max-height:80px}.bubble-2{width:7vw;height:7vw;bottom:-5%;right:-5%;animation-duration:8s,14s}.bubble-3{width:5.5vw;height:5.5vw;top:40%;left:1%;animation-duration:7s,13s;max-width:80px;max-height:80px}.bubble-4{top:60%;right:-2%;animation-duration:9s,12s}.bubble-4,.bubble-5{width:6vw;height:6vw;max-width:80px;max-height:80px}.bubble-5{top:10%;right:5%;animation-duration:7s,16s}.bubble-6{width:5.5vw;height:5.5vw;top:105%;left:20%;animation-duration:10s,15s}.bubble-6,.bubble-7{max-width:80px;max-height:80px}.bubble-7{width:7vw;height:7vw;top:0;right:35%;animation-duration:11s,14s}@keyframes float{0%{transform:translate(0) scale(1)}to{transform:translate(100px,-100px) scale(1.05)}}@keyframes morph{0%{border-radius:50%}25%{border-radius:70% 40% 50% 60%}50%{border-radius:60% 70% 40% 50%}75%{border-radius:50% 60% 70% 40%}to{border-radius:70% 50% 60% 60%}}