[dohtml]<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">


<div id="ping">
<input type="checkbox" id="png1">
<label for="png1">
 <div class="imgg">
 <img src="CHARACTER 1 70X70 ICON IMG, WILL RESIZE">
 <scr></scr>
 </div>
</label>

<input type="checkbox" id="png2">
<label for="png2">
<div class="imgg">
 <img src="CHARACTER 2 70X70 ICON IMG, WILL RESIZE">
   <scr></scr>

 </div></label>

<input type="checkbox" id="png3">
<label for="png3">  <div class="imgg">
 <img src="CHARACTER 3 70X70 ICON IMG, WILL RESIZE">
   <scr></scr>

 </div></label>

<input type="checkbox" id="png4">
<label for="png4">  <div class="imgg">
 <img src="CHARACTER 4 70X70 ICON IMG, WILL RESIZE">
   <scr></scr>

 </div></label>
<div class="lrb">
YOUR MULTI SHIPPER TITLE OR OTHER LYRICS
<iff>YOUR characters</iff>
</div>
<div class="naa" id="ch1">
<span>CHARACTER 1 FIRST LAST</span>
<iff>
 CHARACTER 1 INFO
 <br>CHARACTER 1 INFO
 <br>CHARACTER 1 INFO
</iff>
</div>

<div  id="c1">
<div class="bbg">

<div class="imgb">
<img src="150X350 IMG WILL RESIZE">
<scr></scr>
<div class="nbm">
CHARACTER 1 FIRSTNAME/NICKNAME
</div>
</div>
<div class="lbl">
x
</div>
<div class="ifo">
<span>CHARACTER 1 PRONOUNS</span>
<span>fc: CHARACTER 1 FACE CLAIM</span>
</div>
<div class="typb">
<h1>about</h1>

TEXT HERE

<h1>relationships</h1>

<h2>
platonic
</h2>
TEXT HERE
<h2>
antagonistic
</h2>

TEXT HERE

<h2>
romantic
</h2>
TEXT HERE

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

<div class="naa" id="ch2">
<span>CHARACTER 2 FIRST LAST</span>
<iff>
 CHARACTER 2 INFO
 <br>CHARACTER 2 INFO
 <br>CHARACTER 2 INFO
</iff>
</div>

<div  id="c2">
<div class="bbg">

<div class="imgb">
<img src="150X350 IMG HERE">
<scr></scr>
<div class="nbm">
emily
</div>
</div>
<div class="lbl">
x
</div>
<div class="ifo">
<span>CHARACTER 2 PRONOUNS</span>
<span>fc: CHARACTER 2 FACE CLAIM</span>
</div>
<div class="typb">
<h1>about</h1>
TEXT HERE
<h1>relationships</h1>

<h2>
platonic
</h2>
TEXT HERE<h2>
antagonistic
</h2>
TEXT HERE<h2>
romantic
</h2>
TEXT HERE

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


<div class="naa" id="ch3">
<span>CHARACTER 3 FIRST LAST</span>
<iff>
 CHARACTER 3 INFO
 <br>CHARACTER 3 INFO
 <br>CHARACTER 3 INFO</iff>
</div>

<div  id="c3">
<div class="bbg">

<div class="imgb">
<img src="150X350 IMG HERE WILL RESIZE">
<scr></scr>
<div class="nbm">
CHARACTER 3 FIRSTNAME
</div>
</div>
<div class="lbl">
x
</div>
<div class="ifo">
<span>CHARACTER 3 PRONOUNS</span>
<span>fc: CHARACTER 3 FACE CLAIM</span>
</div>
<div class="typb">
<h1>about</h1>
TEXT HERE

<h1>relationships</h1>

<h2>
platonic
</h2>
TEXT HERE<h2>
antagonistic
</h2>
TEXT HERE<h2>
romantic
</h2>
TEXT HERE

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




<div class="naa" id="ch4">
<span>CHARACTER 4 FIRST LAST</span>
<iff>
 CHARACTER 4 INFO
 <br>CHARACTER 4 INFO
 <br>CHARACTER 4 INFO
</iff>
</div>

<div  id="c4">

<div class="bbg">

<div class="imgb">
<img src="150X350 IMG WILL RESIZE">
<scr></scr>
<div class="nbm">
CHARACTER 4 FIRSTNAME
</div>
</div>
<div class="lbl">
x
</div>
<div class="ifo">
<span>CHARACTER 4 PRONOUNS</span>
<span>fc: CHARACTER 4 FACE CLAIM</span>
</div>
<div class="typb">
<h1>about</h1>
TEXT HERE

<h1>relationships</h1>

<h2>
platonic
</h2>
TEXT HERE

<h2>
antagonistic
</h2>
TEXT HERE

<h2>
romantic
</h2>
TEXT HERE

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


</div>

 <a href="http://cttw.jcink.net/index.php?showuser=14057"><div style="width: 500px; margin: 15px auto; text-align: center; font-size: 12px; font-family: courier; text-transform: lowercase; color: #555;">e v e</div></a>
