:root{--base_scale: 5vh;--floor: 15vh;--color: #836ee5}*,*:before,*:after{box-sizing:border-box}shape{position:absolute;display:block;left:50%;bottom:0;margin-left:calc(-1 * (var(--base_scale) / 2));margin-bottom:var(--floor)}shape.circle{width:var(--base_scale);height:var(--base_scale);background:var(--color);border-radius:50%}shape.semi-circle{height:calc(var(--base_scale) * 2);width:var(--base_scale);background:var(--color);border-bottom-right-radius:calc(var(--base_scale) * 2);border-top-right-radius:calc(var(--base_scale) * 2)}shape.square{width:var(--base_scale);height:var(--base_scale);background:var(--color)}shape.rectangle{width:calc(var(--base_scale) * 1.5);height:var(--base_scale);background:var(--color)}shape.triangle{width:0;height:0;border-bottom:var(--base_scale) solid var(--color);border-right:var(--base_scale) solid transparent}shape.triangle-2{width:0;height:0;border-top:var(--base_scale) solid var(--color);border-left:var(--base_scale) solid transparent}shape.bounce-up{--bounce-variance: 0vh;--bounce-height: calc( -1 * 50vh - calc(var(--base_scale) - var(--floor) + var(--bounce-variance)) );transition:transform .4s cubic-bezier(.215,.61,.355,1);transform:translateY(var(--bounce-height)) rotate(0)}shape.bounce-down{transition:transform .3s cubic-bezier(.6,.04,.98,.335);transform:translateY(0) rotate(var(--rotation))}a{position:fixed;bottom:0;text-align:center;width:100%;padding:10px;color:#0000004d;z-index:12;font-size:.9em}