Just a Bit of Honey - Light Version 2

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Raleway" rel="stylesheet">
<style>
 .seonga {height: 377px; position: relative; width: 490px; background: #CCCCCC; border: 1px solid #9E5252;}
 .jjypica {position: absolute; height: 350px; border: 1px solid #9e5252; top: 14px; left: 220px; opacity: .75; z-index: 1}
 .trianglea {position: absolute; top: 14px; left: 220px; height: 0px; width: 0px; border-style: solid; border-width: 352px 0 0 200px; border-color: transparent transparent transparent #CCCCCC; z-index: 3}
 .setagboxa {padding: 10px; border-top: 1px solid #9E5252; border-right: 1px solid #9E5252; height: 150px; width: 100px; position: absolute; left: 115px; top: 22px; color: #7C807E; font-size: 10px; font-style: italic; text-align: right; font-family: 'Raleway', sans-serif;}
 .sehovera {top: 15px; height: 350px; width: 258px; position: absolute; background: rgba(204,204,204,.65); left: 220px; opacity: 0; z-index: 2; transition: .7s ease-in-out; -webkit-transition: .7s ease-in-out; -moz-transition: .7s ease-in-out;-o-transition: .7s ease-in-out;}
 .sehovera:hover {opacity: 1; transition: .7s ease-in-out; -webkit-transition: .7s ease-in-out; -moz-transition: .7s ease-in-out;-o-transition: .7s ease-in-out;}
 .seboxa {border-top: 1px dotted #9E5252; border-bottom: 1px dotted #9E5252; height: 350px; width: 170px; padding: 10px; position: absolute; top: 14px; left: 19px; text-align: justify; font-size: 11px; font-family: 'Raleway', sans-serif; overflow: auto; color: #7C807E;}
 .seboxa b {font-weight: normal; font-size: 13px; color: #9E5252;}
 .selinea {height: 340px; width: 0px; border-left: 1px dotted #9E5252; position: absolute; top: 20px; left: 12px;}
 .sewordsa {height: 30px; width: 327px; position: absolute; top: 205px; z-index: 5; left: 155px; font-family: 'Abril Fatface', cursive; font-size: 18px; color: #9E5252; transform: rotate(60deg); -webkit- transform: rotate(60deg); -moz- transform: rotate(60deg); -o- transform: rotate(60deg); -ms- transform: rotate(60deg); line-height: 1}
 .secredita {position: absolute; font-size: 8px; font-family: monospace; top: 365px; left: 480px;}
 .secredita a {text-decoration: none; color: #9E5252}
</style>
<center>
 <div class="seonga">
 <div class="jjypica"><img src="https://placehold.it/258x350" style="height: 100%;"></div>
 <div class="trianglea"></div>  
 <div class="sehovera"><div class="setagboxa">test, super far over to get to this but still</div></div>
 <div class="seboxa">test test test test test test test test test test test test. This should scroll so I'm just looking to make sure it does. Test test test test test test test test test test test test test test test. <b>This is what bolding looks like. <i>This is bolded italics.</i></b> <i>Just italics.</i> Test test test test test test test test test test test test test test test.<br>test test test test test test test test test test test test. This should scroll so I'm just looking to make sure it does. Test test test test test test test test test test test test test test test. <b>This is what bolding looks like. <i>This is bolded italics.</i></b> <i>Just italics.</i> Test test test test test test test test test test test test test test test.<p>test test test test test test test test test test test test. This should scroll so I'm just looking to make sure it does. Test test test test test test test test test test test test test test test. <b>This is what bolding looks like. <i>This is bolded italics.</i></b> <i>Just italics.</i> Test test test test test test test test test test test test test test test.<br></div>
 <div class="selinea"></div>
 <div class="sewordsa">lyrics and words go  here! nice and long tbh</div>
  <div class="secredita"><a href="https://rpginitiative.com/profile/2592-penny/">♔</a></div>
 </div>
</center>