Ahí (post de rol)

<div class="MM055" style="color: #008686;"><div class="MM055-ava"><div style="background-image: url(https://i.postimg.cc/SRBhf1Tt/09.png);"></div><span class="th th-leaf-1"></span></div>

<div class="MM055-txt"><div class="MM055-in"><b>Ahí, aquí o allá<span><i class="th th-leaf-1"></i><i class="th th-leaf-1"></i><i class="th th-leaf-1"></i></span></b>

<div class="MM055-xx"><b>Gummies carrot cake</b> tiramisu pie pudding cotton candy danish. Donut pudding halvah. Cotton candy gummies bear claw oat cake jelly-o lemon drops.

Cake jujubes tiramisu jujubes lollipop. Chocolate pudding pie jujubes fruitcake jelly beans. Pie gingerbread topping chocolate cake cupcake cheesecake powder toffee brownie.

Macaroon sugar plum caramels candy canes liquorice. Cheesecake toffee muffin. Topping biscuit tootsie roll.

Toffee donut wafer. Macaroon jelly beans jujubes cake gummies bear claw marshmallow sweet carrot cake. Sweet jelly beans marzipan lemon drops pastry jelly-o cookie caramels.

Chocolate chupa chups macaroon biscuit topping ice cream. Macaroon lemon drops lollipop tootsie roll apple pie. Gingerbread macaroon bonbon dessert gummi bears chupa chups pie gummi bears. Sweet roll tootsie roll candy gingerbread.</div><a class="miMM055" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a></div></div></div><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><style>.MM055, .MM055 * { box-sizing: border-box; scrollbar-color: #0002 #0002 !important; scrollbar-width: thin; transition: .5s; } .MM055 br { display: none; } .MM055 { width: 500px; margin: auto; display: flex; align-items: flex-start; } .MM055 > div { border: 1px solid #EEE; background: #FFF6; border-radius: 6px; padding: 5px; } .MM055-ava { width: 110px; height: 150px; position: sticky; top: 50px; } .MM055-ava::before { content: ""; position: absolute; left: 100%; width: 5px; height: 16px; background: #EEE; top: calc(50% - 8px); clip-path: polygon(0 0, 0% 100%, 100% 50%); } .MM055-ava > span { position: absolute; top: calc(100% - 3px); width: 30px; height: 30px; background: #CCC; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; border: 1px solid #FFF; } .MM055-txt { flex: 1; margin-left: 10px; min-height: 200px; } .content { overflow: visible !important; } .MM055-ava > div { height: 100%; border: 1px solid #EEE; border-radius: 3px; background-position: center; background-size: cover; } .MM055-in { min-height: 200px; background: #FFF; border-radius: 3px; font: 12px Calibri; text-align: center; padding: 1px; } .MM055-in > b { display: flex; padding: 3px 7px; box-shadow: inset 0 0 0 50px; -webkit-text-fill-color: #FFF; letter-spacing: 2px; font-size: 10px; align-items: center; } .MM055-in > b > span { margin: -2px -2px 0 auto; } .MM055-in > b i { margin-left: 6px; font-size: 8px; animation: zoom 1s infinite alternate; } .MM055-in > b i + i { animation-delay: .4s; } .MM055-in > b i + i + i { animation-delay: .8s } .MM055-xx { margin-top: 1px; padding: 30px; background: #CCC; -webkit-text-fill-color: #333; text-align: justify; } .MM055-xx > * { -webkit-text-fill-color: initial; } @keyframes zoom { from {transform: scale(1.5); opacity: 1;} to {transform: scale(1); opacity: .6;} } .MM055-xx br { display: block; } .MM055-xx br + br { margin: 5px; } .miMM055 { display: block; letter-spacing: 5px; transition: 0.5s; text-transform: uppercase; font: bold 10px Calibri; box-shadow: inset 0 0 0 50px; color: inherit !important; margin-top: 1px; -webkit-text-fill-color: #FFF; padding: 0 0 1px 5px; } .miMM055:hover { letter-spacing: 10px; }</style>