<style>
#ping {height: 350px; width: 500px; position: relative; margin: auto; background: #FFC4CA; box-shadow: 5px 5px 0 #FFC4CA, -5px -5px 0 #FFC4CA, 5px -5px 0 #FFC4CA, -5px 5px 0 #FFC4CA; border: 1px solid #00017F; text-align: left }
#ping input {display: none}
#ping label {height: 70px; width: 70px; position: absolute; background: none; z-index: 4; cursor: crosshair}
#ping #png1+label {top: 240px; left: 50px}
#ping #png2+label {top: 240px; left: 160px}
#ping #png3+label {top: 240px; right: 160px}
#ping #png4+label {top: 240px; right: 50px}
#ping input+label .imgg {height: 70px; width: 70px; position: absolute; border-radius: 100%; background: #00017F; box-sizing: border-box;}
#ping .imgg img {height: 100%; width: 100%; position: absolute; object-fit: cover; filter: grayscale(100%); border-radius: 100%; mix-blend-mode: screen; object-position: center}
#ping .imgg scr {height: 100%; width: 100%; position: absolute; background: #FFC4CA; mix-blend-mode: multiply; border-radius: 100%; transition: .4s ease}
#ping .lrb {height: 150px; width: 400px; position: absolute; top: 50px; left: 50px; background: none; font-family: poppins; font-weight: 900; text-transform: uppercase; font-style: italic; font-size: 40px; line-height: 1; color: #FFC4CA; text-shadow: 1px 1px 0 #00017F, -1px -1px 0 #00017F, 1px -1px 0 #00017F, -1px 1px 0 #00017F, -2px 2px 0 #00017F, -3px 3px 0 #00017F; transition: .4s ease; display: flex; flex-direction: column; justify-content: space-between}
#ping .lrb iff {font-family: poppins; font-weight: 800; color: #00017F; text-transform: uppercase; font-size: 12px; font-style: italic; letter-spacing: 2px; text-shadow: none}

#ping label:hover .imgg  scr {opacity: 0}
#ping label:hover ~ .lrb {opacity: 0}
#ping .naa {height: 150px; width: 400px; position: absolute; top: 50px; left: 50px; background: none; opacity: 0; transition: .4s ease; display: flex; flex-direction: column; justify-content: space-between}
#ping .naa span {font-family: poppins; font-weight: 900; text-transform: uppercase; font-style: italic; font-size: 40px; line-height: 1.1; color: #FFC4CA; text-shadow: 1px 1px 0 #00017F, -1px -1px 0 #00017F, 1px -1px 0 #00017F, -1px 1px 0 #00017F, -2px 2px 0 #00017F, -3px 3px 0 #00017F; }
#ping .naa iff {font-family: poppins; font-weight: 800; color: #00017F; text-transform: uppercase; font-size: 12px; font-style: italic; letter-spacing: 2px;}

#ping #png1+label:hover ~ #ch1 {opacity: 1}
#ping #png2+label:hover ~ #ch2 {opacity: 1}
#ping #png3+label:hover ~ #ch3 {opacity: 1}
#ping #png4+label:hover ~ #ch4 {opacity: 1}

#ping .bbg {height: 100%; width: 100%; position: absolute; background: #FFC4CA;}
#ping .bbg .imgb {height: 100%; width: 150px; position: absolute; background: #00017F}
#ping .bbg .imgb img {height: 100%; width: 100%; position: absolute; mix-blend-mode: screen; object-fit: cover; filter: grayscale(100%)}
#ping .bbg .imgb scr {height: 100%; width: 100%; position: absolute; mix-blend-mode: multiply; background: #FFC4CA}
#ping .bbg .imgb .nbm {height: 75%; width: 40%; position: absolute; background: none; bottom: 0; right: 0; writing-mode: vertical-rl; transform: rotate(180deg); font-family: poppins; text-transform: uppercase; font-style: italic; font-weight: 900; color: #FFC4CA; box-sizing: border-box; font-size: 35px; padding-top: 20px; text-shadow: 1px 1px 0 #00017F, -1px -1px 0 #00017F, 1px -1px 0 #00017F, -1px 1px 0 #00017F}

#ping .bbg .typb {height: 240px; position: absolute; right: 30px; bottom: 30px; width: 290px; background: none; font-family: roboto; color: #00017F; overflow: auto; font-size: 11px; line-height: 1.6; box-sizing: border-box; text-align: justify; padding-right: 15px}
#ping .bbg .typb h1 {font-family: poppins; color: #00017F; text-align: left; text-transform: uppercase; font-style: italic; font-size: 20px; font-weight: 900}
#ping .bbg .typb h1:nth-child(1) {margin-top: 0}
#ping .bbg .typb h2 {font-family: roboto; font-weight: 300; font-style: italic; font-size: 18px; margin: 10px 0}

#ping .bbg .lbl {height: 40px; width: 40px; position: absolute; background: none; font-family: poppins; text-transform: uppercase; font-weight: 900; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: .3s ease}
#ping .bbg .ifo {height: 40px; width: 290px; position: absolute; display: flex; justify-content: space-between; align-items: center; font-family: roboto; font-weight: 300; font-style: italic; text-transform: lowercase; right: 30px; top: 20px; background: none; font-size: 18px; color: #00017F}

#ping #c1, #ping #c2, #ping #c3, #ping #c4 {height: 100%; width: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: .6s ease;}

#ping #png1:checked+label {height: 40px; width: 40px; top: 0; left: 0; z-index: 7}
#ping #png2:checked+label {height: 40px; width: 40px; top: 0; left: 0; z-index: 7}
#ping #png3:checked+label {height: 40px; width: 40px; top: 0; left: 0; z-index: 7}
#ping #png4:checked+label {height: 40px; width: 40px; top: 0; left: 0; z-index: 7}


#ping input:checked+label .imgg {opacity: 0}
#ping #png1:checked+label ~ #c1 {opacity: 1; z-index: 5}
#ping #png2:checked+label ~ #c2 {opacity: 1; z-index: 5}
#ping #png3:checked+label ~ #c3 {opacity: 1; z-index: 5}
#ping #png4:checked+label ~ #c4 {opacity: 1; z-index: 5}

#ping ::-webkit-scrollbar {width: 10px}
#ping ::-webkit-scrollbar-thumb {border: 1px solid #00017F; background: #FFC4CA}
#ping ::-webkit-scrollbar-track {border: 1px solid #00017F; background: #FFC4CA}
</style>
[/dohtml]