~CODE~ Pink scroll box + auto image resize

  <div class="box-border">

  <div class="scroll-container">

    <div class="content">

      <center>

        <h2>Hi! My name is</h2> <h3> -redacted-</h3>

     <img src="https://64.media.tumblr.com/12bbfa309942db4944603c4a8fa7c208/47bdbb1709c26cc2-b6/s400x600/d96d3c06ebedf09200a6500f37525f86ee40220b.jpg">

        <p>  words words words

          words </p>

        <p>words</p>

        <p> words </p>

     <img src="https://64.media.tumblr.com/94a44bdc6d8d4953960b40b533d002a4/7a3fe6bd38059818-13/s250x400/e882d8d8df69c13e6bd8ac29aa753fd6ebe72609.jpg">

        <h1> words</h1>

     </center>

    </div>

    </div>

    </div>

<style>

.scroll-container {

  width: 300px;

  height: 300px;

  overflow: auto;

  position: relative;

  border: solid hotpink;

  background-color: #fff2f9;

}

.content {

  height: 800px; /* Example content height */

  padding: 5px;

  font-family: monospace;

  color:hotpink;

   text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

 font-size: 20px;

}

.content img{

  width: 100%;

}

/* Custom Scrollbar Styles */

.scroll-container::-webkit-scrollbar {

  width: 12px;

}

.scroll-container::-webkit-scrollbar-track {

  background: pink;

  border: solid 1px

}

.scroll-container::-webkit-scrollbar-thumb {

  background: hotpink;

  border: solid 1px;

}

.scroll-container::-webkit-scrollbar-thumb:hover {

  background: deeppink;

}

.box-border{

  border:solid 2px;

  width: 307px;

}

</style>