24. bubble [recode]

<!-- hello!  this code is a second attempt at one of the first ones I made, bubble.  it's a bit better/more responsive than the original, but will probably still break on smaller screens. use it at your own risk, is what I'm saying here. -->

<div class="container text-dark" style="max-width: 500px;">
   <div class="card rounded-circle" style="background-image: linear-gradient(#CAE3F3, #BDE8D9); padding: 17%;">
      <div class="m-auto" style="height: 300px; overflow-y: auto; background-color: #EBF3F1; border-radius: .25rem; padding: 20px;">

         <!-- character name and quick info -->
         <div class="text-center">
            <h2 class="mb-0" style="color: #66B2B4;">character name</h2>
            <h6 style="color: #808080;">pronouns . info . info</h6>
         </div>

         <!-- main text -->
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>

         <!-- code credit -->
         <p style="color: #66B2B4;" class="text-center"> code by <a href="https://toyhou.se/snail-legs" style="color: #66B2B4; text-decoration: underline;">snail-legs</a></p>

      </div>
   </div>
</div>