#container{width:100%;max-width:500px;aspect-ratio:1/1;position:relative;margin:0 auto;background:#fffbed}#container::after{content:'';display:block;width:100%;height:100%;background-color:#2a574d;position:absolute;left:0;right:0;top:0;border-radius:50%;clip-path:circle(150% at 50% 218%)}#container::before{content:'';display:block;width:100%;height:100%;background-color:#9dbeb7;position:absolute;left:0;right:0;top:0;border-radius:50%}canvas{position:relative;aspect-ratio:1/1;z-index:2}#cloud{background:#fff;width:300px;height:100px;border-radius:150px;box-shadow:10px 10px rgba(0,0,0,.2);animation:move 16s ease-in-out infinite;position:absolute;top:0;bottom:10%;left:0;right:0;margin:auto;z-index:1;opacity:.5}#cloud:nth-child(2){animation-delay:-4s;bottom:0;scale:0.7}#cloud:after{content:'';background:rgba(255,255,255);position:absolute;width:100px;height:100px;border-radius:50%;top:-50px;left:50px}#cloud:before{content:'';background:rgba(255,255,255);position:absolute;width:170px;height:150px;border-radius:50%;top:-90px;right:40px}@keyframes move{0%{transform:translatex(-100px)}50%{transform:translatex(100px)}100%{transform:translatex(-100px)}}