Rules Box

<link href="https://fonts.googleapis.com/css?family=Orbitron:800|Space+Mono:400" rel="stylesheet">
<style>
#hanie-rules{
  position: relative;
  margin: 10px auto;
  width: 400px;
  height: 255px;
  background: #dddddd;
  border-radius: 15px;
  overflow: hidden;
}

#hanie-rules ::-webkit-scrollbar {
  background: transparent;
  width: 8px;
}

#hanie-rules ::-webkit-scrollbar-track {
  background: #dddddd;
  border: 0px solid #fff;
  border-radius: 100px;
}

#hanie-rules ::-webkit-scrollbar-thumb {
  background: #FE4C00;
  border: 0px solid #fff;
  border-radius: 100px;
}

#hanie-rules .text-bg{
  position: absolute;
  top: 38px;
  left: 45px;
  width: 310px;
  height: 100px;
  background: #ffffff;
  border-radius: 12px;
}

#hanie-rules .textbox{
  position: absolute;
  top: 21px;
  left: 35px;
  width: 225px;
  height: 56px;
  overflow: auto;
  text-align: justify;
  font-family: 'Space Mono', monospace;
  font-size: 9.5px;
  font-weight: 400;
  text-transform: lowercase;
  line-height: 18px;
  color: #000000;
  padding-right: 15px;
}

#hanie-rules .textbox c{
  color: #FE4C00;
}

#hanie-rules .pointer {
  position: absolute;
  right: 70px;
  bottom: 107px;
  width: 25px;
  height: 25px;
  background: #ffffff;
  transform: rotate(45deg);
}

#hanie-rules .footer-bg{
  position: absolute;
  bottom: -1px;
  left: 0px;
  width: 400px;
  height: 80px;
  background: #000000;
}

#hanie-rules .title{
  position: absolute;
  bottom: 40px;
  left: 45px;
  color: #ffffff;
  text-transform: uppercase;
  text-align: left;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 15px;
  background: #333333;
  padding: 12.5px 30px;
  border-radius: 0px 0px 0px 15px;
}

#hanie-rules .icon{
  position: absolute;
  bottom: 40px;
  right: 45px;
  height: 30px;
  width: 50px;
  background: url(https://i.imgur.com/r89PwJ9.gif);
  background-size: 50px;
  border-radius: 0px 0px 15px 0px;
  border: 5px solid #333333;
}

</style>

<center>
<div id="hanie-rules">

  <div class="pointer"></div>

  <div class="text-bg">
      <div class="textbox">
        <c>01.</c> FEEL FREE TO USE THE TEMPLATE wherever you want!
        <c>02.</c> DON'T HESITATE TO ASK ME IF YOU GOT ANY QUESTIONS.
        <c>03.</c> MINOR CHANGES ARE ALLOWED AS LONG AS YOU LEAVE THE CREDIT AS IT IS.
      </div>
  </div>

  <div class="footer-bg">
      <div class="title">Play By The Rules</div>
      <div class="icon"></div>
  </div>

</div>
</center>