.floating-image{animation:float 5s ease-in-out infinite;animation-delay:calc(var(--index) * .75s);transition:all 1s;left:50%;top:50%;width:200px;height:200px}@media (min-width:40rem){.floating-image{width:250px;height:250px}}@keyframes float{0%,to{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(.2rem) translatex(.2rem) rotate(2deg)}}#BearShield{--angle:315deg;--radius-small:220px;--radius-large:440px}#Gardeners{--angle:8deg;--radius-small:220px;--radius-large:440px}#GreenShield{--angle:185deg;--radius-small:220px;--radius-large:440px}#HelpingPeople{--angle:135deg;--radius-small:220px;--radius-large:440px}#WaterShield{--angle:65deg;--radius-small:220px;--radius-large:380px}#GrandmaShield{--angle:245deg;--radius-small:220px;--radius-large:420px}.floating-image{--radius:var(--radius-small);--current-radius:var(--radius);position:absolute;left:calc(50% + cos(var(--angle)) * var(--current-radius));top:clamp(0%,calc(50% + sin(var(--angle)) * var(--current-radius)),100%);transform:translate(-50%,-50%);@starting-style{--current-radius:calc(var(--radius) * 1.3)}}@media (min-width:640px){.floating-image{--radius:var(--radius-large)}}