[html]
<style>
.punbb {
    margin-left: 0px !important;
}

.container4{
  margin:0px;
  min-width:1200px;
  background-color:var(--bg2);
  background-image:
    linear-gradient(45deg,transparent 50%,var(--bg3) 50%,transparent calc(50% + 1px)),
    linear-gradient(135deg,transparent 50%,var(--bg3) 50%,transparent calc(50% + 1px));
  background-size:50px 50px;
 
  --cat-img: url(https://i.ibb.co/tH3dt5W/Muel-With-BG-Fade.png);
  --cat-render: url(https://i.ibb.co/2yHc6qj/Muel-Fade.png);
 
  --bg1: #e8e8e8;
  --bg2: #e2e3de;
  --bg3: #ddded5;
 
  --dark: #919485;
  --dark2: #333333;
 
  --green: #89ad89;
 
  --fontDisplay: Bodoni Moda, serif;
  --fontBody: Cormorant, serif;
}
a { text-decoration:none;color:var(--green1); }

.morn-cat {
width:1100px;
min-height:635px;
background-image:var(--cat-img);
background-position:-180px -150px;
background-size:1300px auto;
margin:150px auto;
position:relative;
border-radius:35px;
box-shadow:0px 0px 0px 5px var(--bg1);
filter:drop-shadow(0px 0px 10px var(--bg3));
color:var(--dark2);
font-family:var(--fontBody);
}

.morn-cat::before {
content:'';
display:block;
background-image:var(--cat-render);
height:785px;
width:800px;
position:absolute;
z-index:2;
top:-150px;
left:-180px;
background-size:1300px auto;
pointer-events:none;
}

.morn-cat::after {
content:'getting started';
display:block;
position:absolute;
right:0px;
top:-64px;
font:800 80px var(--fontDisplay);
text-transform:uppercase;
line-height:60px;
color:var(--bg1);
letter-spacing:3px;
}

.morn-guide {
position:absolute;
top:75px;
left:280px;
text-shadow:0px 0px 0px 2px var(--bg1);
display:flex;
width:755px;
}

.morn-guide-name {
font:italic 800 120px var(--fontDisplay);
line-height:70px;
color:var(--dark);
position:relative;
z-index:1;
background:linear-gradient(to bottom right,var(--green),var(--dark));
background-position:bottom right;
background-size:200%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
padding:20px 0px 5px 0px;
margin-top:-20px;
}

.morn-guide-name span {
display:block;
padding-left:58px;
}

.morn-guide-desc {
background-color:rgba(221,222,212,.75);
background-image:
    linear-gradient(45deg,transparent 50%,var(--bg1) 50%,transparent calc(50% + 1px)),
    linear-gradient(135deg,transparent 50%,var(--bg1) 50%,transparent calc(50% + 1px));
 
background-size:15px 15px;
padding:28px 28px 28px 48px;
border-radius:25px;
flex-grow:1;
text-align:justify;
letter-spacing:.35px;
font-size:16px;
line-height:22px;
margin-left:-30px;
border:solid 5px var(--bg1);
}

.morn-guide-link {
position:absolute;
right:70px;
top:255px;
display:flex;
gap:16px;
}

.morn-guide-link a {
display:block;
background:linear-gradient(to bottom right,var(--green),var(--dark));
background-size:200%;
padding:12px;
border-radius:10px;
font:800 11px /10px var(--fontBody);
text-transform:uppercase;
position:relative;
letter-spacing:3.6px;
box-shadow:0px 0px 0px 3px var(--bg1);
}

.morn-guide-link a::before {
content:'';
display:block;
position:absolute;
top:3px;
bottom:3px;
left:3px;
right:3px;
background-color:var(--dark);
background-image:
    linear-gradient(45deg,transparent 50%,#838383 50%,transparent calc(50% + 1px)),
    linear-gradient(135deg,transparent 50%,#838383 50%,transparent calc(50% + 1px));
 
background-size:15px 15px;
border-radius:7px;
mix-blend-mode:overlay;
}

.morn-guide-link a div {
position:relative;
color:var(--bg1);
text-shadow:0px 0px 3px var(--dark);
}

.morn-boreds {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:25px;
position:absolute;
z-index:3;
top:320px;
left:300px;
width:730px;
}

.morn-bored {
height:205px;
background-color:rgba(221,222,212,1);
border-radius:20px;
box-shadow:0px 0px 0px 5px var(--bg1);
position:relative;
padding:25px;
}

.morn-bored::before {
content:'';
display:block;
position:absolute;
top:3px;
bottom:3px;
left:3px;
right:3px;
background-image:
    linear-gradient(45deg,transparent 50%,var(--bg1) 50%,transparent calc(50% + 1px)),
    linear-gradient(135deg,transparent 50%,var(--bg1) 50%,transparent calc(50% + 1px));
 
background-size:15px 15px;
border-radius:18px;
opacity:1;
}

.morn-bored-desc {
letter-spacing:.35px;
font-size:16px;
line-height:22px;
position:relative;
z-index:1;
margin:12px 0px 23px 0px;
text-transform:lowercase;
text-align:justify;
}

.morn-bored-desc div {
height:65px;
overflow:auto;
padding-right:10px;
}

.morn-bored-mid {
position:relative;
z-index:1;
display:grid;
grid-template-columns:auto auto;
gap:15px;
}

.morn-bored-icon {
display:flex;
flex-direction:column;
gap:5px;
}

.morn-bored-icon i {
display:block;
background:linear-gradient(to bottom right,var(--green),var(--dark));
background-position:bottom right;
background-size:200%;
box-shadow:0px 0px 0px 2px var(--bg1);
border-radius:10px;
height:31px;
width:31px;
margin:2px;
display:flex;
justify-content:center;
align-items:center;color:var(--bg1);
}

.morn-bored-recent {
font:800 11px / 10px var(--fontBody);.
text-transform:uppercase;
text-align:right;l
etter-spacing:.25px;
}
.morn-bored-recent a {
display:block;
color:var(--dark);
}
.morn-bored-recent-1 {
font:900 13px / 12px var(--fontDisplay);
text-transform:uppercase;
display:block;
margin:4px 0px 8px 0px;
color:var(--dark2)!important;
background:linear-gradient(to bottom right,var(--green),var(--dark));
background-position:bottom right;
background-size:200%;
background-clip: text;
-webkit-background-clip: text;
color: transparent!important;
}
.morn-bored-name {
margin:0px -10px -5px -28px;
display:grid;
grid-template-columns:auto 40px;
gap:15px;
position:relative;
z-index:1;
}
.morn-bored-name-1 {
display:block;
background:linear-gradient(to bottom right,var(--green),var(--dark));
background-position:bottom right;
background-size:200%;
margin-bottom:-18px;
border-radius:0px 10px 0px 23px;
padding:14px 20px 0px 0px;
text-align:right;
font:800 24px / 26px var(--fontDisplay);
color:var(--bg1);
}
.morn-bored-name img {
height:40px;
width:40px;
border-radius:10px;
filter:grayscale(100%) contrast(80%);
transition:.7s;
}
.morn-bored:hover .morn-bored-name img {
filter:grayscale(0%) contrast(80%);
}
</style>

<div class="container4">
<div class="morn-cat">
  <div class="morn-guide">
    <a href="#" class="morn-guide-name">guide<span>book</span></a>
    <div class="morn-guide-desc">
      this room was built for one chair only. i'm not empty - i'm just lonely, tied to the ghost of you. i can be gentle, too. it's just a passing phase. i'll whisper as you fade: letting me go isn't the only answer.
    </div>
  </div>
    <div class="morn-guide-link">
      <a href="#"><div>guidelines</div></a>
      <a href="#"><div>premise</div></a>
      <a href="#"><div>setting</div></a>
      <a href="#"><div>member groups</div></a>
      <a href="#"><div>credits</div></a>
    </div>
  <div class="morn-boreds">
    <div class="morn-bored">
      <div class="morn-bored-mid">
        <div class="morn-bored-icon">
          <i class="ph ph-files"></i>
          <i class="ph ph-pencil"></i>
        </div>
        <div class="morn-bored-recent">
          <a href="#" class="morn-bored-recent-1">letting me go isn't the only answer</a>
          written by <a href="#">first lastname</a>
        </div>
      </div>
      <div class="morn-bored-desc"><div>Don't let utopia haunt you - there's more to save. Don't stop the search for perfection - you're smart and brave. Don't let them sail off in anger - just smile and wave.</div></div>
      <div class="morn-bored-name">
        <a href="#" class="morn-bored-name-1">updates</a>
        <img src="https://i.ibb.co/58d177g/Muel.png">
      </div>
    </div>
    <div class="morn-bored">
      <div class="morn-bored-mid">
        <div class="morn-bored-icon">
          <i class="ph ph-files"></i>
          <i class="ph ph-pencil"></i>
        </div>
        <div class="morn-bored-recent">
          <a href="#" class="morn-bored-recent-1">letting me go isn't the only answer</a>
          written by <a href="#">first lastname</a>
        </div>
      </div>
      <div class="morn-bored-desc"><div>Don't let utopia haunt you - there's more to save. Don't stop the search for perfection - you're smart and brave. Don't let them sail off in anger - just smile and wave.</div></div>
      <div class="morn-bored-name">
        <a href="#" class="morn-bored-name-1">service</a>
        <img src="https://i.ibb.co/58d177g/Muel.png">
      </div>
    </div>
    <div class="morn-bored">
      <div class="morn-bored-mid">
        <div class="morn-bored-icon">
          <i class="ph ph-files"></i>
          <i class="ph ph-pencil"></i>
        </div>
        <div class="morn-bored-recent">
          <a href="#" class="morn-bored-recent-1">letting me go isn't the only answer</a>
          written by <a href="#">first lastname</a>
        </div>
      </div>
      <div class="morn-bored-desc"><div>Don't let utopia haunt you - there's more to save. Don't stop the search for perfection - you're smart and brave. Don't let them sail off in anger - just smile and wave.</div></div>
      <div class="morn-bored-name">
        <a href="#" class="morn-bored-name-1">members</a>
        <img src="https://i.ibb.co/58d177g/Muel.png">
      </div>
    </div>
  </div>
</div>
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;0,6..96,900;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700;1,6..96,800;1,6..96,900&family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/@phosphor-icons/web"></script>

</div>
[/html]
[hideprofile]

[hideprofile][html]
<style>
.riche {
  --name: 'Riche Avacadoo';
  --class: 'paladin ( lv.05 )';
  --race: 'human';
  --background: 'haunted one';
  --alignment: 'lawful good';
 
  --pro: '+3';
 
  --str: '18';
  --strmod: '+4';
  --strpro: '+7';
 
  --dex: '13';
  --dexmod: '+1';
  --dexpro: '+4';
 
  --con: '18';
  --conmod: '+4';
  --conpro: '+7';
 
  --int: '12';
  --intmod: '+1';
  --intpro: '+4';
 
  --wis: '16';
  --wismod: '+3';
  --wispro: '+6';
 
  --cha: '18';
  --chamod: '+4';
  --chapro: '+7';
 
  --hp: '47';
  --ac: '20';
  --hd: 'd10';
  --speed: '30ft';
  --vision: '2mi';
  --init: '+1';
 
  --resist: 'none';
  --immune: 'disease';
 
  --w1name: 'longsword +2';
  --w1attack: '+9';
  --w1damage: '1d8 + 8';
  --w1type: 'slashing';
  --w1range: '5ft';
 
  --w2name: 'javelin x5';
  --w2attack: '+7';
  --w2damage: '1d6 + 6';
  --w2type: 'piercing';
  --w2range: '30 - 120ft';
 
  --languages: 'common, dwarvish, orcish, undercommon';
 
  --platinum: '0';
  --gold: '500';
  --silver: '0';
  --copper: '0';
 
  --item1: 'longsword +2';
  --item1desc: ''; 
  --item2: 'metal shield';
  --item2desc: ''; 
  --item3: 'javelin x5';
  --item3desc: ''; 
  --item4: 'plate mail';
  --item4desc: ''; 
  --item5: 'chain mail';
  --item5desc: '';
  --item6: '';
  --item6desc: '';
  --item7: '';
  --item7desc: '';
  --item8: '';
  --item8desc: '';
  --item9: '';
  --item9desc: '';
  --item10: '';
  --item10desc: '';
  --item11: '';
  --item11desc: '';
  --item12: '';
  --item12desc: '';
  --item13: '';
  --item13desc: '';
  --item14: '';
  --item14desc: '';
  --item15: '';
  --item15desc: '';
 
  --skill1: 'divine sense';
  --skill2: 'lay on hands';
  --skill3: 'divine smite';
  --skill4: 'fighting style';
  --skill5: 'extra attack';
  --skill6: 'aura of protection';
  --skill7: 'aura of devotion';
  --skill8: 'aura of courage';
  --skill9: 'cleansing touch';
  --skill10: 'purity of spirit';
  --skill11: 'holy nimbus';
 
  --spelldc: '15';
  --spellbonus: '+7';
  --spellslots: '6';
}

body { margin:0px!important; }
.riche { width:100%;min-height:100vh; }
.riche-0 { background:linear-gradient(to bottom, #DFCAB7, #A7ACB1);background-attachment:fixed;width:100%;height:100%; }
.riche-1 { position:fixed;background-image:url(https://i.ibb.co/F4fKJVH/p0gVOEg.png);background-size:2.5%;opacity:1;height:100%;width:100%; }
.riche-2 { padding:50px 0px;margin:0px auto;width:1100px;position:relative;z-index:1; }
.riche-3 { background-color:#eeeeee;border-radius:35px;padding:35px;box-shadow: 0px 25px 20px -15px hsl(208 47% 20% / 25%); }
.riche-4 { display: grid;grid-template-columns: 280px auto;background-color:#444444;border-radius:16px; }

.riche-rolls { background-color:#444444;background-image:url(https://i.ibb.co/1LTgndH/JeanTol.png);background-position:bottom right;background-repeat:no-repeat;height:875px;border-radius:15px 0px 0px 15px;position:relative;z-index:1;padding:25px;color:#e3e3e3; }
.riche-rolls-title { padding:38px 0px 0px 1px;text-align:right;font:800 60px DM Serif Display;line-height:30px;height:62px;overflow:hidden;background-color:#3b3b3b;text-transform:lowercase;font-style:italic;border-radius:14px 0px 15px 0px;letter-spacing:1px;margin:-25px 10px 0px -25px; }
.riche-rolls-title span { margin-right:-5px;background:linear-gradient(to bottom right,#7EBAEE,#F0A06F);background-clip: text;-webkit-background-clip: text;color: transparent; }
.riche-stat { margin-top:25px; }
.riche-stat-score { margin-left:-25px;position:absolute;width:100px;height:100px;background-color:#4b4b4b;border-radius:0px 15px 15px 0px;font:800 85px DM Serif Display;font-style:italic;line-height:120px;text-align:right;overflow:hidden;box-shadow:2px 2px 5px #3b3b3b; }
.riche-stat-score .str::before { content:var(--str);margin-right:-5px; }
.riche-stat-score .dex::before { content:var(--dex);margin-right:-5px; }
.riche-stat-score .con::before { content:var(--con);margin-right:-5px; }
.riche-stat-score .int::before { content:var(--int);margin-right:-5px; }
.riche-stat-score .wis::before { content:var(--wis);margin-right:-5px; }
.riche-stat-score .cha::before { content:var(--cha);margin-right:-5px; }
.riche-stat h1 { position:absolute;margin:85px 0px 0px -10px;background:linear-gradient(to bottom right,#7EBAEE,#F0A06F);font:800 8px DM Serif Display;letter-spacing:3px;padding:5px 7px 5px 10px;border-radius:10px;color:#444444;box-shadow:2px 2px 5px #3b3b3b; }
.riche-stat h1 .str::before { content:var(--strmod); }
.riche-stat h1 .dex::before { content:var(--dexmod); }
.riche-stat h1 .con::before { content:var(--conmod); }
.riche-stat h1 .int::before { content:var(--intmod); }
.riche-stat h1 .wis::before { content:var(--wismod); }
.riche-stat h1 .cha::before { content:var(--chamod); }
.riche-stat-skills { padding-left:95px;font:12px DM Serif Display;line-height:20px;letter-spacing:1px;white-space:nowrap;min-height:100px;text-shadow:1px 1px 2px #373737;display:flex;flex-direction:column;justify-content:center; }
.riche-stat-skills span { line-height:10px!important;background:linear-gradient(to bottom right,#7EBAEE,#F0A06F);background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow:none!important; }
.riche-stat-skills .str::before { content:var(--strmod); }
.riche-stat-skills .dex::before { content:var(--dexmod); }
.riche-stat-skills .con::before { content:var(--conmod); }
.riche-stat-skills .int::before { content:var(--intmod); }
.riche-stat-skills .intpro::before { content:var(--intpro); }
.riche-stat-skills .wis::before { content:var(--wismod); }
.riche-stat-skills .wispro::before { content:var(--wispro); }
.riche-stat-skills .cha::before { content:var(--chamod); }
.riche-stat-skills .chapro::before { content:var(--chapro); }

.riche-sheet { background-color:#e3e3e3;border-radius:0px 15px 15px 0px;mix-blend-mode:lighten; }
.riche-sheet-waves { margin-bottom:-350px;width:100%;height:200px;clip-path:url(#riche-path);background:linear-gradient(to top right,#7EBAEE,#F0A06F);padding-bottom:150px;transform:scaleY(-1);border-radius:0px 0px 15px 0px;overflow:hidden; }
.riche-sheet-waves-1 { height:435px;width:100%;background-image:url(https://i.ibb.co/BPKpfjw/Jeans-Thing.png);mix-blend-mode:multiply;background-position:top center;transform:scaleY(-1); }

.riche-name { font:800 85px DM Serif Display;line-height:55px;position:absolute;z-index:10;white-space:nowrap;mix-blend-mode:lighten;text-transform:lowercase;padding:55px 0px 0px 90px; }
.riche-name::before { display:block;content:var(--name);position:absolute;color:#444444;text-shadow:1px 1px 0px rgba(227,227,227,.5);margin:3px 0px 0px 3px; }
.riche-name-1 { font:800 85px DM Serif Display;line-height:55px;position:absolute;z-index:10;white-space:nowrap;text-transform:lowercase;padding:55px 0px 0px 90px;color:#e3e3e3; }
.riche-name-1::before { content:var(--name); }
.riche-class .a::before { content:var(--race); }
.riche-class .b::before { content:var(--class); }

.riche input[type=radio] { display:none; }
.riche input[type=radio] + label { position:absolute;z-index:1000;position:absolute;background-color:#e3e3e3;width:232px;height:8px;text-align:center;padding:9px 0px 8px 5px;border-radius:5px;margin:135px 0px 0px 90px;text-transform:uppercase;font:bold 8px DM Serif Display;line-height:8px;letter-spacing:5px;mix-blend-mode:lighten;box-shadow:3px 3px 0px #444444, 4px 4px 0px rgba(227,227,227,.5);cursor:pointer; }
.riche label:hover { mix-blend-mode:normal!important; }

.riche-img { height:300px;width:200px;padding:20px;border-radius:15px;background-color:#eeeeee;position:absolute;z-index:1;margin:210px 0px 0px 525px;box-shadow:3px 3px 5px rgba(68,68,68,.065);opacity:0;pointer-events:none;transition:.5s all; }
.riche-img div { height:300px;width:200px;border-radius:5px;background-color:#444444;background-image:url(https://i.ibb.co/qN3DRf9/Joann.png);background-blend-mode:lighten; }
.riche-dice { position:absolute;padding:25px 25px 15px 25px;width:190px;background-color:#eeeeee;border-radius:15px;margin:570px 0px 0px 525px;box-shadow:3px 3px 5px rgba(68,68,68,.065);opacity:0;pointer-events:none;transition:.5s all; }
.riche-dice-1 { width:190px;display:flex;margin-bottom:10px; }
.riche-dice-1 button { width:90px;background:#444444;border:none!important;border-radius:5px;margin-right:10px;font:bold 10px DM Serif Display;line-height:10px;text-transform:uppercase;letter-spacing:5px;padding:10px 0px 10px 5px;color:#e3e3e3;cursor:pointer;transition:.3s all; }
.riche-dice-1 button:hover { opacity:.85; }
.riche-dice-1 div { background-color:#e3e3e3;border-radius:5px;padding:10px 0px 10px 5px;font:800 10px DM Serif Display;line-height:10px;color:#444444;height:10px;width:90px;text-align:center; }

.riche-health { position:absolute;z-index:1;background-color:#eeeeee;padding:20px;margin:160px 0px 0px 35px;border-radius:15px;width:380px;box-shadow:3px 3px 5px rgba(68,68,68,.065);opacity:0;pointer-events:none;transition:.5s all; }
.riche-health h1 { margin:0px;background-color:#444444;border-radius:5px;padding:20px;font:800 59px DM Serif Display;line-height:55px;height:25px;color:#e3e3e3;letter-spacing:0px;text-transform:lowercase;font-style:italic;overflow:hidden; }
.riche-health h2 { margin:0px 20px 0px 0px;font:800 20px DM Serif Display;line-height:23px;color:#e3e3e3; }
.riche-health h2 span::before { content:var(--hp);padding-left:10px; }
.riche-health h1 b { background:linear-gradient(to bottom right,#7EBAEE,#F0A06F);background-clip: text;-webkit-background-clip: text;color: transparent; }
.riche-health h1 div input[type=number] { width:35px;padding:0px;border:none!important;background:transparent;font:800 20px DM Serif Display;line-height:25px;height:25px;color:#e3e3e3; }
.riche-health h1 div { background-color:#3b3b3b;border-radius:5px;padding:5px 0px 5px 20px;margin:-5px;display:flex;float:right;letter-spacing:0px;  }
.riche-health-1 { display:flex;margin-top:10px; }
.riche-health-1 div { height:55px;width:55px;background-color:#e3e3e3;border-radius:5px;margin-right:10px;text-align:center;color:#444444; }
.riche-health-1 div h3 { font:800 10px DM Serif Display;line-height:10px;letter-spacing:1px; }
.riche-health-1 div span { font:800 20px DM Serif Display;line-height:0px;display:block;padding-top:22px; }
.riche-health-1 .ac::before { content:var(--ac); }
.riche-health-1 .speed::before { content:var(--speed); }
.riche-health-1 .vision::before { content:var(--vision); }
.riche-health-1 .hd::before { content:var(--hd); }
.riche-health-1 .pro::before { content:var(--pro); }
.riche-health-1 .inspo::before { content:var(--init); }

.riche-weapons { margin:340px 0px 0px 25px;position:absolute;z-index:1;opacity:0;pointer-events:none;transition:.5s all; }
.riche-weapons-0 { padding:10px;width:420px;height:200px;overflow:hidden; }
.riche-weapons-1 { height:140px;background-color:#eeeeee;padding:30px 25px 30px 30px;border-radius:15px;width:365px;box-shadow:3px 3px 5px rgba(68,68,68,.065);color:#444444;margin-bottom:15px;transition:.3s all; }
.riche-weapons-1 h1 { font:800 30px DM Serif Display;font-style:italic;line-height:25px;margin:0px 0px 10px 0px;letter-spacing:2px; }
.riche-weapons-1 h1 .weapon1::before { content:var(--w1name); }
.riche-weapons-1 h1 .weapon2::before { content:var(--w2name); }
.riche-weapons-1 h2 { float:left;background-color:#e3e3e3;border-radius:5px;margin:0px 5px 5px 0px;font:800 10px DM Serif Display;line-height:10px;letter-spacing:3px;padding:10px; }
.riche-weapons-1 h2 span { background:linear-gradient(to bottom right,#7EBAEE,#F0A06F);background-clip: text;-webkit-background-clip: text;color: transparent; }
.riche-weapons-1 h2 .attack1::before { content:var(--w1attack); }
.riche-weapons-1 h2 .attack2::before { content:var(--w2attack); }
.riche-weapons-1 h2 .damage1::before { content:var(--w1damage); }
.riche-weapons-1 h2 .damage2::before { content:var(--w2damage); }
.riche-weapons-1 h2 .type1::before { content:var(--w1type); }
.riche-weapons-1 h2 .type2::before { content:var(--w2type); }
.riche-weapons-1 h2 .range1::before { content:var(--w1range); }
.riche-weapons-1 h2 .range2::before { content:var(--w2range); }
.riche-weapons-1 div { margin-top:85px;display:flex; }
.riche-weapons-1 div button { width:120px;background:#444444;border:none!important;border-radius:5px;margin-right:5px;font:bold 10px DM Serif Display;line-height:10px;text-transform:uppercase;letter-spacing:3px;padding:10px 0px 10px 3px;color:#e3e3e3;cursor:pointer;transition:.3s all; }
.riche-weapons-1 div button:hover { opacity:.85; }
.riche-weapons-1 div h3 { margin:0px;padding:10px 0px;background-color:#e3e3e3;border-radius:5px;margin-right:10px;font:800 10px DM Serif Display;line-height:10px;width:30px;text-align:center; }

.riche-weapons input[type=checkbox] { display:none; }
.riche-weapon-0 { position:absolute;z-index:10;background-color:#444444;height:50px;width:50px;border-radius:100%;margin:20px 0px 0px 350px;text-align:center;cursor:pointer;transition:.3s all; }
.riche-weapon-0 i::before { display:block;line-height:50px;background:linear-gradient(to bottom right,#7EBAEE,#F0A06F);background-clip: text;-webkit-background-clip: text;color: transparent; }
#riche-weapon:checked + label { transform:rotate(180deg); }
#riche-weapon:checked ~ #first { margin-top:-215px; }

.riche-skills { position:absolute;z-index:1;margin:570px 0px 0px 35px;display:flex;opacity:0;pointer-events:none;transition:.5s all; }
.riche-skills-left { box-shadow:3px 3px 5px rgba(68,68,68,.065);border-radius:15px;width:25px;height:220px;padding:23px;border:solid 2px #eeeeee;background:linear-gradient(to bottom,#7EBAEE,#F0A06F);margin-right:20px; }
.riche-skills-left div { height:0px;width:0px;white-space:nowrap;font:800 30px DM Serif Display;line-height:25px;color:#eeeeee;transform:rotate(-90deg);margin-top:220px;letter-spacing:3px; }
.riche-skills-right { box-shadow:3px 3px 5px rgba(68,68,68,.065);background-color:#eeeeee;border-radius:15px;padding:35px;width:255px; }
.riche-skills-right-1 { height:200px;width:255px;overflow:auto;padding-right:15px;color:#444444; }
.riche-skills-right-1::-webkit-scrollbar { width:5px;background-color:transparent; }
.riche-skills-right-1::-webkit-scrollbar-thumb { border-radius:3px;background-color:#444444; }
.riche-skills-right-1 input[type=checkbox] { display:none; }
.riche-skills-right-1 input[type=checkbox] + label { font:800 25px DM Serif Display;line-height:20px;height:30px!important;display:block;text-transform:lowercase;font-style:italic;cursor:pointer;transition:.3s all; }
.riche-skills-right-1 .skill1::before { content:var(--skill1); }
.riche-skills-right-1 .skill2::before { content:var(--skill2); }
.riche-skills-right-1 .skill3::before { content:var(--skill3); }
.riche-skills-right-1 .skill4::before { content:var(--skill4); }
.riche-skills-right-1 .skill5::before { content:var(--skill5); }
.riche-skills-right-1 .skill6::before { content:var(--skill6); }
.riche-skills-right-1 .skill7::before { content:var(--skill7); }
.riche-skills-right-1 .skill8::before { content:var(--skill8); }
.riche-skills-right-1 .skill9::before { content:var(--skill9); }
.riche-skills-right-1 .skill10::before { content:var(--skill10); }
.riche-skills-right-1 .skill11::before { content:var(--skill11); }
.riche-skills-blurb { margin-bottom:5px;font:11px Roboto;line-height:14px;padding-right:15px;letter-spacing:.25px;text-align:justify;overflow:hidden;max-height:0px;transition:.5s all; }
.riche-skills-blurb::-webkit-scrollbar { width:5px;background-color:transparent; }
.riche-skills-blurb::-webkit-scrollbar-thumb { border-radius:3px;background-color:#444444; }
#riche-skill1:checked + label, #riche-skill2:checked + label, #riche-skill3:checked + label, #riche-skill4:checked + label, #riche-skill5:checked + label, #riche-skill6:checked + label, #riche-skill7:checked + label, #riche-skill8:checked + label, #riche-skill9:checked + label, #riche-skill10:checked + label, #riche-skill11:checked + label { background:linear-gradient(to bottom right,#7EBAEE,#F0A06F);background-clip: text;-webkit-background-clip: text;color: transparent; }
#riche-skill1:checked ~ .riche-skills-blurb, #riche-skill2:checked ~ .riche-skills-blurb,#riche-skill3:checked ~ .riche-skills-blurb, #riche-skill4:checked ~ .riche-skills-blurb,#riche-skill5:checked ~ .riche-skills-blurb, #riche-skill6:checked ~ .riche-skills-blurb,#riche-skill7:checked ~ .riche-skills-blurb, #riche-skill8:checked ~ .riche-skills-blurb,#riche-skill9:checked ~ .riche-skills-blurb, #riche-skill10:checked ~ .riche-skills-blurb,#riche-skill11:checked ~ .riche-skills-blurb { max-height:280px; }
.locked { opacity:.2; }

.riche-spell-stats { height:340px;width:240px;position:absolute;z-index:1;margin:160px 0px 0px 475px;opacity:0;pointer-events:none;transition:.5s all;display:flex;gap:10px;flex-wrap:wrap; }
.riche-spell-stats-1 { background-color:#444444;border-radius:15px;box-shadow:3px 3px 5px rgba(68,68,68,.065);border:solid 3px #eeeeee;height:69px;width:64px;padding-right:5px;text-align:center; }
.riche-spell-stats-1 div::before { content:var(--spelldc);display:block;color:#eeeeee;font:800 35px DM Serif Display;line-height:69px;font-style:italic; }
#SPELLBONUS::before { content:var(--spellbonus); }
#SPELLSTAT::before { content:'CH'; }
#SPELLSLOT::before { content:var(--spellslots); }
.riche-spell-stats-2 { height:40px;background-color:#eeeeee;border-radius:15px;box-shadow:3px 3px 5px rgba(68,68,68,.065);font:800 25px DM Serif Display;text-align:center;line-height:20px;height:41px;padding:17px;flex-grow:2; }
.riche-spell-stats-2 div { background:linear-gradient(to bottom right,#7EBAEE,#F0A06F);background-clip: text;-webkit-background-clip: text;color: transparent; }

.riche-spells { margin-top:210px;margin-left:-15px;opacity:0;position:absolute;z-index:1;width:420px;padding-right:10px;height:680px;overflow:auto;pointer-events:none;transition:.5s all; }
.riche-spells-1 { background-color:#eeeeee;border-radius:15px;box-shadow:3px 3px 5px rgba(68,68,68,.065);padding:20px;margin-top:20px; }
.riche-spells-1 div { background-color:#444444;border-radius:15px 0px 15px 0px;margin:-20px 30px 20px -20px;padding:15px 0px 15px 15px;color:#eeeeee;display:flex;width:100px;float:left;justify-content:center; }
.riche-spells-1 div input[type=number] { width:30px;padding:0px;border:none!important;background:transparent;font:800 20px DM Serif Display;line-height:25px;height:25px;color:#e3e3e3; }
.riche-spells-1 div span { display:block;font:800 20px DM Serif Display;line-height:25px;padding-right:20px; }
.riche-spells-1 h1 { margin:0px;font:800 28px DM Serif Display;line-height:30px;padding-top:5px;padding-bottom:20px;letter-spacing:.5px; }
.riche-spells-1 textarea { width:94%;background-color:#eeeeee;padding:10px;border:none;font:12px Roboto;line-height:15px;height:100px;color:#444444; }
.riche-spells::-webkit-scrollbar { width:0px;background-color:transparent; }
.riche-spells::-webkit-scrollbar-thumb {  }

#riche-tab1:checked ~ .riche-img, #riche-tab1:checked ~ .riche-dice { opacity:1!important;pointer-events:auto!important;margin-left:475px!important; }
#riche-tab1:checked ~ .riche-health { opacity:1!important;pointer-events:auto!important;margin-top:210px!important; }
#riche-tab1:checked ~ .riche-weapons { opacity:1!important;pointer-events:auto!important;margin-top:390px!important; }
#riche-tab1:checked ~ .riche-skills { opacity:1!important;pointer-events:auto!important;margin-top:620px!important; }

#riche-tab2:checked ~ .riche-spell-stats { opacity:1!important;pointer-events:auto!important;margin-top:210px!important; }
#riche-tab2:checked ~ .riche-spells { opacity:1!important;pointer-events:auto!important;margin-left:35px!important; }
#riche-tab2:checked ~ .riche-dice { opacity:1!important;pointer-events:auto!important;margin-left:475px!important; }
</style>

<div class="riche"><div class="riche-0"><div class="riche-1"></div><div class="riche-2"><div class="riche-3"><div class="riche-4">
 
  <div class="riche-rolls">
   
    <div class="riche-rolls-title"><span>STAT BLOCKS</span></div>
   
    <div class="riche-stat">
      <div class="riche-stat-score"><span class="str"></span></div>
      <h1><span class="str"></span> STRENGTH</h1>
      <div class="riche-stat-skills">
        <div><span class="str"></span> SAVING THROW</div>
        <div><span class="str"></span> ATHLETICS</div>
    </div></div>
   
    <div class="riche-stat">
      <div class="riche-stat-score"><span class="dex"></span></div>
      <h1><span class="dex"></span> DEXTERITY</h1>
      <div class="riche-stat-skills">
        <div><span class="dex"></span> SAVING THROW</div>
        <div><span class="dex"></span> ACROBATICS</div>
        <div><span class="dex"></span> SLEIGHT OF HAND</div>
        <div title="DISADVANTAGE"><span class="dex"></span> STEALTH <span class="th th-information"></i></div>
    </div></div>
   
    <div class="riche-stat">
      <div class="riche-stat-score"><span class="con"></span></div>
      <h1><span class="con"></span> CONSTITUTION</h1>
      <div class="riche-stat-skills">
        <div><span class="con"></span> SAVING THROW</div>
    </div></div>
   
    <div class="riche-stat">
      <div class="riche-stat-score"><span class="int"></span></div>
      <h1><span class="int"></span> INTELLECT</h1>
      <div class="riche-stat-skills">
        <div><span class="int"></span> SAVING THROW</div>
        <div><span class="int"></span> ARCANA</div>
        <div><span class="int"></span> HISTORY</div>
        <div><span class="int"></span> INVESTIGATION</div>
        <div><span class="int"></span> NATURE</div>
        <div><span class="intpro"></span> RELIGION</div>
    </div></div>
   
    <div class="riche-stat">
      <div class="riche-stat-score"><span class="wis"></span></div>
      <h1><span class="wis"></span> WISDOM</h1>
      <div class="riche-stat-skills">
        <div><span class="wispro"></span> SAVING THROW</div>
        <div><span class="wis"></span> ANIMAL HANDLING</div>
        <div><span class="wis"></span> INSIGHT</div>
        <div><span class="wis"></span> MEDICINE</div>
        <div><span class="wis"></span> PERCEPTION</div>
        <div><span class="wispro"></span> SURVIVAL</div>
    </div></div>
   
    <div class="riche-stat">
      <div class="riche-stat-score"><span class="cha"></span></div>
      <h1><span class="cha"></span> CHARISMA</h1>
      <div class="riche-stat-skills">
        <div><span class="chapro"></span> SAVING THROW</div>
        <div><span class="cha"></span> DECEPTION</div>
        <div><span class="chapro"></span> INTIMIDATION</div>
        <div><span class="cha"></span> PERFORMANCE</div>
        <div><span class="chapro"></span> PERSUASION</div>
    </div></div>
   
  </div>
  <div class="riche-sheet">
    <div class="riche-sheet-waves"><div class="riche-sheet-waves-1"></div></div>
    <div class="riche-name"></div>
    <div class="riche-name-1"></div>
   
   
   
    <input type="radio" id="riche-tab1" name="riche-tab" checked>
<label for="riche-tab1" style="margin-left:337px;width:86px;"><div>COMBAT</div></label>
    <input type="radio" id="riche-tab2" name="riche-tab">
<label for="riche-tab2" style="margin-left:438px;width:86px;"><div>SPELLS</div></label>
    <input type="radio" id="riche-tab3" name="riche-tab">
<label for="riche-tab3" style="margin-left:539px;width:116px;"><div>EQUIPMENT</div></label>
    <input type="radio" id="riche-tab4" name="riche-tab">
<label for="riche-tab4" class="riche-class"><span class="a"></span> <span class="b"></span></label>
 
 
 
  <div class="riche-dice">
    <div class="riche-dice-1">
      <button onclick="document.getElementById('d100roll').innerHTML = getRndInteger(0,100)">d100</button>
      <div id="d100roll"></div>
    </div><div class="riche-dice-1">
      <button onclick="document.getElementById('d20roll').innerHTML = getRndInteger(0,20)">d20</button>
      <div id="d20roll"></div>
    </div><div class="riche-dice-1">
      <button onclick="document.getElementById('d12roll').innerHTML = getRndInteger(0,12)">d12</button>
      <div id="d12roll"></div>
    </div><div class="riche-dice-1">
      <button onclick="document.getElementById('d10roll').innerHTML = getRndInteger(0,10)">d10</button>
      <div id="d10roll"></div>
    </div><div class="riche-dice-1">
      <button onclick="document.getElementById('d8roll').innerHTML = getRndInteger(0,8)">d8</button>
      <div id="d8roll"></div>
    </div><div class="riche-dice-1">
      <button onclick="document.getElementById('d6roll').innerHTML = getRndInteger(0,6)">d6</button>
      <div id="d6roll"></div>
    </div><div class="riche-dice-1">
      <button onclick="document.getElementById('d4roll').innerHTML = getRndInteger(0,4)">d4</button>
      <div id="d4roll"></div>
    </div>
  </div>
 
  <div class="riche-img"><div></div></div>
 
  <div class="riche-health"><h1>
    <div><input type="number" id="hpealth"><h2>/ <span></span></h2></div><b>TOTAL HP<span style="width:10px;display:inline-block;"></span></b></h1>
    <div class="riche-health-1">
      <div><span class="ac"></span><h3>AC</h3></div>
      <div><span class="speed"></span><h3>SPEED</h3></div>
      <div><span class="vision"></span><h3>VISION</h3></div>
      <div><span class="hd"></span><h3>HD</h3></div>
      <div><span class="pro"></span><h3>PROF.</h3></div>
      <div style="margin:0px;"><span class="inspo"></span><h3>INIT.</h3></div>
    </div></div>
 
  <div class="riche-weapons"><div class="riche-weapons-0"><input type="checkbox" id="riche-weapon">
    <label for="riche-weapon" class="riche-weapon-0"><i class="th th-down-arrow"></i></label>
    <div class="riche-weapons-1" id="first">
      <h1><span class="weapon1"></span></h1>
      <h2>ATTACK MOD: <span class="attack1"></span></h2>
        <h2>DAMAGE: <span class="damage1"></span></h2>
      <h2>WEAPON TYPE: <span class="type1"></span></h2>
      <h2>RANGE: <span class="range1"></span></h2>
      <div><button onclick="document.getElementById('attack1roll').innerHTML = getAttack1(0,20)">ROLL ATTACK</button><h3 id="attack1roll"></h3>
        <button onclick="document.getElementById('damage1roll').innerHTML = getDamage1(0,8)">ROLL DAMAGE</button><h3 id="damage1roll"></h3></div>
    </div>
   
    <div class="riche-weapons-1">
      <h1><span class="weapon2"></span></h1>
      <h2>ATTACK MOD: <span class="attack2"></span></h2>
        <h2>DAMAGE: <span class="damage2"></span></h2>
      <h2>WEAPON TYPE: <span class="type2"></span></h2>
      <h2>RANGE: <span class="range2"></span></h2>
      <div><button onclick="document.getElementById('attack2roll').innerHTML = getAttack2(0,20)">ROLL ATTACK</button><h3 id="attack2roll"></h3>
        <button onclick="document.getElementById('damage2roll').innerHTML = getDamage2(0,6)">ROLL DAMAGE</button><h3 id="damage2roll"></h3></div>
    </div>
  </div></div>
 
  <div class="riche-skills"><div class="riche-skills-left"><div>CLASS SKILLS</div></div>
    <div class="riche-skills-right"><div class="riche-skills-right-1">
     
     
     
      <div><input type="checkbox" id="riche-skill5" checked>
      <label for="riche-skill5">+ <span class="skill5"></span></label>
      <div class="riche-skills-blurb">
        Riche may attack twice, instead of once, when taking the <b>attack</b> action in combat.
      </div></div>
     
     
     
      <div><input type="checkbox" id="riche-skill1">
      <label for="riche-skill1">+ <span class="skill1"></span></label>
      <div class="riche-skills-blurb">
        divine sense blurb
      </div></div>
     
     
     
      <div><input type="checkbox" id="riche-skill2">
      <label for="riche-skill2">+ <span class="skill2"></span></label>
      <div class="riche-skills-blurb">
        lay on hands blurb
      </div></div>
     
     
     
      <div><input type="checkbox" id="riche-skill3">
      <label for="riche-skill3">+ <span class="skill3"></span></label>
      <div class="riche-skills-blurb">
        divine smite
      </div></div>
     
     
     
      <div><input type="checkbox" id="riche-skill4">
      <label for="riche-skill4">+ <span class="skill4"></span></label>
      <div class="riche-skills-blurb">
        fighting style blurb
      </div></div>
     
     
     
      <div class="locked" title="UNLOCKED AT LEVEL 6"><input type="checkbox" id="riche-skill6">
      <label for="riche-skill6">+ <span class="skill6"></span></label>
      <div class="riche-skills-blurb">
        aura of protection blurb
      </div></div>
     
     
     
      <div class="locked" title="UNLOCKED AT LEVEL 7"><input type="checkbox" id="riche-skill7">
      <label for="riche-skill7">+ <span class="skill7"></span></label>
      <div class="riche-skills-blurb">
        aura of devotion blurb
      </div></div>
     
     
     
      <div class="locked" title="UNLOCKED AT LEVEL 10"><input type="checkbox" id="riche-skill8">
      <label for="riche-skill8">+ <span class="skill8"></span></label>
      <div class="riche-skills-blurb">
        aura of courage blurb
      </div></div>
     
     
     
      <div class="locked" title="UNLOCKED AT LEVEL 14"><input type="checkbox" id="riche-skill9">
      <label for="riche-skill9">+ <span class="skill9"></span></label>
      <div class="riche-skills-blurb">
        cleansing touch blurb
      </div></div>
     
     
     
      <div class="locked" title="UNLOCKED AT LEVEL 15"><input type="checkbox" id="riche-skill10">
      <label for="riche-skill10">+ <span class="skill10"></span></label>
      <div class="riche-skills-blurb">
        purity of spirit blurb
      </div></div>
     
     
     
      <div class="locked" title="UNLOCKED AT LEVEL 20"><input type="checkbox" id="riche-skill11">
      <label for="riche-skill11">+ <span class="skill11"></span></label>
      <div class="riche-skills-blurb">
        holy nimbus blurb
      </div></div>
     
     
     
    </div></div>
  </div>
   
   
   
   
    <div class="riche-spell-stats">
      <div class="riche-spell-stats-1"><div></div></div>
      <div class="riche-spell-stats-2">SAVING<div>DC</div></div>
      <div class="riche-spell-stats-1"><div id="SPELLBONUS"></div></div>
      <div class="riche-spell-stats-2">ATTACK<div>BONUS</div></div>
      <div class="riche-spell-stats-1"><div id="SPELLSTAT"></div></div>
      <div class="riche-spell-stats-2">CASTING<div>STAT</div></div>
      <div class="riche-spell-stats-1"><div id="SPELLSLOT"></div></div>
      <div class="riche-spell-stats-2">TOTAL<div>SLOTS</div></div>
    </div>
   
   
   
    <div class="riche-spells">
      <div class="riche-spells-1" style="margin-top:0px;">
        <div><input type="number" value="0"><span>/</span><input type="number" value="0"></div><h1>1ST LEVEL SPELLS</h1>
      <textarea data-store="1" placeholder="Write your spell info here!"></textarea>
      </div>
      <div class="riche-spells-1">
        <div><input type="number" value="0"><span>/</span><input type="number" value="0"></div><h1>2ND LEVEL SPELLS</h1>
      <textarea data-store="2"></textarea>
      </div>
      <div class="riche-spells-1">
        <div><input type="number" value="0"><span>/</span><input type="number" value="0"></div><h1>3RD LEVEL SPELLS</h1>
      <textarea data-store="3"></textarea>
      </div>
      <div class="riche-spells-1">
        <div><input type="number" value="0"><span>/</span><input type="number" value="0"></div><h1>4TH LEVEL SPELLS</h1>
      <textarea data-store="4"></textarea>
      </div>
      <div class="riche-spells-1">
        <div><input type="number" value="0"><span>/</span><input type="number" value="0"></div><h1>5TH LEVEL SPELLS</h1>
      <textarea data-store="5"></textarea>
      </div>
    </div>
   
   
   
  </div>
 
</div></div></div></div></div>

<link href='http://fonts.googleapis.com/css?family=DM+Serif+Display:200,400,500,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Inconsolata:200,400,500,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:200,400,500,700,800' rel='stylesheet' type='text/css'>
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"></div>
[/html]

[hideprofile][html]
<style>
body { position:relative;margin:0px;background-color:var(--back2);
 
  --back1: #ebdfda;
  --back2: #dbd0cc;
  --backRGB: 64,46,38;
 
  --dark1: #402e26;
  --dark2: #4d3b34;
  --dark3: #6b5a52;
 
  --accent: #a1a891;
  --accentRGB: 159, 166, 144;
 
  --borderImg: url(https://i.ibb.co/R23zkmS/CC10-Border.png);
  --borderImg2: url(https://i.ibb.co/JCKTt3z/CC10-Border2.png);
  --roseImg: url(https://i.ibb.co/cYWcmTb/Rose-Small.png);
  --roseFill: url(https://i.ibb.co/W6gzSfF/Rose-Small-Fill.png);
 
  --bg: url(https://i.ibb.co/TbL1LJ2/Wowieisdfhjkdlfhsd.png);
  --pattern: url(https://i.ibb.co/nkZ4X6K/grayscaleeeeeetransparent.png);
  --corner: url(https://i.ibb.co/SRWfqvm/Borders-Waaaaa2.png);
 
  --macondo: 'Macondo', serif;
  --noto: 'Noto Serif', serif;
}

.mothe-grid { padding:66px 55px;margin:0px auto;display:grid;grid-template-columns:auto 245px;width:90%;color:var(--dark3);outline:solid 25px var(--back1);outline-offset:-55px;margin-top:-59px; }
.mothe-grid:nth-child(1) { margin-top:0px; }

.mothe-left { background-color:var(--back1);min-height:676px;position:relative;box-shadow:0px -10px 0px var(--back1), 0px -11px 0px var(--accent), 0px 10px 0px var(--back1), 0px 11px 0px var(--accent);border:solid 1px var(--back2);border-right:none;display:flex;flex-direction:column; }
.mothe-left-corner-1, .mothe-left-corner-2, .mothe-left-corner-3, .mothe-left-corner-4 { width:110px;height:60px;-webkit-mask-image:var(--corner);mask-image:var(--corner); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;z-index:10;poiner-events:none; }
.mothe-left-corner-1 { top:8px;left:8px; }
.mothe-left-corner-2 { bottom:8px;left:8px; transform:scaleY(-1); }
.mothe-left-corner-3 { top:8px;right:8px;transform:scaleX(-1); }
.mothe-left-corner-4 { bottom:8px;right:8px;transform:scaleX(-1) scaleY(-1); }
.mothe-left-corner-1::before, .mothe-left-corner-2::before, .mothe-left-corner-3::before, .mothe-left-corner-4::before { height:100%;width:100%;background-color:var(--dark1);content:'';display:block;position:absolute; }

.mothe-left-top { padding:14px 0px;border-bottom:solid 1px var(--back2);position:relative; }
.mothe-left-top::before { content:'';display:block;position:absolute;top:14px;height:calc(100% - 28px);width:100%;background-color:var(--accent);opacity:.2; }
.mothe-left-name { position:relative;z-index:2;padding:45px 100px 0px 110px;display:block;color:var(--accent);font:700 50px / 45px var(--macondo);text-transform:uppercase;text-decoration:none;filter:drop-shadow(0px 0px .4px var(--back1)) drop-shadow(0px 0px .4px var(--back1)) drop-shadow(0px 0px .4px var(--back1)) drop-shadow(0px 0px .4px var(--back1)) drop-shadow(0px 0px .4px var(--back1)) drop-shadow(0px 0px .4px var(--back1));transition:.35s; }
.mothe-left-name:hover { color:var(--dark3); }
.mothe-left-top span { color:var(--dark3);position:relative;z-index:1;margin:7px 0px 45px 116px;display:block;font:600 10px / 10px var(--noto);text-transform:uppercase;letter-spacing:3px; }
.mothe-left-post { font:13px / 30px var(--noto);letter-spacing:.25px;text-align:justify;display:grid;grid-template-columns:20px auto 20px;flex-grow:1; }
.mothe-left-post-1 { -webkit-mask-image:var(--pattern);mask-image:var(--pattern);position:relative;opacity:.4; }
.mothe-left-post-1::before { position:absolute;height:100%;width:100%;content:'';display:block;background-color:var(--accent); }
.mothe-left-post-2 { padding:55px 65px;border-left:solid 1px var(--back2);border-right:solid 1px var(--back2); }
.mothe-left-bot { color:var(--dark3);border-top:solid 1px var(--back2);padding:34px 130px;display:flex;justify-content:center;gap:15px;font:600 10px / 10px var(--noto);text-transform:uppercase;letter-spacing:3px; }
.mothe-left-bot b { text-shadow:.75px .75px 0px var(--back1), .75px 0px 0px var(--back1), 0px .75px 0px var(--back1), -.75px 0px 0px var(--back1), 0px -.75px 0px var(--back1), -.75px .75px 0px var(--back1), .75px -.75px 0px var(--back1), -.75px -.75px 0px var(--back1);color:var(--accent);background-image:linear-gradient(rgba(var(--accentRGB),.2),rgba(var(--accentRGB),.2));background-position: 0 100%;background-repeat: repeat-x;background-size: 100% 50%;padding:0px 2px 1px 4px;cursor:pointer;transition:.35s; }
.mothe-left-bot b:hover { background-size: 100% 100%; }
.mothe-left-line { width:1px;height:20px;margin:-5px 10px;background-color:var(--back2); }
.mothe-left-links { display:flex;gap:15px;font:400 14px / 10px var(--noto); }
.mothe-left-links i { display:block;height:10px;cursor:pointer;transition:.35s; }
.mothe-left-links i:hover { color:var(--accent); }
.mothe-left-links i::before { display:block;line-height:12px; }

.mothe-left-rose { position:absolute;z-index:1;left:0px;top:0px;margin:132px 0px 0px 35px;transform:rotate(-90deg); }
.mothe-left-rose-2 { height:60px;width:88px;position:absolute;-webkit-mask-image:var(--roseImg);mask-image:var(--roseImg); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; }
.mothe-left-rose-2::before { content:'';display:block;position:absolute;height:100%;width:100%;background-color:var(--dark1);}
.mothe-left-rose-1 { height:60px;width:88px;position:absolute;-webkit-mask-image:var(--roseFill);mask-image:var(--roseFill); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; }
.mothe-left-rose-1::before { content:'';display:block;position:absolute;height:100%;width:100%;background-color:var(--accent); }

.mothe-right { position:relative;min-height:656px;width:225px;padding:10px;background-color:var(--dark2);box-shadow:0px -10px 0px var(--back1), 0px -11px 0px var(--accent), 0px 10px 0px var(--back1), 0px 11px 0px var(--accent); }
.mothe-right-1 { height:656px;width:225px;position:sticky;border-radius:3px;top:10px; }
.mothe-right-1::before { content:'';display:block;position:absolute;top:5px;left:5px;width:215px;height:60px;background-color:var(--back2); }
.mothe-right-1::after { content:'';display:block;position:absolute;bottom:53px;left:55px;width:115px;height:20px;background-color:var(--back2); }

.mothe-mini-border { height:656px;width:225px;-webkit-mask-image:var(--borderImg);mask-image:var(--borderImg); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;z-index:2;border-radius:3px; }
.mothe-mini-border::before { position:absolute;content:'';display:block;height:100%;width:100%;background-color:var(--dark1); }
.mothe-mini-border2 { height:656px;width:225px;-webkit-mask-image:var(--borderImg2);mask-image:var(--borderImg2); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;z-index:1; }
.mothe-mini-border2::before { position:absolute;content:'';display:block;height:100%;width:100%;background-color:var(--accent); }
.mothe-mini-av { position:absolute;height:480px;width:220px;background-color:var(--dark1);margin:65px 0px 0px 2.5px;transition:.7s;overflow:hidden; }
.mothe-mini-av div { height:480px;width:220px;background-size:cover;background-position:center;mix-blend-mode:lighten;transition:.7s; }
.mothe-right:hover .mothe-mini-av { filter:grayscale(100%) sepia(65%) hue-rotate(-20deg);opacity:.1; }

.mothe-mini-group { position:absolute;z-index:5;height:20px;width:115px;text-align:center;bottom:53px;left:55px;font:700 21px / 20px var(--macondo);text-transform:uppercase;letter-spacing:-.5px;color:var(--dark1); }

.mothe-mini { position:absolute;overflow:hidden;z-index:1;top:65px;width:225px;height:480px;color:var(--dark1); }
.mothe-mini-svg { position:absolute;margin-top:200px;opacity:0;transition:.7s;fill:rgba(var(--accentRGB),.4);stroke:var(--dark1);stroke-width:6; }
.mothe-right:hover .mothe-mini-svg { margin-top:135px;opacity:1;transition-delay:.35s; }
.mothe-mini-level { opacity:0;margin-top:0px;color:var(--back2);font:700 100px / 240px var(--macondo);text-align:center;position:relative;padding-right:4px;letter-spacing:-5px;filter:drop-shadow(0px 0px .4px var(--dark1)) drop-shadow(0px 0px .4px var(--dark1)) drop-shadow(0px 0px .4px var(--dark1)) drop-shadow(0px 0px .4px var(--dark1)) drop-shadow(0px 0px .4px var(--dark1)) drop-shadow(0px 0px .4px var(--dark1)) drop-shadow(0px 0px .4px var(--dark1)) drop-shadow(0px 0px .4px var(--dark1)) drop-shadow(0px 0px .4px var(--dark1)) drop-shadow(0px 0px .4px var(--dark1)) drop-shadow(0px 0px .4px var(--dark1)) drop-shadow(0px 0px .4px var(--dark1)) drop-shadow(0px 0px .4px var(--dark1)) drop-shadow(0px 0px .4px var(--dark1));transition:.7s; }
.mothe-mini-level::before { font:600 12px / 10px var(--noto);content:'lv.';display:block;position:absolute;height:35px;width:35px;left:calc(50% - 15px);top:40px;color:var(--dark1);background-color:var(--accent);border-radius:100%;display:flex;align-items:center;justify-content:center;letter-spacing:0px; }
.mothe-right:hover .mothe-mini-level { margin-top:0px;opacity:1;transition-delay:.35s; }
.mothe-mini-links { display:flex;flex-direction:column;gap:5px;position:absolute;z-index:2;margin:-10px 0px 0px 30px;opacity:0;transition:.7s; }
.mothe-mini-links i { background-color:rgba(var(--backRGB),.2);cursor:pointer;border:solid 2px var(--dark1);height:36px;width:36px;border-radius:100%;display:flex;align-items:center;justify-content:center; }
.mothe-stuff { position:absolute;z-index:1;display:flex;flex-direction:column;gap:14px;align-items:flex-end;justify-content:center;width:190px;padding-right:35px;text-align:center;font:13px / 20px var(--noto);letter-spacing:1px;opacity:0;transition:.7s; }
.mothe-stuff b { color:var(--back1);font:700 20px / 15px var(--macondo);max-width:fit-content;margin:0px 0px 5px auto;display:block;background-image:linear-gradient(rgba(var(--backRGB),.2),rgba(var(--backRGB),.2));background-position: 0 100%;background-repeat: repeat-x;background-size: 100% 50%;padding:0px 4px 2px 4px;cursor:pointer;transition:.35s;letter-spacing:.35px; }
.mothe-right:hover .mothe-mini-links, .mothe-right:hover .mothe-stuff { opacity:1;transition-delay:.6s; }
</style>

<script>

</script>

<div class="mothe-grid">
<div class="mothe-left">
  <div class="mothe-left-corner-1"></div>
  <div class="mothe-left-corner-2"></div>
  <div class="mothe-left-corner-3"></div>
  <div class="mothe-left-corner-4"></div>
  <div class="mothe-left-top">
    <div class="mothe-left-rose">
    <div class="mothe-left-rose-1"></div>
    <div class="mothe-left-rose-2"></div></div>
   
    <a href="#" class="mothe-left-name">durandal</a>
    <span>until the end of time, i'll carry them with me</span>
  </div>
  <div class="mothe-left-post">
    <div class="mothe-left-post-1"></div>
    <div class="mothe-left-post-2">
    birds and butterflies, rivers and mountains she creates, but you'll never know the next move she'll make. you can try, but it is useless to ask why. cannot control her: she goes her own way. she rules until the end of time. she gives and she takes. she rules until the end of time. she goes her way.
    <br><br>
    with every breath and all the choices that we make, we're only passing through on her way. i find my strength believing that their souls live on. until the end of time, i'll carry them with me. she rules until the end of time. she gives and she takes. she rules until the end of time. she goes her way.
    <br><br>
    once you will know, my dear, you don't have to fear. a new beginning always starts at the end. once you will know, my dear, you don't have to fear. until the end of time, until the end of time, until the end of time, she goes her way. she rules until the end of time. she gives and she takes. she rules until the end of time, until the end of time, until the end of time. she goes her way.
  </div>
    <div class="mothe-left-post-1"></div></div>
  <div class="mothe-left-bot">
    <div class="mothe-left-links">
      <i class="ph ph-link"></i>
      <i class="ph ph-quotes"></i>
      <i class="ph ph-pencil"></i>
      <i class="ph ph-trash"></i>
    </div>
    <div class="mothe-left-line"></div>
    <span>written by <b>leap</b> on <b>month 00 . 0000</b></span>
  </div>
</div>
<div class="mothe-right">
<div class="mothe-right-1">
  <div class="mothe-mini-group">ranger</div>
  <div class="mothe-mini-border"></div>
  <div class="mothe-mini-border2"></div>
  <div class="mothe-mini-av"><div style="background:url(https://i.ibb.co/WBg1Jbb/2248-2.png);"></div></div>
 
  <div class="mothe-mini">
   
    <div class="mothe-mini-svg">
<svg height="480" width="225" xmlns="http://www.w3.org/2000/svg">
  <path id="mothe-path" d="M 0 25 Q 0 75 112.5 75 Q 225 75 225 25 L 225 480 L 0 480 L 0 25"/>
</svg>
    </div>
    <div class="mothe-mini-level">20</div>
    <div class="mothe-mini-links">
      <i class="ph-bold ph-book-bookmark"></i>
      <i class="ph-bold ph-sailboat"></i>
      <i class="ph-bold ph-map-pin-area"></i>
      <i class="ph-bold ph-shield-checkered"></i>
      <i class="ph-bold ph-cube"></i>
    </div>
    <div class="mothe-stuff">
      <div><b>race</b>goes here</div>
      <div><b>age</b>00 yrs old</div>
      <div><b>posts</b>00 written</div>
      <div><b>gold</b>00 earned</div>
    </div>
  </div>
     
</div></div>
</div>

<div class="mothe-grid" style="--accent:#d99a6c;--accentRGB:217,154,108;">
<div class="mothe-left">
  <div class="mothe-left-corner-1"></div>
  <div class="mothe-left-corner-2"></div>
  <div class="mothe-left-corner-3"></div>
  <div class="mothe-left-corner-4"></div>
  <div class="mothe-left-top">
    <div class="mothe-left-rose">
    <div class="mothe-left-rose-1"></div>
    <div class="mothe-left-rose-2"></div></div>
   
    <a href="#" class="mothe-left-name">rita rossweisse</a>
    <span>a new beginning always starts at the end</span>
  </div>
  <div class="mothe-left-post">
    <div class="mothe-left-post-1"></div>
    <div class="mothe-left-post-2">
      i don't even play impact 3rd, i just think these two's dynamic is super cute -
      <br><br>
      birds and butterflies, rivers and mountains she creates, but you'll never know the next move she'll make. you can try, but it is useless to ask why. cannot control her: she goes her own way. she rules until the end of time. she gives and she takes. she rules until the end of time. she goes her way.
  </div>
    <div class="mothe-left-post-1"></div></div>
  <div class="mothe-left-bot">
    <div class="mothe-left-links">
      <i class="ph ph-link"></i>
      <i class="ph ph-quotes"></i>
      <i class="ph ph-pencil"></i>
      <i class="ph ph-trash"></i>
    </div>
    <div class="mothe-left-line"></div>
    <span>written by <b>leap</b> on <b>month 00 . 0000</b></span>
  </div>
</div>
<div class="mothe-right">
<div class="mothe-right-1">
  <div class="mothe-mini-group">champion</div>
  <div class="mothe-mini-border"></div>
  <div class="mothe-mini-border2"></div>
  <div class="mothe-mini-av"><div style="background:url(https://i.ibb.co/PtD9m1M/2248-3.png);"></div></div>
 
  <div class="mothe-mini">
   
    <div class="mothe-mini-svg">
<svg height="480" width="225" xmlns="http://www.w3.org/2000/svg">
  <path id="mothe-path" d="M 0 25 Q 0 75 112.5 75 Q 225 75 225 25 L 225 480 L 0 480 L 0 25"/>
</svg>
    </div>
    <div class="mothe-mini-level">20</div>
    <div class="mothe-mini-links">
      <i class="ph-bold ph-book-bookmark"></i>
      <i class="ph-bold ph-sailboat"></i>
      <i class="ph-bold ph-map-pin-area"></i>
      <i class="ph-bold ph-shield-checkered"></i>
      <i class="ph-bold ph-cube"></i>
    </div>
    <div class="mothe-stuff">
      <div><b>race</b>goes here</div>
      <div><b>age</b>00 yrs old</div>
      <div><b>posts</b>00 written</div>
      <div><b>gold</b>00 earned</div>
    </div>
  </div>
     
</div></div>
</div>

<link href="https://fonts.googleapis.com/css2?family=Macondo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<script src="https://unpkg.com/@phosphor-icons/web"></script>
[/html]

[hideprofile][html]
<style>

/* PLEASE DO NOT USE FOR INSPIRATION */

* {
  margin: 0;
  padding: 0;
}
body {
  background: #222;
  background-image: url(https://cdn.discordapp.com/attachments/ … 144/bg.png);
  background-position: center center;
  background-size: cover;
  position: relative;
  background-attachment: fixed;
  color: #4d4d4d;
  font: 12px tahoma;
}

.the-angle {
  width: 100%;
  background: var(--gradient);
  height: 350px;
  position: fixed;
  top: 0px; left: 0px;
  z-index: 2;
  clip-path: polygon(100% 0, 100% 30%, 0 100%, 0 100%, 0 0);
  opacity: 0.5;
}

:root {
     --gradient: linear-gradient( 45deg, #845ec2, #d65db1, #ff6f91, #ff9671, #ffc75f, #f9f871 );
}

@font-face {
  font-family: mostfear;
  src: url(https://files.jcink.net/uploads2/skin015/mostfear.ttf);
}

#wrapper {
  background: #111;
  margin: 20px auto;
  width: 1100px;
  border: 1px solid #333;
  position: relative;
  z-index: 5;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.top-links {text-align: center;
  background: #1f1f1f;
  border-bottom: 1px solid #333;
  padding: 15px;
  font: 9px inconsolata;
  text-transform: uppercase;
}
.top-links ul {
  text-align: center;
  list-style-type: none;
}
.top-links li {
  display: inline-block;
  margin: auto;
}

.top-links li ~ li {
  margin-left: 79px;
}

.top-links a {
  color: #fff;
  text-decoration: none;
}
.top-links li:after {
  content: "";
  height: 1px;
  width: 100%;
  background: var(--gradient);
  display: block;
  margin-top: 4px;
}

#banner {
  width: 1100px;
  height: 400px;
  background-size: cover;
  background-image: url(https://cdn.discordapp.com/attachments/ … 34/edg.png);
  position: relative;
}
.site-name {
  font: 290px 'mostfear';
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: var(--gradient);
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -120px;
  top: 0;
  margin: auto;
  text-align: center;
  display: inline-block;
  width: 100%;
  opacity: 0.8;
}
.top-table {
  background: #1f1f1f;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 10px;
}

.innerwrapper {
  padding: 20px;
}

.cat-title {
  display: inline-block;
  padding: .2em .2em;
  margin: 50px;
  background: var(--gradient);
}
.cat-title h1 {
  margin: 0;
  background: #222;
  padding: 3em 3em;
  font: 10px inconsolata;
  text-transform: uppercase;
  color: #fff; letter-spacing: 2px;
  display: inline-block;
}

.the-forum {
  display: block;
  background: #1e1e1e;
  position: relative;
  height: 450px;
  box-shadow: 0 0 5px rgba(0,0,0,0.8);
  border: 1px solid #292929;
}

.board1 {
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url(https://cdn.discordapp.com/attachments/ … 4/bggg.png);
  height: 450px;
  width: 600px;
  background-size: cover;
  border-right: 1px solid #292929;
}
.board1-angle {
  background: var(--gradient);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 17%);
  width: 100%;
  opacity: 0.3;
  position: absolute;
  top: 0;
  height: 350px;
  right: 0;
  display: block;
}
.board1 .button {
  border: 2px solid #fff;
  text-align: center;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  z-index: 5;
  color: #fff;
  display: inline-block;
  padding: 3em 3em;
  width: 150px;
  font: 10px inconsolata;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #222;
  transition: all 450ms linear;
}
.board1 .button:hover {
  background-color: #111;
}
.board1write {
  color: #666;
  font: 400 12px playfair display;
  line-height: 20px;
  margin: 0 100px 0 100px;
  text-align: justify;
  position: relative;
  zindex: 6;
  letter-spacing: 1px;
  height: 100px;
  overflow: auto;
  position: absolute;
  top: 190px;
  padding-right: 5px;
 
}
.board1write b {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: 900;
  background-image: var(--gradient);
}

.board2 {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 150px;
  width: 43.2%;
  border-bottom: 1px solid #292929;
}

.board3 {
  position: absolute;
  top: 150px;
  right: 0px;
  height: 150px;
  width: 43.2%;
  border-bottom: 1px solid #292929;
}

.board4 {
  position: absolute;
  bottom: 0px;
  right: 0px;
  height: 150px;
  width: 43.2%;
}

.b-name {
  position: absolute;
  top: 20px; left: 20px;
}
.b-name h1 {
  margin: 0px;
  font: 80px 'mostfear';
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-decoration: none;
  opacity: 0.7;
  background-image: var(--gradient);
  display: inline-block;
}
.b-name2 h1 {
  margin: 30px 20px 20px 30px;
  font: 80px 'mostfear';
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-decoration: none;
  opacity: 0.7;
  background-image: var(--gradient);
  display: inline-block;
  line-height: 90px;
}
.b-name h1 a {
  color: transparent;
}
.b-name2 h1 a {
  color: transparent;
}
.b-name sub {
  margin-top: -13px;
  display: block;
  color: #666;
  width: 300px;
  text-transform: uppercase;
  z-index: 6;
}
.b-name sub a {
  display: block;
  text-decoration: none;
  color: #aaa;
  font: 900 13px montserrat;
}
.b-name sub b {
  display: block;
}
.b-name sub div a {display: none;
  font: 900 10px montserrat!important;
}

.b-last {
  border-radius: 360px;
  width: 67px;
  height: 67px;
  background: var(--gradient);
  position: absolute;
  top: 26%;
  right: 20px;
}

.b-last2 {
  margin: 3px 0 0 3px;
  width: 50px;
  height: 50px;
  border-radius: 360px;
  border: 6px solid #1e1e1e;
  background-size: cover;
 
}

.the-forum2 {
  padding: 30px;
  background: #1e1e1e;
  box-shadow: 0 0 5px rgba(0,0,0,0.8);
  border: 1px solid #292929;
  display: flex;
  justify-content: space-between;
}
.register {
  position: relative;
  background: #191919;
  width: 490px;
  border: 1px solid #292929;
}
.register .board2write {
  color: #666;
  font: 400 12px playfair display;
  line-height: 20px;
  text-align: justify;
  position: relative;
  zindex: 6;
  letter-spacing: 1px;
  height: 50px;
  overflow: auto;
  padding-right: 5px;
  background: #111;
  padding: 0 20px;
  border-bottom: 20px solid #111;
  border-top: 20px solid #111;
 
}
.register .board2write b {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: 900;
  background-image: var(--gradient);
}
.register .b-last {
  border-radius: 360px;
  width: 67px;
  height: 67px;
  background: var(--gradient);
  position: absolute;
  top: 16%;
  right: 20px;
}

.register .b-last2 {
  margin: 3px 0 0 3px;
  width: 50px;
  height: 50px;
  border-radius: 360px;
  border: 6px solid #1e1e1e;
  background-size: cover;
 
}
</style>
<script>

</script>
<body>
  <script src="//pull.cappuccicons.com/cpf.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@600&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap" rel="stylesheet">
  <div class="the-angle"></div>
  <div id="wrapper">
    <div class="top-links">
      <ul>
        <li><a href="#">rules</a></li>
        <li><a href="#">premise</a></li>
        <li><a href="#">groups</a></li>
        <li><a href="#">races</a></li>
        <li><a href="#">faces</a></li>
        <li><a href="#">canons</a></li>
        <li><a href="#">requests</a></li>
        <li><a href="#">directory</a></li>
        <li><a href="#">credits</a></li>
        <li><a href="#">advertising</a></li>
        <ul>
    </div>
        <div id="banner">
          <div class="site-name">apocrypha</div>
        </div>
        <div class="top-table"></div>
        <div class="innerwrapper">
         
          <div class="cat-title">
            <h1>dawn of the first day</h1>
          </div>
         
          <div class="the-forum">
           
            <div class="board1">
              <div class="board1-angle"></div>
              <div class="board1write">
                <b>this is a bold tag.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique accumsan enim eget tincidunt. Curabitur sit amet sapien turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean faucibus tellus diam, et accumsan dui rhoncus et. Pellentesque finibus, odio commodo finibus feugiat, augue lectus venenatis purus, non vehicula metus quam quis massa. Sed pharetra sodales metus, ut vestibulum quam aliquam vitae. Aliquam erat volutpat. Vestibulum fringilla, urna ut aliquam rhoncus, urna sem malesuada risus, vel dictum est lectus ut ex. Donec nibh erat, fermentum a turpis non, blandit consectetur nisi. Praesent mollis ultricies faucibus. Integer facilisis gravida libero, vitae efficitur sem blandit non. Proin viverra eu nunc quis pulvinar. Aliquam a ligula nunc. Nullam accumsan nulla quis elit cursus posuere. Nullam ultricies sit amet nunc in congue. Praesent blandit velit in lacus bibendum, a sagittis mi fringilla.
              </div>
              <div class="button">view the guidebook</div>
            </div>
           
            <div class="board2">
              <div class="b-name"><h1><a href="#">site updates</a></h1>
                _{<b><a href="#">last topic name</a></b> Apr 3 2021, 08:08 AM <div class='aurora'><a href="#">firstname lastname</a></div>}
              </div>
              <a href="#"><div class="b-last"><div class="b-last2" style="background-image: url(https://files.jcink.net/uploads2/rosepine//av-353.png);" title="firstname lastname"></div></div></a>
            </div>
           
           
            <div class="board3">
              <div class="b-name"><h1><a href="#">member center</a></h1>
                _{<b><a href="#">last topic name</a></b> Apr 3 2021, 08:08 AM <div class='aurora'><a href="#">firstname lastname</a></div>}
              </div>
              <a href="#"><div class="b-last"><div class="b-last2" style="background-image: url(https://files.jcink.net/uploads2/rosepine//av-353.png);" title="firstname lastname"></div></div></a>
            </div>
           
            <div class="board4">
              <div class="b-name"><h1><a href="#">code vault</a></h1>
                _{<b><a href="#">last topic name</a></b> Apr 3 2021, 08:08 AM <div class='aurora'><a href="#">firstname lastname</a></div>}
              </div>
              <a href="#"><div class="b-last"><div class="b-last2" style="background-image: url(https://files.jcink.net/uploads2/rosepine//av-353.png);" title="firstname lastname"></div></div></a>
            </div>
           
          </div>
         
          <div class="cat-title">
            <h1>dawn of the second day</h1>
          </div>
          <div class="the-forum2">
           
            <div class="register">
              <div class="b-name2"><h1><a href="#">registration</a></h1> <a href="#"><div class="b-last"><div class="b-last2" style="background-image: url(https://files.jcink.net/uploads2/rosepine//av-353.png);" title="firstname lastname"></div></div></a></div>
              <div class="board2write"><b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing elit. Vivamus ac egestas erat. Mauris commodo quam tristique commodo posuere. Morbi id faucibus ex. Vestibulum dictum neque massa. Integer cursus hendrerit dui non fermentum. Morbi nec condimentum augue. Cras finibus diam vitae eros tincidunt cursus. Mauris pretium lacinia facilisis. Donec fermentum diam ac quam cursus laoreet. Cras ac leo quis sapien gravida hendrerit eget eu lectus. Donec erat mi, porttitor quis urna lobortis, scelerisque bibendum tortor. In volutpat hendrerit euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac egestas erat. Mauris commodo quam tristique commodo posuere. Morbi id faucibus ex. Vestibulum dictum neque massa. Integer cursus hendrerit dui non fermentum. Morbi nec condimentum augue. Cras finibus diam vitae eros tincidunt cursus. Mauris pretium lacinia facilisis. Donec fermentum diam ac quam cursus laoreet. Cras ac leo quis sapien gravida hendrerit eget eu lectus. Donec erat mi, porttitor quis urna lobortis, scelerisque bibendum tortor. In volutpat hendrerit euismod. </div>
            </div>
           
            <div class="register">
              <div class="b-name2"><h1><a href="#">claims</a></h1><a href="#"><div class="b-last"><div class="b-last2" style="background-image: url(https://files.jcink.net/uploads2/rosepine//av-353.png);" title="firstname lastname"></div></div></a></div>
              <div class="board2write"><b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing elit. Vivamus ac egestas erat. Mauris commodo quam tristique commodo posuere. Morbi id faucibus ex. Vestibulum dictum neque massa. Integer cursus hendrerit dui non fermentum. Morbi nec condimentum augue. Cras finibus diam vitae eros tincidunt cursus. Mauris pretium lacinia facilisis. Donec fermentum diam ac quam cursus laoreet. Cras ac leo quis sapien gravida hendrerit eget eu lectus. Donec erat mi, porttitor quis urna lobortis, scelerisque bibendum tortor. In volutpat hendrerit euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac egestas erat. Mauris commodo quam tristique commodo posuere. Morbi id faucibus ex. Vestibulum dictum neque massa. Integer cursus hendrerit dui non fermentum. Morbi nec condimentum augue. Cras finibus diam vitae eros tincidunt cursus. Mauris pretium lacinia facilisis. Donec fermentum diam ac quam cursus laoreet. Cras ac leo quis sapien gravida hendrerit eget eu lectus. Donec erat mi, porttitor quis urna lobortis, scelerisque bibendum tortor. In volutpat hendrerit euismod. </div>
            </div>
           
          </div>
         
        </div>
  </div>
</body>
[/html]

[hideprofile][html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Slab:wght@100;300;400;600;700;900&display=swap');

@font-face {
font-family: 'Tolouse';
font-style: normal;
font-weight: normal;
src: url('https://dl.dropbox.com/scl/fi/1z8rrfnzuchpp05ay77qo/BlinktwiceRegular-4BvE4.otf?rlkey=xpmvnqmouqhra330ur0v8ojvu&dl=0') format('woff');}

body {background: #000;}

.assa-baul{
  width: 900px;
  height: 500px;
  border: 0.5px solid #3C3C3C;
  margin: 0 auto;
  display: flex;
}

.assa-links{
  width: 40px;
  height:460px;
  color: #dcdcdc;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-content: space-evenly;
  background: #0C0C0C;
  padding: 20px;
  position: relative;
}

.assa-linkscir{
  width: 15px;
  height: 15px;
  background: white;
  border-radius: 100%;
  margin-left: 10px;
}

.assa-linksa {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  transform: rotate(90deg);
  position: absolute;
}

.assa-img{
  width: 300px;
  height: 500px;
  background: url(https://i.pinimg.com/564x/d0/20/df/d020 … 07abce.jpg);
  background-position: bottom center;
  position: relative;
  border-right: 1px solid #636363;
  border-left: 1px solid #636363;
}

.assa-cuadro{
  width: 210px;
  height: 80px;
  background: #07555E;
  position: absolute;
  top: 350px;
  left: 25px;
  padding: 5px 20px 45px 20px;
}

.assa-cuadro h1{
color: #dcdcdc;
line-height: 8px;
font-size: 22px;
font-family: 'Raleway', sans-serif;
font-weight: 100;
text-transform: uppercase;
letter-spacing: 3px;
}

.assa-cuadro i{
  font-size: 22px;
  opacity: 0.6;
}

.assa-cuadro h2{
  font-size: 7px;
  color: #dcdcdc;
  font-family: 'Roboto Slab', serif;
  text-transform: uppercase;
  text-align: justify;
  margin-top: -15px;
  font-weight: 400;
  letter-spacing: 1.4px;
  line-height: 11px;
}

.assa-iconos{
  width: 250px;
  height: 20px;
  text-align: center;
  position: absolute;
  top: 302px;
  left: 25px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.assa-iconos span{
  background:#07555E;
  height: 10px;
  padding: 15px;
  text-align: center;
  color: #fff;
  font-size: 12px;
}

.assa-cajgran{
  width: 520px;
  height: 500px;
  display: flex;
  flex-direction: column;
}

.assa-cajgran img{
  width:520px;
  height: 500px;
  position: absolute;
  float: right;
  opacity:0.17;
  background-size: cover;
}

.assa-caja3{
  width: 520px;
  height: 80px;
  background: rgba(7, 85, 94, 0.5);
  position: relative;
}

.assa-caja3 h1{
  padding-right:20px;
  margin-top: 18px;
  text-align: right;
  font-family: 'Raleway', sans-serif;
  color: #dcdcdc;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: 20px;
  line-height: 20px;
}

.assa-caja3 i{
  position: absolute;
  -webkit-text-stroke: 1px #5A99A3;
  color: transparent;
  opacity: 0.3;
  font-size: 80px;
  left: 435px;
  line-height: 78px;
}

.assa-caja3 h2{
  width: 422px;
  color: #dcdcdc;
  font-family: 'Roboto Slab', serif;
  font-size: 7px;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  border-bottom: 1px solid #A3E3ED;
  margin-left: 74px;
  margin-top: -10px;
  line-height: 9px;
  padding-bottom: 3px;
}

.assa-caja4{
  width: 520px;
  height: 170px;
  position: relative;
}

.assa-dat{
  width: 410px;
  height: 100px;
  padding: 20px;
  border: 0.5px solid #636363;
  margin-left: 35px;
  margin-top: 30px;
}

.assa-datte::-webkit-scrollbar {width: 1px;height: 1px;}
.assa-datte::-webkit-scrollbar-thumb {background: transparent ;border: 0.5px solid #C9F1F7;}
.assa-datte::-webkit-scrollbar-track {background: transparent;}

.assa-datte{
  width: 390px;
  height: 100px;
  font-family: 'Roboto Slab', serif;
  line-height: 17px;
  color: #dcdcdc;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1px;
  overflow: auto;
  padding-right: 20px;
  text-align: justify;
}

.assa-dat b{
  background:#5A99A3;
  color: #000;
  padding: 1px;
  margin-right: 5px;
}

.assa-caja5{
  width:520px;
  height: 210px;
  background: #0C0C0C;
  position: relative;
  margin-top: 40px;
  border-top: 0.5px solid #636363;
  display: flex;
  flex-direction: row;
}

.assa-info{
  width: 140px;
  height: 130px;
  background-color: #050505;
  background-image: url("https://www.transparenttextures.com/patterns/cross-stripes.png");
  padding: 40px;
  border-right: 0.5px solid #636363;
  color: #dcdcdc;
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 8px;
  line-height: 16.5px;
  letter-spacing: 0.5px;
  position: relative;
}

.assa-info b{
  background: #357680;
  border-radius: 4px;
  padding:2px;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 8px;
  text-transform: uppercase;
  color: #fff;
}

.assa-info i{
  position: absolute;
  color: transparent;
  font-size: 80px;
  top:2px;
  left: 2px;
  opacity: 0.3;
  -webkit-text-stroke: 1px #5A99A3;
}

.assa-songs{
  width: 280px;
  height: 210px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
}

.assa-casilla{
  width: 140px;
  height: 60px;
  position: relative;
}

.assa-casilla i{
  color: #7EBEC7;
  font-size: 42px;
  line-height: 10px;
  position: absolute;
  top: 25px;
  left: 85px;
  opacity: 0.2;
}

.assa-casilla h1{
  color: #357680;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: absolute;
  width: 140px;
  text-align: center;
  top: 14px;
}

.assa-casilla h2{
  color: #dcdcdc;
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Roboto Slab', serif;
  width:110px;
  text-align: right;
  padding-right: 30px;
  top: 24px;
  position: absolute;
  font-weight: 300;
}
</style>

<div class="assa-baul"><div class="assa-links"><div class="assa-linkscir" style="background: #07555E;"></div><div class="assa-linkscir" style="background: #357680;"></div><div class="assa-linkscir" style="background: #5A99A3;"></div><div class="assa-linkscir" style="background: #7EBEC7;"></div><div class="assa-linkscir" style="background: #A3E3ED;"></div><div class="assa-linkscir" style="background: #C9F1F7;"></div><div class="assa-linkscir" style="background: #E5F5F8;"></div></div><div class="assa-img"><div class="assa-iconos"><a href="/" title="Expediente"><span class="fas fa-user"></span></a><a href="/" title="Cronología"><span class="fas fa-hourglass-half"></span></a><a href="/" title="Relaciones"><span class="fas fa-heart"></span></a><a href="/" title="Hoja de PJ"><span class="fas fa-star"></span></a><a href="/" title="Experiencia"><span class="fas fa-star-of-life"></span></a></div><div class="assa-cuadro"><h1><i class="fas fa-water"></i> Thalassa</h1><h2>The name Thalassa is girl's name of Greek origin meaning "the sea". Is the ancient personification of the sea, particularly the Mediterranean, who is sometimes considered the mother of Aphrodite.</h2></div></div><div class="assa-cajgran"><img src="https://i.pinimg.com/564x/3a/f9/53/3af953fca309c0806d1b110eec6241aa.jpg"><div class="assa-caja3"><i class="fas fa-quote-right"></i><h1>chaos makes the muse</h1><h2>One look at your eyes and I cave in, One taste of the life, now I crave it</h2></div><div class="assa-caja4"><div class="assa-dat"><div class="assa-datte"><b>01.</b>Por deseo de Ashe, recibió su apellido y no el de Andreas. Pensó que lo más equitativo era que si el nombre procedía de las tierras de su marido, lo justo era que el apellido que Assa heredara fuera el de la suya. <b>02.</b>No cree en las cosas que le decía su madre sobre la luna, el horóscopo y demás invenciones, pero algo de todo lo que Ashe le contó terminó medrando en ella. Gracias a ella y a su diario sabe que es Leo, que su metal es el oro y que su carta del tarot es el sol. Aunque incapaz de entender, lo que era importante para su madre también lo fue para ella. <b>03</b>Se crió hablando inglés porque era el único idioma en común que tenían sus padres. En su día podía entablar conversaciones con su madre en neerlandés, pero ha perdido gran parte del idioma y ahora sólo le queda el inglés y el griego.</div></div></div><div class="assa-caja5"><div class="assa-info"><b>Nombre:</b> Thalassa de Vries<br><b>Apodo:</b> Assa<br><b>Edad:</b> 35 años<br><b>Nacimiento:</b> 00/00/00<br><b>Nacionalidad:</b> griega<br><b>Legado:</b> gea<br><b>Especialidad:</b> Susurradora<br><b>Servicio:</b> 12 años</div><div class="assa-songs"><div class="assa-casilla"><i class="fas fa-headphones-alt"></i><h1>royalty</h1><h2>Neoni</h2></div><div class="assa-casilla"><i class="fas fa-headphones-alt"></i><h1>die for you</h1><h2>Grabbitz</h2></div><div class="assa-casilla"><i class="fas fa-headphones-alt"></i><h1>Fire again</h1><h2>Ashnikko</h2></div><div class="assa-casilla"><i class="fas fa-headphones-alt"></i><h1>miracle</h1><h2>bad omens</h2></div><div class="assa-casilla"><i class="fas fa-headphones-alt"></i><h1>Parasite eve</h1><h2>BMTH</h2></div><div class="assa-casilla"><i class="fas fa-headphones-alt"></i><h1>Oh, no!!!</h1><h2>Grandson</h2></div></div></div></div></div>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
[/html]

[html]
<style>
.gallery-ash {
  width: 420px;
  height: 320px;
  border: 1px solid #dcdcdc;
  margin: 0 auto;
  padding: 30px;
  display: flex;
  flex-direction: row;
  flex-flow: column wrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

.gallery-img{
  width: 150px;
  height: 320px;
  background: url(https://i.pinimg.com/564x/2c/76/67/2c76 … bb57f3.jpg);
  background-size: cover;
  position: relative;
}

.gallery-quote{
  width: 250px;
  height: 9px;
  padding: 5px;
  font-family: 'Source Serif Pro', serif;
  font-size: 8px;
  padding-left: 10px;
  text-transform: uppercase;
  letter-spacing: 4.6px;
  text-align: justify;
  line-height: 10px;
  position: absolute;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);     transform:rotate(-90deg);
  top: 153px;
  left: -132px;
  background: white;
}

.gallery-quote n{
  font-style: italic;
  letter-spacing: 4px;
}

.gallery-info{
  width: 280px;
  height: 70px;
  font-family: 'Source Sans Pro', sans-serif;
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: 4px;
  text-align: center;
  display: flex;
  justify-content: space-evenly;
  background: transparent;
  position: relative;
  align-items: center;
}

.gallery-info m{
  background: #ECF8F4;
  color: #000;
  border-radius: 3px;
  padding: 5px;
}

.gallery-list{
  width: 240px;
  height: 240px;
  padding: 0px 20px 0px 10px;
  font-family: 'Source Serif Pro', serif;
  font-size: 12px;
  line-height: 18px;
  text-align: justify;
  overflow: auto;
}

.gallery-info span{
  position: absolute;
  font-size: 70px;
  color: #ECF8F4;
  top: 4px;
  left: 182px;
  z-index: -1;
}

.gallery-list h1{
  width: 100px;
  font-family: 'Source Sans Pro', sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 14px;
  background: linear-gradient(#ACD6C8, #ACD6C8) 0 90% / 100% 8px no-repeat;
}

.gallery-list a{
  background: #ECF8F4;
  border-radius: 5px;
  padding: 3px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
}

.gallery-list::-webkit-scrollbar {width: 1px;height: 1px;}
.gallery-list::-webkit-scrollbar-thumb {background: transparent ;border: 1px solid #487380!important;}
.gallery-list::-webkit-scrollbar-track {background: #fff;}
</style>
<div class="gallery-ash"><div class="gallery-img"><div class="gallery-quote">We pay a price for believing</div></div><div class="gallery-list"><h1>Threads</h1><a>What do you want?</a> » Free use, no scroll, 100x100 img, black and white.<br><br><h1>Trackers</h1><a>Swallowing everything</a> » signature for personal use.<br><br><h1>Shippers</h1><a>Lost in time</a> » signature for personal use.<br><br><h1>Signatures</h1><a>Like a villain</a> » signature for personal use.<br><br></div><div class="gallery-info"><span class="fas fa-code"></span><m>last update:</m> April 15</div></div><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=Source+Sans+Pro:wght@400;900&family=Source+Serif+Pro:wght@400;900&display=swap" rel="stylesheet"><link href="https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css" rel="stylesheet"/>
[/html]

[html]
<style>
body {background: black;}

@font-face {
font-family: 'Highman';
font-style: normal;
font-weight: normal;
src: url('https://dl.dropbox.com/s/9w1emtijxfmum1e/Highman.ttf') format('woff');}

.baul-ollie {width: 900px;
height: 500px;
background: #0B0B0B;
margin: auto;
position: relative;
border:1px solid #222222;
overflow: auto;
outline: 1px solid #222222;
outline-offset: -20px;
position: relative;}

.baul-img {width: 400px;
height: 462px;
margin-top: 19px;
margin-left: 99px;
background-image: url(https://imgur.com/D2EZMJb.png);
background-position: center;
background-size: cover;
position: absolute;
border-right: 1px solid #52685b;}

.baul-oll1 {font-family: 'Highman';
color: transparent;
font-size: 40px;
position: absolute;
transform: rotate(-90deg);
top: 230px;
left: -150px;
line-height: 40px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #B6B6B6;}

.baul-oll2 {font-family: 'Bebas Neue', cursive;
font-size: 11px;
position: absolute;
color: #B6B6B6;
transform: rotate(-90deg);
top: 245px;
left: -5px;
background: #52685b;
padding: 5px;
letter-spacing: 5px;
line-height: 10px;}

.baul-img2 {background-image: url(https://i.pinimg.com/originals/cc/28/df … afe058.gif);
background-blend-mode: multiply;
background-color: #52685b;
border-radius: 50%;
width: 100px;
height: 100px;
position: absolute;
left: 220px;
top: 15px;
border: 4px solid #52685b;
background-position: top;
background-size: cover;}

.ollie-links {width: auto;
height: 300px;
display: flex;
flex-direction: column;
position: absolute;
left: 483px;
top:155px;
row-gap: 12px;}

.ollie-links a{font-size: 14px;
background: #52685b;
color: #B6B6B6;
padding: 8px;
outline: 1px solid #52685b;
outline-offset: -20px;
line-height: 14px;
transition: all 0.6s ease-in-out;}

.ollie-links a:hover{background: #B6B6B6;
color: #52685b;
transition: all 0.6s ease-in-out;}

.ollie-bx {
width: 300px;
height: 150px;
background: #0B0B0B;
position: absolute;
top: 50px;
left: 545px;
}

.ollie-bx i{color: #52685b;
font-size: 60px;
font-weight: 300;
opacity: 0.3;}

.ollie-bxt {color: #dcdcdc;
width: 250px;
margin-left: 25px;
font-family: 'Bebas Neue', cursive;
font-size: 10px;
letter-spacing: 3px;
text-align: justify;
opacity: 0.7;
margin-top: -25px;}

.baul-info {width: 310px;
height: 135px;
position: absolute;
left: 530px;
top: 180px;
border-top: 1px solid #52685b;
border-bottom: 1px solid #52685b;
padding-top: 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:space-between;
align-content: flex-start;
row-gap: 20px;
column-gap: 0px;
padding-left: 20px;}

.baul-infc {
width: 26%;
height: 10px;
padding: 10px;
color: #B6B6B6;
font-family: 'Bebas Neue', cursive;
font-size: 11px;
letter-spacing:1px;
line-height:10px;
}

.baul-infc i{font-size: 11px;
padding-right: 5px;
color: #52685b;
line-height: 11px;}

.baul-infc h1{color: #52685b;
font-family: 'Highman';
font-size: 16px;
letter-spacing: 2px;
line-height: 8px;}

.baul-song {width: 310px;
height: 120px;
position: absolute;
left: 530px;
top: 340px;
padding-top: 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:space-between;
align-content: flex-start;
row-gap: 20px;
column-gap: 0px;
padding-left: 20px;}

.otr-d {color: #B6B6B6;
width: 170px;
margin-top:3px;
margin-left: 2px;
font-family: 'Bebas Neue', cursive;
font-size: 10px;
letter-spacing: 1px;
line-height: 15px;
text-align: justify;}

.otr-d b{color: #52685b;}
</style>
<div class="baul-ollie"><div class="baul-img"></div><div class="baul-oll1">cross my heart and hope to die</div><div class="baul-oll2">welcome to my darkside</div><div class="ollie-links"><a href="/" title="Expediente"><i class="far fa-solid fa-user"></i></a><a href="/" title="Hoja de personaje"><i class="far fa-solid fa-book"></i></a><a href="/" title="Cronología"><i class="far fa-solid fa-clock"></i></a><a href="/" title="Relaciones"><i class="far fa-solid fa-heart"></i></a><a href="/" title="Playlist"><i class="far fa-solid fa-music"></i></a></div><div class="ollie-bx"><i class="far fa-solid fa-quote-left"></i><div class="ollie-bxt">Do you want to meet all my monsters? Think you're tough, I know they'll drive you bonkers. Meet them once and they'll forever haunt you.</div></div><div class="baul-info"><div class="baul-infc"><h1>nombre</h1><i class="far fa-solid fa-arrow-right"></i>Oliver</div><div class="baul-infc"><h1>Apodo</h1><i class="far fa-solid fa-arrow-right"></i>Ollie</div><div class="baul-infc"><h1>Edad</h1><i class="far fa-solid fa-arrow-right"></i>41 años</div><div class="baul-infc"><h1>Nacimiento</h1><i class="far fa-solid fa-arrow-right"></i>New Orleans</div><div class="baul-infc"><h1>Cumpleaños</h1><i class="far fa-solid fa-arrow-right"></i>23 de junio</div><div class="baul-infc"><h1>Oficio</h1><i class="far fa-solid fa-arrow-right"></i>Cazador</div></div><div class="baul-song"><div class="baul-img2"></div><div class="otr-d"><b>01.</b> Su libro favorito es Frankenstein <b>02.</b> Perdió el pie el mismo día que su cumpleaños. <b>03.</b> Los críos se le dan fatal, pero adoran estar cerca de él. <b>04.</b> Adora el sabor del café, pero hace tiempo que no lo cata. <b>05.</b> Desde niño le dan respeto los perros.</div></div></div>

<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=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css" rel="stylesheet"/>
[/html]

[html]
<style>
body {background: #151515;}

@font-face {
font-family: 'Boiling';
font-style: normal;
font-weight: normal;
src: url('https://dl.dropbox.com/s/7qdd4wz38u73rpu/Boiling-BlackDemo.ttf') format('woff');}

.bpo1 {width: 1050px;
height: 745px;
border:16px solid #262626;
margin: auto;
position: relative;
background: #0F0F0F;}

.bpi1 {width: 1050px;
height: 400px;
background-image: url(https://i.imgur.com/Rh4tEY6.png);
background-position: center;
background-size: cover;}

.bpc1 {clip-path: polygon(0 0, 100% 0%, 65% 100%, 0% 100%);
position: absolute;
top: 0px;
width: 500px;
height: 400px;
background: rgb(0, 0, 0, 0.8);}

.bpt1 {font-family: 'Boiling';
color: #CACACA;;
font-size: 30px;
line-height: 30px;
letter-spacing: 1px;
position: absolute;
top: 150px;
left: 200px;
border-left: 4px solid #0093a0;
padding-left: 20px;
transition: all ease-in-out 0.7s;
transition-delay:0.5s;}

.bps1 {font-family: 'Inconsolata', monospace;
position: absolute;
color: #CACACA;
top: 220px;
font-size: 10px;
line-height: 12px;
left: 200px;
word-spacing: 1px;
letter-spacing: 2px;
text-transform: lowercase;
transition: all ease-in-out 0.7s;
transition-delay:0.5s;}

.bps1 b{border-bottom: 1px dashed #0093a0;
padding-bottom: 1px;
font-weight: normal;}

.bpdg1 {width: 100px;
height: 120px;
position: absolute;
background-image: url(https://64.media.tumblr.com/47bf8344eb0 … 45116.gifv);
background-position: center;
background-size: cover;
top: 150px;
left: 200px;
filter: grayscale(100%)
brightness(60%) contrast(150%);
opacity: 0;
transition: all ease-in-out 0.7s;}

.bpla1 {width: 1030px;
height: 10px;
padding: 10px;
position: absolute;
top: 370px;
display: flex;
justify-content: space-around;
font-family: 'Inconsolata', monospace;
text-transform: uppercase;
font-size: 10px;
line-height:10px;
letter-spacing: 1px;
background: rgb(0, 0, 0, 0.5);
opacity: 0;
transition: all ease-in-out 0.7s;}

.bpla1 a{text-decoration: none;
border: none;
color: #CACACA;
font-weight: 900;
transition: all ease-in-out 0.7s;}

.bpla1 a:hover{text-decoration: none;
border: none;
color: #0093a0;
font-weight: 700;
transition: all ease-in-out 0.7s;}

.bpla1 i{color:#0093a0;
margin-top: 1px;}

.bpo1:hover .bpt1{left: 308px;
transition: all ease-in-out 0.7s;}

.bpo1:hover .bps1{left: 308px;
transition: all ease-in-out 0.7s;}

.bpo1:hover .bpdg1{opacity: 1;
transition-delay:0.5s;
transition: all ease-in-out 0.7s;}

.bpo1:hover .bpla1{opacity: 1;
transition-delay:0.5s;
transition: all ease-in-out 0.7s;}

.bpd1 {width: 1030px;
height: 35px;
background: black;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
padding: 30px 10px 30px 10px;}

.bpd1 span{border-bottom: 1px dotted #0093a0;
color: #CACACA;
height: 15px;
font-family: 'Inconsolata', monospace;
text-transform: uppercase;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
line-height: 11px;}

.bpd1 b{color: #CACACA;
text-transform: lowercase;}

.bpdf1 {width: 1020px;
height: 224px;
border: 1px solid #1E1E1E;
margin: auto;
margin-top: 12px;
display: flex;}

.bdx1 {width: 230px;
height: 160px;
padding: 30px;
color: #CACACA;
font-family: 'Inconsolata', monospace;
font-size: 12px;
font-weight: 700;
line-height: 12px;
text-align: justify;}

.bdx1 h1{font-family: 'Boiling';
font-size: 20px;
border-left: 2px solid #0093a0;
padding-left: 10px;
padding-bottom: 4px;
margin-top: -3px;}

.bdx1 b{background:#0093a0;
padding: 1px;}

.por1 {width: 220px;
height: 8px;
border: 1px solid #222222;
border-radius: 3px;
margin-top: 4px;
margin-bottom: 4px;}

.por2 {background: #0093a0;
width: 90%;
height: 8px;}

.por1 .por2{background: #0093a0;
width: 90%;
height: 100%;
border-radius: 2px;}

.bdx2 {width: 379px;
height: 160px;
padding: 30px;
color: #CACACA;
display: flex;
flex-direction: row;
flex-wrap: wrap;}

.bx1 {width: 30px;
height: 30px;
margin-bottom: 8px;
border:10px solid #262626;
margin-right: 4px;
margin-left: 4px;
position: relative;}

.bx1 i{position: absolute;
top: 7px;
left: 6px;
color: #0093a0;}

.bx2 {width: 131px;
height: 50px;
background: transparent;}

.bx2 h1{width:88%;
height: 10px;
padding: 8px;
font-family: 'Inconsolata', monospace;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
padding-left: 4px;
line-height: 12px;
border-bottom:1px solid #222222;
margin-top: 1px;}

.bx2 h2{font-size: 11px;
font-family: 'Inconsolata', monospace;
line-height: 12px;
margin-top: -3px;
text-align: right;
margin-right: 6px;
color: #0093a0;}
</style>
<div class="bpo1"><div class="bpi1"></div><div class="bpc1"></div><div class="bpla1"><span><a href="/">01. Ficha</a></span> <i class="cp cp-arrow-right"></i> <span><a href="/">02. cronología</a></span> <i class="cp cp-arrow-right"></i> <span><a href="/">03. Relaciones</a></span> <i class="cp cp-arrow-right"></i> <span><a href="/">04. Tablillas</a></span></div><div class="bpt1">don't be that way,<br>fall apart twice a day</div><div class="bps1">Was I <b>stupid to love</b> you? Was I reckless to help?<br> Was it obvious to everybody else? That <b>I'd fallen</b><br> for a lie. You were <b>never</b> on my side. Fool me once<br> <b>fool me twice</b>, are you death or paradise?</div><div class="bpdg1"></div><div class="bpd1"><span>Nombre completo:<br><br><b>Oliver Jeong Rhee</b></span><span>Cumpleaños:<br><br><b>02.01.1982</b></span><span>Lugar de nacimiento:<br><br><b>Seúl, Corea del Sur</b></span><span>Ocupación:<br><br><b>Escritor</b></span><span>Grupo:<br><br><b>Transeúntes</b></span><span>Zodiaco:<br><br><b>Capricornio</b></span><span>A. Moral:<br><br><b>Legal bueno</b></span></div><div class="bpdf1"><div class="bdx1" style="width:200px;"><h1>statistics</h1>PV: 34%<div class="por1"><div class="por2" style="width: 34%;"></div></div>Violencia: 30%<div class="por1"><div class="por2" style="width: 30%;"></div></div>Fortitud: 40%<div class="por1"><div class="por2" style="width: 40%;"></div></div>Pericia: 50%<div class="por1"><div class="por2" style="width: 50%;"></div></div>Ingenio: 60%<div class="por1"><div class="por2" style="width: 60%;"></div></div></div><div class="bdx1" style="width:237px; line-height: 16px; padding-left: 55px; font-weight: 400;"><b>01.</b> Aquí va un dato datoso que es importante para el personaje. <b>02.</b> Otro dato, datoso datorero. <b>03.</b> Otro datos, datoso, datorero, datorerillo. <b>01.</b> Aquí va un dato datoso que es importante para el personaje. <b>02.</b> Otro dato, datoso datorero. <b>03.</b> Otro datos, datoso, datorero, datorerillo. <b>01.</b> Aquí va un dato datoso. <b>01.</b> Aquí va un dato datoso que es importante para el personaje.</div><div class="bdx2"><div class="bx1"><i class="cp cp-music-note"></i></div><div class="bx2"><h1>Obey (ft. Yungblud)</h1><h2>Bring me the horizon</h2></div><div class="bx1"><i class="cp cp-music-note"></i></div><div class="bx2"><h1>No time to die</h1><h2>Billie Eilish</h2></div><div class="bx1"><i class="cp cp-music-note"></i></div><div class="bx2"><h1>Believer</h1><h2>Imagine Dragons</h2></div><div class="bx1"><i class="cp cp-music-note"></i></div><div class="bx2"><h1>I am machine</h1><h2>Three Days Grace</h2></div><div class="bx1"><i class="cp cp-music-note"></i></div><div class="bx2"><h1>Stronger</h1><h2>The Score</h2></div><div class="bx1"><i class="cp cp-music-note"></i></div><div class="bx2"><h1>Drive</h1><h2>Halsey</h2></div></div></div></div>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;700;900&display=swap" rel="stylesheet"><script src="//pull.cappuccicons.com/cpf.js"></script>
[/html]

https://codepen.io/h-omulilly/pens/public
[html]
<style>
body {
  background: #111;
}
a {
  text-decoration: none;
}

.nwishstar { border: 1px solid #222; color: #bababa; height: 500px; margin: 10px auto; overflow: hidden; width: 490px; --blanco: #ccc; --gris: #151515; --colour: #6277BF; position: relative; }
.nwishstar a { color: var(--colour); transition: .3s; }
.nwishstar a:hover { color: var(--blanco)!important; transition: .3s; }
.nwishstar br { display: none; }

.nws-head { background: var(--colour); height: 130px; width: 490px; }
.nwishstar .header-img { height: 100%; filter: grayscale(100%) contrast(120%); mix-blend-mode: multiply; object-fit: cover; width: 100%; }

.nws-head .head-icon { border: 1px solid var(--blanco); border-radius: 100%; float: right; height: 90px; margin: 14px 28px; padding: 5px; width: 90px; }
.nws-head .head-icon img { background: var(--blanco); border: 5px solid var(--blanco); border-radius: 100%; height: 80px; object-fit: cover; width: 80px; }
.nws-head .head-text { color: var(--blanco); left: 30px; letter-spacing: -1px; top: 37px; position: relative; width: 300px; }
.nws-head .head-text nombre { border-bottom: 1px solid var(--blanco); display: block; font: 900 27px times new roman; text-transform: lowercase; }
.nws-head .head-text subtitulo { display: block; font: 8px calibri; letter-spacing: .5px; line-height: 8px; padding-top: 5px; text-align: justify; text-transform: uppercase; }

.nws-body { background: var(--gris); height: 370px; position: absolute; width: 490px; overflow: hidden; }

.nwishstar input { display: none; }
.nwishstar input:checked + label { background: var(--colour); border: 1px solid var(--colour); color: var(--blanco); font-weight: bold; transition: all .3s ease; z-index: 2; }

.nwishstar label { background: var(--gris); border: 1px solid #222; color: var(--colour); cursor: pointer; display: inline-block; font-size: 13px; left: 10px; margin-right: 5px; padding: 5px 0; position: relative; text-align: center; top: 331px; transition: .3s; width: 109px; }
.nwishstar label:hover { color: var(--blanco); transition: .3s; }

#nws-tab1:checked ~ .nws-box1, #nws-tab2:checked ~ .nws-box2, #nws-tab3:checked ~ .nws-box3, #nws-tab4:checked ~ .nws-box4 { opacity: 1; transition: all .3s ease; z-index: 2;}

.nws-box1, .nws-box2, .nws-box3, .nws-box4 { background: var(--gris); height: 326px; opacity: 0; position: absolute; top: 130px; transition: all .3s ease; width: 490px; z-index: 1; }
.nws-scroll { height: 320px; overflow: auto; }
.nws-scroll .nope { filter: grayscale(100%); opacity: .3 !important; }

.nws-box1 .big-img { background: var(--gris); margin: 22px auto; outline: 1px solid #222; outline-offset: 10px; height: 287px; width: 450px; }
.nws-box1 .big-img img { height: 100%; object-fit: cover; width: 100%; filter: grayscale(20%) contrast(120%); opacity: .7; }
.nws-muses, .nws-ships { margin: 8px 10px 0; }

.nws-muses table, .nws-ships table, .nws-tags table { border-spacing: 0; }
.nws-muses .character:hover, .nws-ships .box:hover { opacity: .5; transition: .3s; }
.nws-muses .character { background: #181818; border-radius: 20px; display: inline-block; height: 74px; margin: 0 2px 2px 0; padding: 9px 5px; transition: .3s; width: 220px; }
.nws-muses .character img { border: 1px solid var(--colour); border-radius: 100%; float: left; margin: 0 4px; width: 50px; height: 50px; padding: 10px; }
.nws-muses .text { float: right; font: 8px calibri; letter-spacing: .5px; line-height: 90%; position: relative; text-transform: uppercase; top: 30px; width: 128px; }
.nws-muses .text b { color: var(--colour); display: block; font: 700 10px "Poppins"; letter-spacing: 0; line-height: 12px; }
.nws-muses .text i { padding-top: 10px; }
.nws-muses .text i, .nws-ships .ship i { color: var(--colour); display: block; font-size: 14px; margin: 0 10px; text-align: right; }

.nws-ships .box { background: #181818; border-radius: 20px; display: block; height: 74px; margin-bottom: 5px; padding: 9px; transition: .3s; width: 448px; }
.nws-ships img { border: 1px solid var(--colour); border-radius: 100%; height: 50px; padding: 10px; width: 50px; }
.nws-ships .ship { font: 8px calibri; letter-spacing: .5px; text-align: center; text-transform: uppercase; width: 100%; }
.nws-ships .ship b { border-bottom: 1px solid #222; color: var(--colour); display: block; font: 600 10px "Poppins"; letter-spacing: 0; }

.nws-tags table { margin-bottom: 14px; }
.nws-tags { font: bold 8px calibri; margin: 20px 20px -5px; text-transform: uppercase; }
.nws-tags .ttl { background: var(--colour); letter-spacing: .5px; text-align: center; width: 70px;}
.nws-tags i { font-size: 20px; display: block; }
.nws-tags l, .nws-tags p { background: #181818; display: inline-block; letter-spacing: 1px; margin: 1px; padding: 8px 0; text-align: center; width: 183.5px; }
.nws-tags p { font: bold 8px calibri; width: 369px; }
.nws-tags l:hover, .nws-tags p:hover { background: var(--colour); cursor: pointer; transition: .3s; }

.nws-scroll::-webkit-scrollbar { width: 5px; height: 0; }
.nws-scroll::-webkit-scrollbar-thumb { background-color: var(--colour); }
.nws-scroll::-webkit-scrollbar-track-piece { background-color: #181818; }
</style>
<div class="nwishstar" style="--colour: #6277BF;"><div class="nws-head">
<div class="head-icon"><img src="https://i.pinimg.com/564x/39/42/5a/39425a56d3410f5d038059ce3850384a.jpg"></div>
<div class="head-text"><nombre>name lastname</nombre>
<subtitulo>Up on Melancholy Hill There's a plastic tree Are you here with me?Just looking out on the day Of another dream Well you can't get what you want But you can get me So let's set out to sea, love' Cause you are my medicine When you're close to me.</subtitulo></div></div>
<div class="nws-body"></div>

<input type="radio" id="nws-tab1" name="nws-tab" checked><label for="nws-tab1" id="nws-tab1"><i class="fas fa-thumbtack"></i></label>
<input type="radio" id="nws-tab2" name="nws-tab"><label for="nws-tab2" id="nws-tab2"><i class="fas fa-gem"></i></label>
<input type="radio" id="nws-tab3" name="nws-tab"><label for="nws-tab3" id="nws-tab3"><i class="fas fa-heartbeat"></i></label>
<input type="radio" id="nws-tab4" name="nws-tab"><label for="nws-tab4" id="nws-tab4"><i class="fas fa-hashtag"></i></label>

<div class="nws-box1"><div class="big-img"><img src="https://i.pinimg.com/564x/5a/1d/71/5a1d71b76ef07164e0b7a862ed80d545.jpg"></div></div>

<div class="nws-box2"><div class="nws-scroll"><div class="nws-muses"><table>
 
  <tr><td><div class="character nope"><img src="https://via.placeholder.com/50/222222"><div class="text"><b>character</b>procedencia<i class="fas fa-times"></i></div></div></td>
   
  <td><div class="character"><img src="https://via.placeholder.com/50/222222"><div class="text"><b><a href="/">character</a></b>procedencia<i class="fas fa-check"></i></div></div></td></tr>
 
  <tr><td><div class="character"><img src="https://via.placeholder.com/50/222222"><div class="text"><b>character</b>procedencia<i class="fas fa-toggle-off"></i></div></div></td>
   
  <td><div class="character"><img src="https://via.placeholder.com/50/222222"><div class="text"><b>character</b>procedencia<i class="fas fa-toggle-on"></i></div></div></td></tr>
 
  <tr><td><div class="character"><img src="https://pbs.twimg.com/media/DvOYaIGWsAAO-AE.jpg"><div class="text"><b>Samatoki  Aohitsugi</b>Hypnosis Mic</div></div></td>
   
  <td><div class="character"><img src="https://via.placeholder.com/50/222222"><div class="text"><b>character</b>procedencia</div></div></td></tr>
 
  <tr><td><div class="character"><img src="https://via.placeholder.com/50/222222"><div class="text"><b>character</b>procedencia</div></div></td>
   
  <td><div class="character"><img src="https://via.placeholder.com/50/222222"><div class="text"><b>character</b>procedencia</div></div></td></tr>

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

<div class="nws-box3"><div class="nws-scroll"><div class="nws-ships"><table>
 
  <tr class="box nope"><td><img src="https://via.placeholder.com/50/222222"></td><td class="ship"><b>name + name</b> procedencia <i class="fas fa-toggle-on"></i></td><td><img src="https://via.placeholder.com/50/222222"></td></tr>
 
  <tr class="box"><td><img src="https://via.placeholder.com/50/222222"></td><td class="ship"><b>name + name</b> procedencia</td><td><img src="https://via.placeholder.com/50/222222"></td></tr>
 
  <tr class="box"><td><img src="https://via.placeholder.com/50/222222"></td><td class="ship"><b>name + name</b> procedencia</td><td><img src="https://via.placeholder.com/50/222222"></td></tr>
 
  <tr class="box"><td><img src="https://via.placeholder.com/50/222222"></td><td class="ship"><b>name + name</b> procedencia</td><td><img src="https://via.placeholder.com/50/222222"></td></tr>

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

<div class="nws-box4"><div class="nws-scroll"><div class="nws-tags">
 
  <table><tr><td class="ttl"><i class="fas fa-meteor"></i>plots</td><td class="tgs"><l>banana fish au</l><l>tag</l><l>tag</l><l>tag</l><l>tag</l><l>tag</l></td></tr></table>
 
  <table><tr><td class="tgs"><l>tag</l><l>tag</l><l>tag</l><l>tag</l><l>tag</l><l>tag</l></td><td class="ttl"><i class="fas fa-bolt"></i>tropes</td></tr></table>
 
  <table><tr><td class="ttl"><i class="fas fa-tags"></i>tags</td><td class="tgs"><l>tag</l><l>tag</l><l>tag</l><l>tag</l><l>tag</l><l>tag</l></td></tr></table>
 
  <table><tr><td class="tgs"><p>freedom / blue encount</p><p>tag</p><p>tag</p></td><td class="ttl"><i class="fas fa-music"></i>songs</td></tr></table>
 
  <table><tr><td class="ttl"><i class="fas fa-fire"></i>dynamics</td><td class="tgs"><l>tag</l><l>tag</l><l>tag</l><l>tag</l></td></tr></table>
 
  <table><tr><td class="tgs"><l>tag</l><l>tag</l><l>tag</l><l>tag</l></td><td class="ttl"><i class="fas fa-paperclip"></i>others</td></tr></table>

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

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap" rel="stylesheet">
[/html]

[html]
<style>
body {background: #000;} a {text-decoration: none;}
:root {
  --bgc_1: #0f0f12;
  --bg_main: #161617;
  --bg_c: #1c1c1f;
  --bg_c1: #222226;
  --bg_c2: #2e2e36;
  --color: #50377d;
  --SEDUCER: #CF64A4;
  --MAGE: #AF70CA;
  --MUSE: #CEA8CE;
  --RULER: #9F88DC;
  --TRICKSTER: #737BC9;
  --CREATOR: #7691EF;
  --EVERYMAN: #8ECAEE;
  --SAGE: #88C8BE;
  --SLAVE: #7C9984;
  --KEEPER: #A2CBA2;
  --EXPLORER: #AABA68;
  --ORPHAN: #AB954E;
  --KNIGHT: #EDB36B;
  --JESTER: #DD8660;
  --ROGUE: #DB4D4D;
  --LOVER: #EA808C;
  --INNOCENT: #E8AEC2;
  --BEAST: #BB7565;
}

#GRUPO { --grupo: var(--color); }
#SEDUCER { --grupo: var(--SEDUCER); }
#MAGE { --grupo: var(--MAGE); }
#RULER { --grupo: var(--RULER); }
#TRICKSTER {--grupo: var(--TRICKSTER); }
#CREATOR { --grupo: var(--CREATOR); }
#EVERYMAN { --grupo: var(--EVERYMAN); }
#SAGE { --grupo: var(--SAGE); }
#SLAVE {--grupo: var(--SLAVE); }
#KEEPER { --grupo: var(--KEEPER); }
#EXPLORER { --grupo: var(--EXPLORER); }
#ORPHAN { --grupo: var(--ORPHAN); }
#KNIGHT { --grupo: var(--KNIGHT); }
#JESTER { --grupo: var(--JESTER); }
#BEAST {--grupo: var(--BEAST); }
#ROGUE { --grupo: var(--ROGUE); }
#LOVER { --grupo: var(--LOVER); }
#INNOCENT { --grupo: var(--INNOCENT); }
#MUSE {--grupo: var(--MUSE); }
#GRUPO { --grupo: #A29DAE); }
#STAFF { --grupo: #E2D7FF; }
#ABSENT { --grupo: #585269; }
#ROOKIE { --grupo: #A29DAE; }

/******BASIC END******/

.sgbox br {
    display: none;
}

.sgbox {
    background: var(--bgc_1);
    border-radius: 10px;
    color: #c9c9c9;
    height: auto;
    margin: 10px auto;
    position: relative;
    width: 620px;
    overflow: hidden;
    border-bottom: 3px solid var(--grupo);
}

.sg-grid {
    display: grid;
    grid-template-columns: 480px 120px;
    grid-template-rows: 140px auto;
}

.sgheader {
    background: var(--grupo);
    height: 140px;
    opacity: .7;
    width: 480px;
}

.sgheader img {
    filter: grayscale(100%) contrast(120%);
    height: 100%;
    mix-blend-mode: multiply;
    object-fit: cover;
    width: 100%;
}

.sgbox-int {
    background: var(--bg_main);
    border: 1px solid var(--bg_c2);
    color: var(--grupo);
    font: 800 60px playfair display;
    font-style: italic;
    height: 100px;
    line-height: 100px;
    margin: 20px;
    text-align: center;
    width: 100px;
    opacity: .7;
}

.sgbox-phr {
    background: var(--bg_c);
    border-bottom: 5px solid var(--grupo);
    color: var(--grupo);
    font: 700 9px inter;
    letter-spacing: .3px;
    opacity: .7;
    text-align: justify;
    padding: 10px;
    width: 460px;
    margin-right: 2px;
}

.sgbox-mini {
    grid-area: 2 / 2 / 4;
    width: 120px;
    height: 790px;
}

.mini-img {
    border: 2px solid var(--grupo);
    outline: 10px solid var(--bg_c);
    height: 70px;
    width: 70px;
    margin: 20px 35px 0;
    opacity: .7;
    border-radius: 100%;
    overflow: hidden;
}

.mini-img .sgcolor {
  height: 70px;
  width: 70px;
  background: var(--grupo);
  margin: -75px 0;
  mix-blend-mode: multiply;
  transition: 0.5s;
  border-radius:100%;
}

.mini-img img {
    filter: grayscale(100%) contrast(120%);
    height: 70px;
    transition: 0.5s;
    width: 70px;
}

.sgbox:hover .mini-img img { filter: grayscale(0%) contrast(120%); transition: 0.5s; mix-blend-mode: normal; }
.sgbox:hover .mini-img  .sgcolor { opacity: 0; transition: 0.5s; }

.mini-dato div { transform: rotate(90deg); display: flex; width: 500px; margin: 287px -177px;
}
.mini-dato span { background: var(--bg_c); display: block; padding: 15px 20px; font: 500 15px poppins;  margin: 0 10px; color: #ccc; letter-spacing: .5px; border-radius: 10px; }
.mini-dato span b { color: var(--grupo); font-weight: 700; opacity: .7; }

.mini-icon { opacity: .7; font-size: 74px; position: absolute; bottom: 15px; right: 30px; }
.mini-icon a { color: var(--grupo) ; }

.sgbox-content {
    background: var(--bg_main);
    font-size: 11.5px;
    font-family: inter;
    line-height: 18px;
    padding: 30px;
    text-align: justify;
    width: 420px;
}

.mini-title { background: var(--bg_c); padding: 10px 10px 5px 30px; max-width: 300px; display: block; height: 34px; border-bottom-right-radius: 50px; border-top-right-radius: 50px; border: 1px solid var(--bg_c2); border-left: 1px solid var(--bg_main); font: 500 12px poppins; text-transform: lowercase; color: #ccc;
margin-bottom: 30px; margin-left: -30px; }

.mini-title span {
    display: block;
    font: 500 20px playfair display;
    text-transform: lowercase;
    letter-spacing: -.5px;
    color: var(--grupo);
    line-height: 15px;
    opacity: .7;
}

.content-text b, .content-text u { color: var(--grupo); }
.content-text u { text-decoration: none; font-size: 13px; font-weight: bold; font-family: poppins; border-bottom: 1px solid var(--bg_c1); }
.content-text a { text-decoration: none; font: 700 13px playfair display; color: #f3f3f3; }
.content-text:first-letter { float: left; font: 800 100px playfair display; color: var(--grupo); padding: 0 20px; margin: -10px 10px 20px; opacity: .7; text-transform: lowercase; line-height: 70px; }
.content-text br { display: block; }

.sgbox ::selection { background: var(--grupo); color: #000;} .sgbox ::-moz-selection { background: var(--grupo); color: #000; }
</style>
<div id="JESTER" class="sgbox">
  <div class="sg-grid">
    <div class="sgheader">
      <img src="https://pbs.twimg.com/media/E-m7Qp2VcAQ2Mvt?format=png&name=900x900"></div>
    <div class="sgbox-int">L</div>
    <div class="sgbox-phr">
    I love dessert donut sweet roll cupcake wafer jelly-o toffee marshmallow. Gummies gummies marzipan wafer danish. Jelly beans chocolate cake cake halvah I love gingerbread pie cake cotton candy. Sweet roll jelly beans gingerbread gingerbread tiramisu chocolate sweet roll chocolate.
    </div>
    <div class="sgbox-mini">
      <div class="mini-img"><img src="https://pbs.twimg.com/profile_images/1272894042469212160/ZN7Rhn5r.jpg"><div class="sgcolor"></div></div>
      <div class="mini-dato"><div>
        <span><b>dato</b>dato</span>
        <span><b>dato</b>dato</span>
        <span>dato<b>dato</b></span>
      </div></div>
        <div class="mini-icon">
          <a href=""><i class="cp cp-fire"></i></a>
        </div>
      </div>
    <div class="sgbox-content">
      <div class="mini-title">
        <span>What an unfortunate adventure!</span>I could not close my eyes the whole night
      </div><div class="content-text">
      What an unfortunate adventure! I could not close my eyes the whole night. A thousand times I wished I had never left Berry Hill: however, my return thither shall be accelerated to the utmost of my power; and, once more in that abode of tranquil happiness, <i>I will suffer no temptation to allure me elsewhere.</i><br><br>

  Mrs. Mirvan was so kind as to accompany me to Madame Duval's <a href="">house</a> this morning. The Captain, too, offered his service; which I declined, from a fear she should suppose I meant to insult her.<br><br>

  She frowned most terribly upon Mrs. Mirvan; but <u>she received me with as much tenderness</u> as I believe she is capable of feeling. Indeed, our meeting seems really to have affected her; for when, overcome by the variety of emotions which the sight of her occasioned, I almost fainted in her arms, she burst into tears, and said, "let me not lose my poor daughter a second time!" This unexpected humanity softened me extremely; but she very soon excited my warmest indignation, by the ungrateful mention she made of the best of men, my dear and most generous benefactor. However, grief and anger mutually gave way to terror, upon her avowing the intention of her visiting England was to make me return with her to France. This, she said, was a plan she had formed from the instant she had heard of my birth; which, she protested, did not reach her ears till I must have been twelve years of age; but Monsieur Duval, who she declared was the worst husband in the world, would not permit her to do any thing she wished: he had been dead but three months; which had been employed in arranging certain affairs, that were no sooner settled, than she set off for England. She was already out of mourning, for she said nobody here could tell how long she had been a widow.<br><br>

<b>She must have been married</b> very early in life: what her age is I do not know; but she really looks to be less than fifty. She dresses very gaily, paints very high, and the traces of former beauty are still very visible in her face.
      </div></div>
  </div>
</div>

<head><script src="//pull.cappuccicons.com/cpf.js"></script></head><link rel="stylesheet" type="text/css" href="//icons.cappuccicons.com/cpf.css"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,700&display=swap" rel="stylesheet">
[/html]

[html]
<style>
body{
  background:#000;
}

@font-face {font-family: enigmatic;
  src: url(https://dl.dropbox.com/scl/fi/efppql0dr … ij2k7&);}

.simoneback{
  max-width: 800px;
  background:#090909;
  height:auto;
  margin:auto;
  padding:60px;
  box-sizing:border-box;
  position:relative;
}

.simonerol{
  max-width: 800px;
  background:#090909;
  height:auto;
  margin:auto;
  padding:60px;
  box-sizing:border-box;
  border:1px solid #161616;
  color:#bbb;
  text-align:justify;
  font-size:11px;
  line-height:21px;
  font-family:merriweather;
  position:relative;
}

.simonerol strong, .simonerol i{
  color:var(--groups);
}

.s-sub{
  max-width:800px;
  margin:auto;
  font-family: martian mono;
  font-size: 7px;
  line-height:8px;
  padding:5px;
  text-transform: uppercase;
  letter-spacing:2px;
  text-align:center;
  background: #090909;
  position:absolute;
  top:-9px;
  left:20px;
  color:#4D4187;
  font-weight:bold;
}

.s-sub t{
}

.simotitle{
  font-family:enigmatic;
  font-size:50px;
  line-height:54px;
  color:#4D4187;
  text-align:center;
  margin-bottom:30px;
  margin-top:20px;
  text-transform:lowercase;
}

.s-iconbox{
  width:55px;
  height:55px;
  border-left:2px dashed #ccc;
  border-right:2px dashed #ccc;
  border-radius:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:auto;
}

.s-iconbox i{
  font-size:32px;
  line-height:35px;
  margin-top:5px;
  color:#4D4187;
}

.s-tag{
  text-align:right;
  box-sizing:border-box;
  margin-top:40px;
}

.s-tag span{
  font-family:martian mono;
  font-size:8px;
  letter-spacing:0px;
  font-weight:600;
  text-transform:uppercase;
  margin-left:5px;
  border:1px solid #222;
  padding:5px;
}

.s-tag c{
  font-family:enigmatic;
  font-size:25px;
  display:block;
  margin-bottom:5px;
}

.s-tag i{
  color:#4D4187;
}

.s-tag b{
  color:#4D4187;
  font-weight:400;
  text-transform:lowercase;
}
</style>
<div class="simoneback"><div class="simonerol"><div class="s-sub"><t>Lorem ipsum dolor sit amet, consectetur adipiscing elit</t></div><div class="s-iconbox"><i class="game-icon game-icon-beveled-star"></i></div><div class="simotitle">something here</div> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 
  <div class="s-tag"><c>ft. <b>@"nombre de personaje"</b></c><span><i class="fa-solid fa-location-dot"></i> lugar</span> <span><i class="fa-regular fa-clock-desk"></i> hora</span> <span><i class="fa-solid fa-sun-cloud"></i> fecha</span></div></div></div>

<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=Martian+Mono:wght@100..800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet"><link href="https://dl.dropboxusercontent.com/s/thpzqkqhf1pzqnx/game-icons.css" rel="stylesheet" /><link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.5.1/css/all.css">
[/html]

[html]
<style>
body{
background: #dadada;
}

:root {
    --icontit: url(https://i.ibb.co/jvwVP8y/icotst12.png);
    --sobrenatural: #7998d5;
    --hibridos: #b186bf;
    --metahumanos: #b7898d;
    --humanos: #5ba984;
    --milagros: #cda65e;
    --nuevos: #949494;
    --ausentes: #41404b;
    --revy: #ba4d56;
}

.revytab{
  width: 640px;
  border-radius:15px;
  overflow:hidden;
  margin: auto;
}

.revyback{
  background:#e3e2e2;
  width: auto;
}

.revytt{
  font-family: revyf;
  font-size: 50px;
  color:var(--revy);
  text-align:center;
  padding-top:70px;
}

.revytt t{
  font-family: martian mono;
  font-size: 9px;
  text-transform:uppercase;
  letter-spacing:2px;
  display:block;
}

.revytt i{
  margin-top:20px;
  font-size:50px;
}

.revytt c{
  width:1px;
  height:60px;
  background:var(--revy);
  display:block;
  margin:auto;
  margin-top:30px;
}

.revybottom{
  width: auto;
  height: 160px;
  background-color: var(--revy);
background-image: url("https://www.transparenttextures.com/patterns/xv.png");
  display: flex;
  align-items:center;
  justify-content:center;
}

.rvtxt{
  font-family: cambria;
  width:400px;
  margin: auto;
  text-align:justify;
  font-size: 14px;
  line-height: 24px;
  padding:70px 0px 70px 0px;
}

.imgicon{
  width: 80px;
  height: 80px;
  background:#eaeaea;
  border-radius:100%;
  display:flex;
  align-items:center;
  justify-content:center;
 
}

.imgicon i{
  font-size:40px;
  color:var(--revy);
  margin-top:7px;
}

.pulse {
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(255, 0, 0, 0);
  }
}

.rtags{
  display:flex;
  gap:10px;
  margin-left:20px;
  margin-top:10px;
}

.rtags t{
  font-family: martian mono;
  font-size: 9px;
  line-height: 9px;
  text-transform: uppercase;
  color: #eee;
  border:1px solid #eee;
  padding: 7px;
  border-radius:10px;
}

.rvtag c{
  width: 400px;
  font-family: revyf;
  font-size: 30px;
  line-height: 30px;
  color: #eee;
  padding-bottom: 5px;
  display:block;
  border-bottom:1px solid #eee;
  margin-bottom: 5px;
  padding-left: 20px;
}

@font-face {
  font-family: "revyf";
  src: url("https://dl.dropbox.com/scl/fi/01vnnarz5m0fkdx6m9yeg/Canopee-Regular.otf?rlkey=m0u2jr1vfytwc0c2bakyndqk0&dl=0");
}
</style>
<div class="revytab"><div class="revyback"><div class="revytt">something <t>Lorem ipsum dolor sit amet.</t><i class="fa-thin fa-xmark"></i></div><div class="rvtxt">Lorem ipsum dolor sit amet. Nam laudantium molestiae quo nesciunt vero et voluptas debitis ut inventore sunt et ipsa cumque. Id illum blanditiis est harum voluptatem ex eius galisum ut maiores aliquam.

Ut nobis quam ut mollitia sapiente rem nemo voluptatibus ut blanditiis nihil aut esse rerum est vero perferendis. Ab illo distinctio et voluptatibus reiciendis ut fuga quia sit repellendus consectetur et eius facere et tempora omnis est saepe iusto? Et officia voluptatem sit provident excepturi in rerum odit.

Qui doloribus dignissimos sed libero corrupti in incidunt voluptatum hic minima minima. Nam nisi repellat ut dolorem amet est culpa obcaecati? Sit eius consequuntur est similique necessitatibus ut exercitationem modi qui officiis itaque.</div></div><div class="revybottom"><div class="imgicon pulse"><i class="game-icon game-icon-gun-rose"></i></div><div class="rvtag"><c>ft. someone</c><div class="rtags"><t><i class="fa-solid fa-location-dot"></i> lugar</t><t><i class="fa-solid fa-moon"></i> noche/tarde/día</t></div></div></div></div>

<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=Martian+Mono:wght@400;700&display=swap" rel="stylesheet">
<link href="https://dl.dropbox.com/s/thpzqkqhf1pzqnx/game-icons.css" rel="stylesheet"/><link href="https://site-assets.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">
[/html]

[html]
<style>
:root {
    --memphis: #7D4545;
}

body{
  background:#000;
}

.gambitvault{
  max-width: 850px;
  background:#090909;
  margin: auto;
}

.gambitvimg{
  max-width: 800px;
  height: 280px;
  background:url(https://i.imgur.com/e9XVEOx.png);
  margin-left:50px;
  position: relative;
}

.gambitnm{
  width: 400px;
  text-align: left;
}

.gambitlr{
  font-family: jost;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing:3px;
  width: 160px;
  line-height: 12px;
  font-weight: 900;
  text-align: justify;
  padding:20px;
  background:#050505;
  position: absolute;
  left: -50px;
  top: 80px;
  color: #777;
}

.gambitlr b{
  background:var(--memphis);
  color:#000;
}

.gambitnm2{
  width: 100px;
  height: 50px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-family: big shoulders display;
  color: #ccc;
  text-transform: uppercase;
  font-weight: 100;
  font-size: 60px;
  position: relative;
  left: 180px;
  line-height: 40px;
  top:93px;
  text-align:justify;
  letter-spacing:0px;
}

.gambitnm2 t{
  font-size: 60px;
  line-height: 60px;
  letter-spacing:0;
  font-weight: bold;
  margin: 8px 0px;
  -webkit-text-stroke: 1px var(--memphis);
  color:transparent;
}

.gambitnm n{
  font-size: 33px;
  letter-spacing:17px;
  line-height: 10px;
}
</style>
<div class="gambitvault"><div class="gambitvimg"><div class="gambitnm"><div class="gambitlr">I've been trying to figure out exactly <b>what it is I need</b>. Called up to listen to the voice of reason And got the answering machine.</div> <div class="gambitnm2"><n>VINCENT</n> <t>GAMBIT</t> <n style="letter-spacing:22px;">GRAVES</n></div></div></div></div>

<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=Big+Shoulders+Display:wght@200;400;600;900&family=Cairo+Play&family=Jost:wght@400;700&display=swap" rel="stylesheet">
[/html]

[html]
<style>

.busquedavesper{
  width: 420px;
  padding: 50px;
  background: #000;
  margin: auto;
}

.titlebus{
  font-family: abril fatface;
  color: #fff;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 3px;
  text-align: center;
  line-height: 10px;
}

.disclaim-v{
  width: auto;
  border:1px solid #fff;
  color: #fff;
  font-family: merriweather;
  font-size: 9px;
  padding: 20px;
  margin: auto;
  margin-top: 30px;
  column-count: 2;
  text-align: justify;
  column-gap: 25px;
}

.busti{
  width: auto;
  font-size: 30px;
  letter-spacing:-1px;
  color: #4aaabf;
  font-family: abril fatface;
  text-transform: uppercase;
  text-align: center;
  margin: auto;
  line-height: 20px;
  margin-top: 30px;
}

.subbus{
  font-family: merriweather;
  font-size: 7px;
  letter-spacing:1px;
  color: #fff;
  text-transform: uppercase;
  line-height: 15px;
  margin-top: 10px;
  padding-bottom:5px;
  border-bottom: 1px solid #4aaabf;
}

.txtbus{
  width: 420px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.imgbus{
  width: 170px;
  height: 300px;
  position: sticky;
  background: #124444;
  border:10px solid #111;
}

.imgbus img{
  width: 170px;
  height: 250px;
}

.buscovesp{
  width: 200px;
  font-family: merriweather;
  font-size: 9px;
  text-align: justify;
  color: #fff;
  line-height: 14px;
  overflow: auto;
  height: 320px;
  padding-right: 10px;
}

.disclaim-v i{
  color: #4aaabf;
  margin-right: 3px;
}

.subbus i{
  color: #4aaabf;
  margin: 3px;
}

</style>

<div class="busquedavesper"><div class="titlebus">/ asi se llama la búsqueda /</div><div class="disclaim-v"><i class="far fa-exclamation-circle"></i> aquí va el disclaimer donde digo lo que si, lo clásico, eso de que gracias por venir y todo.</div><div class="busti">hola <div class="subbus">fem <i class="fas fa-caret-right"></i> +27 años <i class="fas fa-caret-right"></i> trabajo indif, grupo indif.</div></div><div class="txtbus"><div class="imgbus"></div><div class="buscovesp">Aquí va la búsqueda bonita de mi familia kermosa, porque todas son las más guapas y geniales del mundo, yes yes. Ojalá lleguen, ya ke. Aquí va la búsqueda bonita de mi familia kermosa, porque todas son las más guapas y geniales del mundo, yes yes. Ojalá lleguen, ya ke. Aquí va la búsqueda bonita de mi familia kermosa, porque todas son las más guapas y geniales del mundo, yes yes. Ojalá lleguen, ya ke. Aquí va la búsqueda bonita de mi familia kermosa, porque todas son las más guapas y geniales del mundo, yes yes. Ojalá lleguen, ya ke.Aquí va la búsqueda bonita de mi familia kermosa, porque todas son las más guapas y geniales del mundo, yes yes. Ojalá lleguen, ya ke.Aquí va la búsqueda bonita de mi familia kermosa, porque todas son las más guapas y geniales del mundo, yes yes. Ojalá lleguen, ya ke.Aquí va la búsqueda bonita de mi familia kermosa, porque todas son las más guapas y geniales del mundo, yes yes. Ojalá lleguen, ya ke. Aquí va la búsqueda bonita de mi familia kermosa, porque todas son las más guapas y geniales del mundo, yes yes.</div></div></div><link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"><link href="https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css" rel="stylesheet"/>

[/html]