@import"https://fonts.googleapis.com/css2?family=Hind:wght@700&family=Varela+Round&display=swap";*{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}#app{display:flex;position:relative;flex-direction:column-reverse;align-items:flex-end;max-width:850px;min-width:850px;transform-origin:top;transform:scale(0.5) translateX(-440px)}.dialogue{position:relative;display:flex;max-height:.5;min-height:150px;min-width:95%;max-width:95%;margin:30px}.dialogue-blobs{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:stretch;filter:url("#fancy-goo");transform:scale(0);animation:scale-up .6s cubic-bezier(0.34, 1.56, 0.64, 1) .2s 1 normal forwards}.dialogue-blob-top{position:absolute;top:0;width:100%;height:75%;background-color:#fdf8e3;border-radius:40% 40% 30% 30%/150% 150% 150% 150%;animation:blob 1.5s cubic-bezier(0.37, 0, 0.63, 1) .3s alternate;animation-iteration-count:6;transform-origin:center}.dialogue-blob-bottom{position:absolute;bottom:0;width:94%;height:40%;background-color:#fdf8e3;border-radius:5% 5% 20% 20%/100% 100% 100% 100%;animation:blob 1s alternate cubic-bezier(0.37, 0, 0.63, 1);animation-iteration-count:3;transform-origin:center}.dialogue-character-wrap{position:absolute;animation:character .6s alternate cubic-bezier(0.37, 0, 0.63, 1);animation-iteration-count:6}.dialogue-character{display:inline-block;margin-right:auto;padding:.5rem 2rem;font-family:"Varela Round",sans-serif;font-size:2rem;color:#482016;background-color:#dd8530;border-radius:30%/100% 100% 120% 120%;transform:perspective(2rem) rotateX(1deg) rotateZ(-9deg) translateX(20%) translateY(-45%) scale(0);animation:fade-character .3s cubic-bezier(0.34, 1.56, 0.64, 1) .3s 1 normal forwards}.dialogue-text{position:relative;width:100%;padding:1em 1.2em 1em 1.5em;font-family:"Hind",sans-serif;font-size:3rem;line-height:1.5em;color:#807256}@keyframes blob{from{transform:rotate(0.3deg) scale(1)}to{transform:rotate(-0.3deg) scale(0.99)}}@keyframes character{from{transform:translateY(0)}to{transform:translateY(3px)}}@keyframes scale-up{0%{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-character{from{transform:perspective(2rem) rotateX(1deg) rotateZ(0deg) translateX(20%) translateY(-45%) scale(0.8);opacity:0}to{transform:perspective(2rem) rotateX(1deg) rotateZ(-6deg) translateX(20%) translateY(-45%) scale(1);opacity:1}}