[dohtml]<script src="//pull.cappuccicons.com/cpf.js"></script><link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Recursive:wght@300;400&display=swap" rel="stylesheet"> <center><div class="rthg17con"><div class="RTHG17"><div class="r17heart"><i class="cp cp-heart"></i></div><div class="r17notif"><div class="r17nmail"><i class="cp cp-envelope"></i><div class="r17nsparkle"><i class="cp cp-stars"></i></div></div><div class="r17ntext">new messages</div></div> <div class="r17hearticon"><img src="ICON URL"></div> <div class="r17con"><div class="r17cverticalbar"><div class="r17cvbname">...texting</div> <div class="r17cvbbackbttn"><i class="cp cp-arrow-up"></i></div></div><div class="r17rightside"> <div class="r17topbar">@[first last]</div><div class="r17rtextscon"> <div class="r17sent"><img src="img urlor delete this line"></div> <div class="r17sent">what your character said</div> <div class="r17received">what their character said</div> <div class="r17sent">what your character said</div> COPY & PASTE THE ABOVE LINES AS MANY AS YOU NEED, IT WILL SCROLL </div><div class="r17rtextinput"><div class="r17rtextinp">Type here... <i class="cp cp-arrow-right"></i></div> <div class="r17rti"><div class="r17rtiemoji"><i class="cp cp-image"></i></div> <div class="r17rtiemoji"><i class="cp cp-phone"></i></div> <div class="r17rtiemoji"><i class="cp cp-info"></i></div></div> </div></div></div><div class="r17heartbttn"><i class="cp cp-heart"></i></div></div></div></center> <center><div id="cttwfaecredit"><a href="http://cttw.jcink.net/index.php?showuser=2573">thanks fae !</a></div></center> <style> .rthg17con { background: transparent;  height: 400px;  position: relative;  width: 450px;    --paleric: 171,114,101;  --orangeric: 144,60,41;  --darkric: 140,40,40;  --appleric: 172,0,0;  --grayric: 177,174,174;  --blackric: 28,27,25; } .rthg17con .RTHG17 {  background: linear-gradient(40deg, rgba(var(--darkric), 1) 50%, rgba(var(--appleric), 1) 100%);  color: rgba(var(--grayric), 1);  border-radius: 20px;  font-family: 'Recursive';  font-weight: 300;  height: 200px;  position: relative;  top: 100px;  width: 200px;  transition: 0.4s ease; }  .rthg17con:hover .RTHG17 {    height: 400px;    top: 0px;    width: 250px;    transition: 0.4s ease;  } .rthg17con .RTHG17 .r17heart {  animation: 0.8s r17heart linear infinite;  color: rgba(var(--appleric), 1);  font-size: 400px;  left: -85px;  line-height: 30px;  height: 30px;  position: absolute;  text-shadow: 0px 0px 20px rgba(var(--orangeric), 1);  top: -120px;  transform: rotate(10deg);  transition: 0.4s ease;  width: 30px;  z-index: 1; }  .rthg17con:hover .RTHG17 .r17heart {    left: -150px;    top: 190px;    transform: scale(0.5);    transition: 0.4s ease;  }  @keyframes r17heart {    0% { font-size: 400px; }    20% { font-size: 400px; }    40% { font-size: 405px; }    50% { font-size: 400px; }    60% { font-size: 405px; }    80% { font-size: 400px; }    100% { font-size: 400px; }  } .RTHG17 .r17notif {  animation: 0.8s r17notif linear infinite;  background: rgba(var(--darkric), 0.7);  border: 1px solid rgba(var(--paleric), 1);  border-radius: 10px;  color: rgba(var(--paleric), 1);  display: flex;  justify-content: center;  height: 60px;  left: -10px;  line-height: 60px;  position: absolute;  text-transform: uppercase;  top: 70px;  width: 200px;  z-index: 2;  transition:  0.4s ease; } .rthg17con:hover .RTHG17 .r17notif {  left: -130px;  opacity: 0;  top: 250px;  transition: 0.4s ease; }  @keyframes r17notif {    0% { transform: rotate(0deg); }    25% { transform: rotate(2deg); }    50% { transform: rotate(0deg); }    75% { transform: rotate(-2deg); }    100% { transform: rotate(0deg); }  }    .RTHG17 .r17notif .r17nmail {      font-size: 25px;      position: relative;      width: 40px;    }      .RTHG17 .r17notif .r17nmail .r17nsparkle {        color: rgba(var(--grayric), 1);        font-size: 14px;        left: 0px;        position: absolute;        text-shadow: 0px 0px 5px rgba(var(--appleric), 1);        top: -10px;      }       .rthg17con .RTHG17 .r17hearticon {  bottom: 42px;  border: 1px solid rgba(var(--paleric), 1);  border-radius: 50%;  height: 110px;  left: -100px;  opacity: 0;  overflow: hidden;  position: absolute;  width: 110px;  z-index: 2;  transition: 0.4s ease; }  .rthg17con:hover .RTHG17 .r17hearticon {    opacity: 1;    transition: 0.4s ease;  }  .rthg17con .RTHG17 .r17hearticon img {    height: auto;    width: 100%;  }   .rthg17con .RTHG17 .r17con {  background: rgba(var(--paleric), 0.8);  height: 300px;  opacity: 0;  position: relative;  top: 20px;  width: 200px;  transition: 0.4s ease; }  .rthg17con:hover .RTHG17 .r17con {    opacity: 1;    transition: 0.4s ease;  }  .rthg17con .RTHG17 .r17con .r17cverticalbar {    background: rgba(var(--paleric), 1);    color: rgba(var(--blackric), 1);    display: flex;    flex-wrap: none;    flex-direction: row;    height: 20px;    line-height: 25px;    justify-content: space-between;    left: -140px;    position: absolute;    top: 140px;    transform: rotate(-90deg);    width: 300px;    transition: 0.4s ease;  }    .rthg17con .RTHG17 .r17con .r17cverticalbar .r17cvbbackbttn i {        color: rgba(var(--appleric), 1);        text-decoration: none;        transition: 0.4s ease;      }        .rthg17con .RTHG17 .r17con .r17cverticalbar .r17cvbbackbttn:hover i {          color: rgba(var(--blackric), 1);          transition: 0.4s ease;        }    .rthg17con .RTHG17 .r17con .r17cverticalbar .r17cvbname {      font-size: 14px;      text-align: right;      text-transform: uppercase;      width: 280px;    }         .rthg17con .RTHG17 .r17con .r17rightside {  height: 300px;  position: absolute;  right: 0px;  width: 180px; } .rthg17con .RTHG17 .r17con .r17rightside .r17topbar {  background: rgba(var(--orangeric), 1);  border-bottom: 1px solid rgba(var(--blackric), 0.6);    font-size: 13px;    height: 20px;    line-height: 20px;    padding-left: 5px;    position: relative;    text-align: left;    text-transform: uppercase;    z-index: 2;  }        .rthg17con .RTHG17 .r17con .r17rightside .r17topbar a {        color: rgba(var(--grayric), 1);        text-decoration: none;        transition: 0.4s ease;      }        .rthg17con .RTHG17 .r17con .r17rightside .r17topbar a:hover {          color: rgba(var(--blackric), 1);          transition: 0.4s ease;        }  .rthg17con .RTHG17 .r17con .r17rightside .r17rtextscon {    font-size: 12px;    line-height: 14px;    height: 200px;    padding-top: 10px;    padding-right: 10px;    position: relative;    overflow: auto;    text-align: justify;    z-index: 1;  }     .rthg17con .RTHG17 .r17con .r17rightside .r17rtextscon::-webkit-scrollbar {       width: 5px;     }     .rthg17con .RTHG17 .r17con .r17rightside .r17rtextscon::-webkit-scrollbar-track {       background: transparent;       border: 1px solid rgba(var(--blackric), 0.5);       border-top: 0px solid #000;       border-bottom: 0px solid #000;       border-right: 0px solid #000;     }     .rthg17con .RTHG17 .r17con .r17rightside .r17rtextscon::-webkit-scrollbar-thumb {       background: rgba(var(--darkric), 1);       border: 1px solid rgba(var(--blackric), 0.5);     }      .rthg17con .RTHG17 .r17con .r17rightside .r17rtextscon img {        height: auto;        margin-bottom: -5px;        width: 140px;      }    .rthg17con .RTHG17 .r17con .r17rightside .r17rtextscon .r17sent {      background: rgba(var(--appleric), 1);      border-radius: 5px 5px 0px 5px;      left: 22px;      margin-bottom: 10px;      padding: 5px;      position: relative;      width: 140px;    }    .rthg17con .RTHG17 .r17con .r17rightside .r17rtextscon .r17received {      background: rgba(var(--orangeric), 1);      border-radius: 5px 5px 0px 5px;      left: 5px;      margin-bottom: 10px;      padding: 5px;      position: relative;      width: 140px;    } .rthg17con .RTHG17 .r17con .r17rightside .r17rtextinput {   height: 70px;   position: relative;   margin: 5px; }   .rthg17con .RTHG17 .r17con .r17rightside .r17rtextinput .r17rtextinp {     background: rgba(var(--grayric), 0.8);     border: 1px solid rgba(var(--darkric), 0.8);     border-radius: 8px;     color: rgba(var(--blackric), 0.7);     font-size: 11px;     height: 15px;     left: 10px;     line-height: 15px;     padding: 2px 5px;     position: relative;     text-align: justify;     width: 130px;   }     .rthg17con .RTHG17 .r17con .r17rightside .r17rtextinput .r17rtextinp i {       background: rgba(var(--blackric), 0.2);       border-radius: 50%;       color: rgba(var(--appleric), 1);       float: right;       padding: 0px 2px;       position: relative;       line-height: 15.5px;       transition: 0.4s ease;     }     .rthg17con .RTHG17 .r17con .r17rightside .r17rtextinput .r17rtextinp:hover i {       background: rgba(var(--orangeric), 0.4);             transition: 0.4s ease;     } .rthg17con .RTHG17 .r17con .r17rightside .r17rtextinput .r17rti {   display: flex;   justify-content: center;   margin-top: 6px;   padding-left: 20px;   position: relative;   width: auto; }   .rthg17con .RTHG17 .r17con .r17rightside .r17rtextinput .r17rti .r17rtiemoji {     background: rgba(var(--grayric), 0.3);     border-radius: 10px;     color: rgba(var(--orangeric), 1);     height: 30px;     line-height: 30px;     margin: 0px 5px;     position: relative;     width: 40px;     transition: 0.4s ease;   }     .rthg17con .RTHG17 .r17con .r17rightside .r17rtextinput .r17rti .r17rtiemoji:hover {       background: rgba(var(--grayric), 0.8);       color: rgba(var(--appleric), 1);       transition: 0.4s ease;     } .rthg17con .RTHG17 .r17heartbttn {   background: transparent;   bottom: 15px;   color: rgba(var(--darkric), 1);   font-size: 50px;   height: 50px;   left: 100px;   opacity: 0;   text-shadow: 0px 0px 5px rgba(var(--paleric), 1), 0px 0px 5px rgba(var(--paleric), 1);   width: 50px;   position: absolute;   transition: 0.4s ease; }   .rthg17con .RTHG17:hover .r17heartbttn {     opacity: 1;     transition: 0.4s ease;   } #cttwfaecredit {  background: #000;  color: #fff;  font-size: 11px;  line-height: 14px;  margin: 10px;  opacity: 0.2; position: relative;  padding: 0px 4px;  text-transform: lowercase;  transition: 0.2s ease;  width: 70px; z-index: 100; } #cttwfaecredit a {  color: #fff;  text-decoration: none; } #cttwfaecredit:hover {  font-style: italic;  opacity: 1;  transition: 0.2s ease; } </style>[/dohtml]