[html]
<style>
@font-face {
font-family: 'Hiraj';
font-style: normal;
font-weight: normal;
src: url('https://dl.dropbox.com/s/gr0wsb5k0j2pyur/Hijrah_DEMO.otf') format('woff');
}

html,body{
  background: #222;
}

.moxleycrono{
  width: 800px;
  height: 600px;
  padding: 30px;
  background: #0c0c0c;
  margin: auto;
}

.moxlcr2{
  width: auto;
  height: 600px;
  border:2px solid #5c4763;
  transition: all ease-in-out 0.6s;
}

.shcrbox{
  width: 300px;
  height: auto;
  display: flex;
  align-items: center;
  vertical-align: middle;
  padding: 10px;
}

.cricon{
  font-family: chill;
  font-size: 40px;
  color: #5c4763;
  text-align: center;
  line-height: 30px;
  padding-right: 10px;
  padding-top:10px;
  border-right:1px solid #222;;
}

.cricon span{
  font-family: teko;
  font-size: 9px;
  text-transform: uppercase;
  display: block;
  letter-spacing: 2px;
  margin-left:1px;
  color: #5c4763!important;
  font-weight: 500;
}

.shthread a{
  font-family: archivo;
  font-size: 12px;
  letter-spacing:-1px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 900;
  color: #5c4763!important;
  border-bottom: 1px solid transparent;
  padding-bottom:4px;
  transition: all ease-in-out 0.5s;
}

.shthread{
  position: relative;
  left: 10px;
  line-height: 14px;
}

.shthread span{
  color: #777!important;
  display: block;
  font-family: teko;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: #111;
  padding:3px 5px 3px 5px;
  font-weight: 600;
  line-height: 12px;
  margin-top: 4px;
}

.shthread i{
  font-size: 6px;
  color:#5c4763!important;
  margin:3px;
}

.shthread a:hover{
  color: #777;
  padding-left: 5px;
  border-bottom:1px solid #5c4763;
  transition: all ease-in-out 0.5s;
}

.cronotitle{
  font-family: chill;
  font-size: 45px;
  color: #666;
  text-align: right;
  line-height: 25px;
  padding:20px;
}

.cronotitle span{
  width: 40px;
  height:2px;
  background: #5c4763;
  position: relative;
  float: right;
  margin-top:20px;
}

.thabibox{
  width: 660px;
  height: 460px;
  padding:30px;
  background: #0f0f0f;
  margin: auto;
  position: relative;
  top: 40px;
  display: flex;
  justify-content: space-between;
}

.thabisa1{
  width: 300px;
  height: 435px;
  padding:10px;
  border:1px solid #222;
}

@font-face {
font-family: 'Chill';
font-style: normal;
font-weight: normal;
src: url('https://dl.dropbox.com/s/agpnu5irqlaaeco/Chillvornia%20Stamp%20Slant.otf') format('woff');
}
</style>
<div class="moxleycrono"><div class="moxlcr2"><div class="thabibox"><div class="thabisa1"><div class="cronotitle">flashbacks<br><span></span></div><div class="shcrbox"><div class="cricon">00 <span>day</span></div><div class="shthread"><a href="#">nombre del tema</a><span><i class="fa fa-skull" style="color: #555!important;"></i> con alguien <i class="fa fa-chevron-right"></i> lugar <i class="fa fa-chevron-right"></i> hora</span></div></div><div class="shcrbox"><div class="cricon">00 <span>day</span></div><div class="shthread"><a href="#">nombre del tema</a><span><i class="fa fa-skull" style="color: #555!important;"></i> con alguien <i class="fa fa-chevron-right"></i> lugar <i class="fa fa-chevron-right"></i> hora</span></div></div></div><div class="thabisa1"><div class="cronotitle">enero<br><span></span></div><div class="shcrbox"><div class="cricon">00 <span>day</span></div><div class="shthread"><a href="#">nombre del tema</a><span><i class="fa fa-skull" style="color: #555!important;"></i> con alguien <i class="fa fa-chevron-right"></i> lugar <i class="fa fa-chevron-right"></i> hora</span></div></div></div></div></div></div><link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;800;900&display=swap" rel="stylesheet"><link href="https://icons.cappuccicons.com/cpf.css" rel="stylesheet">
<link href="https://dl.dropboxusercontent.com/s/f3l15lyi0dszi2m/honeybee.css" rel="stylesheet"><link href="https://nagoshiashumari.github.io/Rpg-Awesome/stylesheets/rpg-awesome.min.css" rel="stylesheet"><link href="https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css" rel="stylesheet"/><link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet" /><link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap" rel="stylesheet">
[/html]

[html]
<style>
body { background:rgba(226,226,226);}

@font-face { font-family: 'proxima nova reg'; src: url('https://files.jcink.net/uploads2/elysiumship/fonts/Proxima_Nova_Reg.ttf'); }
@font-face { font-family: 'proxima nova semi bold'; src: url('https://files.jcink.net/uploads2/elysiumship/fonts/proxima_nova_semibold.ttf'); }
@font-face { font-family: 'proxima nova bold'; src: url('https://files.jcink.net/uploads2/elysiumship/fonts/Proxima_Nova_Bold.ttf'); }

#yseult-e {
  --main: 198,138,123;
--unicode: '\e00d';
}

.houdini-crush {
  position:relative;
  font-family:proxima nova reg;
  font-size:14.5px;
  line-height:22px;
  width:400px;
  background:rgba(var(--wt));
  margin:25px auto;
  z-index:1;
  border-radius:5px;
  padding:25px 25px 75px;
  color:rgba(var(--black));
  border:25px solid rgba(var(--lgray), 0.65);
 
--black:50,50,50;
--lgray:200,200,200;
--dgray:66,66,66;
--white:226,226,226;
--wt:242,242,242;
}

.hc-top {
  height:125px;
  position:relative;
  overflow:hidden;
}

.hct-date {
  display:inline-block;
  background:rgba(var(--lgray), 0.5);
  background:linear-gradient(to right, rgba(var(--lgray), 0.55), rgba(var(--lgray), 0.35));
  padding:10px;
  border-radius:5px;
  line-height:10px;
  font-size:13px;
  text-transform:uppercase;
  color:rgba(var(--dgray), 0.75);
}

.hct-date b {
  color:rgba(var(--main));
  font-family:proxima nova bold;
  margin-right:5px;
}

.hct-rect, .hct-rect2, .hct-rect3, .hct-rect4 {
  position:absolute;
  bottom:25px;
  left:0px;
  width:60px;
  height:60px;
  background:rgba(var(--main));
  background:linear-gradient(to right, rgba(var(--main)), rgba(var(--main), 0.75));
  border-radius:5px;
}

.hct-rect:before, .hct-rect2:before, .hct-rect3:before, .hct-rect4:before {
  content:'';
  background-color:rgba(var(--main), 0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 65px;
  opacity: 0.12;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

.hct-rect2 {
  left:70px;
  background:linear-gradient(to right, rgba(var(--main), 0.75), rgba(var(--main), 0.5));
}

.hct-rect3 {
  left:140px;
  background:linear-gradient(to right, rgba(var(--main), 0.5), rgba(var(--main), 0.25));
}

.hct-rect4 {
  left:210px;
  background:linear-gradient(to right, rgba(var(--main), 0.25), rgba(var(--main), 0));
}

.hct-shape {
  position:absolute;
  right:0px;
  top:0px;
  background:rgba(var(--main));
  background:linear-gradient(to bottom right, rgba(var(--main), 0), rgba(var(--main), .5), rgba(var(--main)));
  width:100px;
  height:100px;
  border-radius:5px;
}

.hct-shape:before {
  content:'';
  background:rgba(var(--wt));
  width:60px;
  height:30px;
  position:absolute;
  left:-20px;
  top:-7.5px;
  transform:rotate(-45deg);
}

.hct-shape:after {
  background-color:rgba(var(--main), 0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 65px;
  opacity: 0.12;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

.hct-icon {
  position:absolute;
  width:50px;
  height:50px;
  left:30px;
  bottom:22.5px;
  font-size:50px;
  line-height:50px;
}

.hct-icon:before {
  content: var(--unicode);
  font-size:50px;
  font-family:pandora-box;
  color:rgba(var(--wt));
  -webkit-font-smoothing: antialiased;
text-shadow: -1px 0 rgba(var(--main), 0.85), 0 1px rgba(var(--main), 0.85), 1px 0 rgba(var(--main), 0.85), 0 -1px rgba(var(--main), 0.85);
}

.hc-body {
  position:relative;
  padding:25px 25px;
  border-radius:0px 0px 5px 0px;
  border:1px solid rgba(var(--main), 0.5);
  border-top:0px;
  border-left:0px;
}

.hc-body b {
  color:rgba(var(--main));
  font-family:proxima nova bold;
}

.hc-body u {
  text-decoration:none;
  border-bottom:1px solid rgba(var(--main), 0.5);
  font-family:proxima nova semi bold;
}

.hc-body i {
  opacity:0.75;
}

.hc-body hr {
  border:none;
  height:10px;
  width:10px;
  background:rgba(var(--main), 0.5);
  border-radius:2.5px;
  margin:25px auto;
}

.hc-body a {
  color:rgba(var(--main));
  text-decoration:none;
  border-bottom:1px solid rgba(var(--lgray), 0.75);
}

.hc-body span.dice-roll {
  display:block;
}

.hc-body span.dice-roll b {
  background:rgba(var(--main));
  background:linear-gradient(to right, rgba(var(--main)), rgba(var(--main), 0.5));
  color:rgba(var(--wt));
  padding:5px 7.5px;
  border-radius:5px;
  text-transform:uppercase;
  font-family:proxima nova semi bold;
  font-size:11px;
text-shadow: -1px 0 rgba(var(--main), 0.85), 0 1px rgba(var(--main), 0.85), 1px 0 rgba(var(--main), 0.85), 0 -1px rgba(var(--main), 0.85);
}

.hc-body:before {
  content:'\e91e';
  font-family:starry;
  position:absolute;
  bottom:-8px;
  left:0px;
  background:rgba(var(--wt));
  width:15px;
  height:15px;
  padding-right:10px;
  font-size:15px;
  line-height:15px;
  color:rgba(var(--main));
  display:block;
}

.hc-body:after {
  content:'\e91e';
  font-family:starry;
  position:absolute;
  top:0px;
  right:-8px;
  background:rgba(var(--wt));
  width:15px;
  height:15px;
  padding-bottom:15px;
  font-size:15px;
  line-height:15px;
  color:rgba(var(--main));
  display:block;
}

.hc-tag {
  display:block;
  padding-top:25px;
  text-align:right;
  display:flex;
  flex-wrap:wrap;
  justify-content:right;
  gap:5px;
}

.hc-tag a.user-tagged {
    display:inline-block;
  background:rgba(var(--lgray), 0.5);
  background:linear-gradient(to right, rgba(var(--lgray), 0.55), rgba(var(--lgray), 0.35));
  padding:7.5px;
  border-radius:5px;
  line-height:11px;
  font-size:11px;
  text-transform:uppercase;
  color:rgba(var(--dgray), 0.75);
  border:none;
  font-family:proxima nova semi bold;
}

.hc-tag note {
  display:block;
  width:100%;
  font-size:12.5px;
  line-height:16px;
}

.hc-bottom {
  position:absolute;
  bottom:25px;
  left:25px;
  width:400px;
  height:25px;
  border-radius:5px;
  background:linear-gradient(to left, rgba(var(--main)), rgba(var(--main), 0));
}

.hc-bottom:before {
    background-color:rgba(var(--main), 0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 65px;
  opacity: 0.12;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
<link href="//christieclee.github.io/highalo/starry/starry.css" rel="stylesheet">
<link href="//karolcapel.github.io/brave-vesperia/elysiumunicodes.css" rel="stylesheet">
<link href="//karolcapel.github.io/brave-vesperia/houdinicrush.css" rel="stylesheet">
<link href="//christieclee.github.io/highalo/pan/pandora-box.css" rel="stylesheet">

<div class="houdini-crush" id="yseult-e">
  <div class="hc-top">
    <div class="hct-date"><b>mon</b>300 EE</div>
    <div class="hct-rect"></div>
     <div class="hct-rect2"></div>
     <div class="hct-rect3"></div>
      <div class="hct-rect4"></div>
    <div class="hct-shape"><div class="hct-icon"></div></div>

  </div>

    <div class="hc-body">
   
You guys realize you live in a sewer, right? As an interesting side note, <b>as a head without a body, I envy the dead.</b>
<br><br>
      I decline the title of <u>Iron Cook</u> and accept the lesser title of <i>Zinc Saucier</i>, which I just made up. Also, it comes with <a>double prize money.</a>
     
<div class="hc-tag">
   <a class="user-tagged">olga messerli</a>
   
<note /* DELETE SPAN IF NO NOTE */>
notes
</note>
     
  </div>
</div>
  <div class="hc-bottom"></div>
</div>
[/html]

https://codepen.io/breezescodes/pens/public
[html]
<style>
.franki-bc1 {
--bg: #ececec;
--a1: #A95454;
--a2: #847C91;
--bord: 1.5px color-mix(in srgb, var(--a1) 10%, var(--bg)) solid;
background: var(--bg);
width: 531px;
max-width: 90%;
margin: 15px auto;
border-radius: 12px;
overflow: hidden;
}
.franki-bc2 {
background: color-mix(in srgb, var(--a1) 7%, var(--bg));
width: 100%;
height: 100%;
min-height: 120px;
grid-template:
  '. img tb' 80px
  '. mm mb' 40px
  'grad body body' auto /
  28% 1fr 50%;
display: grid;
}

.franki-img {
display: block;
grid-area: img;
width: 65px; height: 65px;
border-radius: 5px 5px 20px 5px;
margin: 20px 0 0;
object-fit: cover;
object-position: center;
place-self: flex-end;
}

.franki-topBlock {
grid-area: tb;
background: var(--bg);
border-left: var(--bord);
margin-left: 20px
}
.franki-middleBlock {
grid-area: mm;
height: 20px;
align-self: flex-end;
border-left: var(--bord);
border-top: var(--bord);
border-top-left-radius: 20px;
background: var(--bg);
width: 100%;
}
.franki-rightBlock {
grid-area: mb;
background: var(--bg);
height: 100%;
}
.franki-cornerBlock {
width: 20px;
height: 18.75px;
border-right: var(--bord);
border-bottom: var(--bord);
background: color-mix(in srgb, var(--a1) 7%, var(--bg));
border-radius: 0 0 20px 0;
}

.franki-gradBlock {
grid-area: grad;
background: linear-gradient(to bottom, color-mix(in srgb, var(--a1) 0%, transparent), color-mix(in srgb, var(--a2) 25%, transparent));
position: relative;
z-index: 2;
}
.franki-gradWhite {
width: 250%;
height: 250%;
position: absolute;
background: radial-gradient(circle, var(--a1), var(--a2), transparent 50%);
opacity: .034;
left: -75%;
top: -50%;
}

.franki-body {
grid-area: body;
background: var(--bg);
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
padding: 50px 0;
border-left: 1.5px solid;
border-image: linear-gradient(to bottom, color-mix(in srgb, var(--a1) 10%, var(--bg)), color-mix(in srgb, var(--a2) 45%, var(--bg))) 4;
}
.franki-icon {
font-size: 200px;
color: color-mix(in srgb, var(--a2) 15%, transparent);
position: absolute;
bottom: 0px;
left: -75px;
}

.franki-text {
grid-area: body;
font: 300 1rem/1.4 "Source Serif 4";
margin-left: -28%;
position: relative;
padding: 40px 68px 68px;
text-shadow: 0 0 3px #fafafa, -0.5px -0.5px 2px color-mix(in srgb, var(--a1) 30%, transparent), 0.5px 0.5px 2px color-mix(in srgb, var(--a2) 60%, transparent);
}
</style>

<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet">
<div class="franki-bc1">
<div class="franki-bc2">
  <img class="franki-img" src="https://i.ibb.co/HFwXLCR/10.png"/>
  <div class="franki-topBlock"></div>
  <div class="franki-middleBlock"></div>
  <div class="franki-rightBlock"><div class="franki-cornerBlock"></div></div>
  <div class="franki-gradBlock"><div class="franki-gradWhite"></div></div>
  <div class="franki-body"><span class="franki-icon fa-solid fa-sun"></span></div>
<div class="franki-text">
   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse quidem nisi ab voluptate, non eaque est commodi reiciendis debitis, maxime, perferendis nihil amet dolorum blanditiis dolorem. Illum nisi ab vitae?
  </div>
</div>
</div>

[/html]

[hideprofile][html]
<style>
body {
  margin:0px;
  background-color:var(--lightBack2);
  /*background-image:url(https://i.ibb.co/BVnmNrf/scanlineshorizontal2.png);*/
  background-image:url(https://i.ibb.co/F4fKJVH/p0gVOEg.png);
  background-attachment:fixed;
 
  --bannerImg: url(https://i.ibb.co/n34w2yN/Astesia-Render-3-Fixed.png);
  --bannerInk: url(https://i.ibb.co/kSXWQhH/Small-Banner.png);
  --modalInk: url(https://i.ibb.co/FXqJwDB/Modal-Small.png);
  --wrapperInk: url(https://i.ibb.co/DVWmh4q/TinyTiny.png);
  --boardInk: url(https://i.ibb.co/Ytdb6T4/BoredMid.png);
  --directInk: url(https://i.ibb.co/CH4MfCL/Beeg.png);
 
  --lightBlack1: #292929;
  --lightBlack2: #333;
  --lightBlack3: #494949;
  --lightBack1: #ededed;
  --lightBack2: #e9e9e9;
  --lightBack3: #e3e3e3;
  --lightBorder: #d5d5d5;
  --lightMedium: #555;
 
  --accentPink: #DBA9A9;
  --accentBlue: #A8B9E5;
 
  --fontSans: Inter, sans-serif;
  --fontSerif: Playfair Display, serif; 
}

.epi-temp { margin:-51px; }
.epi-temp-top { border-bottom:solid 2px var(--lightBorder);padding:51px;display:flex;flex-direction:column;align-items:flex-end;position:relative;overflow:hidden; }
.epi-temp-top i { display:block;position:absolute;font-size:295px;top:-60px;left:35px;color:var(--lightBack1);text-shadow: var(--lightBorder) 2px 0px 0px, var(--lightBorder) 1.75517px 0.958851px 0px, var(--lightBorder) 1.0806px 1.68294px 0px, var(--lightBorder) 0.141474px 1.99499px 0px, var(--lightBorder) -0.832294px 1.81859px 0px, var(--lightBorder) -1.60229px 1.19694px 0px, var(--lightBorder) -1.97999px 0.28224px 0px, var(--lightBorder) -1.87291px -0.701566px 0px, var(--lightBorder) -1.30729px -1.51361px 0px, var(--lightBorder) -0.421592px -1.95506px 0px, var(--lightBorder) 0.567324px -1.91785px 0px, var(--lightBorder) 1.41734px -1.41108px 0px, var(--lightBorder) 1.92034px -0.558831px 0px; }
.epi-temp-top h1 { margin:0px;padding:15px;font:800 10px var(--fontSans);line-height:10px;letter-spacing:2px;color:var(--lightBack1);background-color:var(--lightBlack2);border-radius:5px;text-transform:uppercase;position:relative;z-index:1; }
.epi-temp-top h2 { font:900 50px var(--fontSerif);line-height:40px;margin:15px 0px 0px 0px;color:var(--lightBlack2);position:relative;z-index:1; }
.epi-temp-mid { padding:51px;text-align:justify;position:relative;overflow:hidden; }
.epi-temp-mid blockquote { border:solid 2px var(--lightBorder);margin:25px 0px;padding:33px;border-radius:5px;background-color:var(--lightBack1); }
.epi-temp-mid blockquote:last-of-type { margin-bottom:0px; }

.epi-temp-mid { padding:51px 51px 51px 46px;display:grid;grid-template-columns:165px auto;gap: 51px 35px; }
.epi-temp-mid b { font-weight:900!important;color:var(--lightBlack2); }
.epi-temp-mid i { color:var(--lightBlack2); }
.epi-temp-mid a { text-decoration:none;font-weight:900!important;background: linear-gradient(90deg,var(--accentBlue),var(--accentPink));background-clip: text;-webkit-background-clip: text;filter:brightness(85%);color: transparent;-webkit-box-decoration-break: clone;box-decoration-break: clone; }
.epi-temp-mid h1 { text-align:right;font:900 italic 30px var(--fontSerif);text-transform:lowercase;line-height:30px;margin:0px;color:var(--lightBlack2);display:flex;flex-direction:column;align-items:flex-end; }
.epi-temp-mid h1 b { margin:3px 0px 15px 0px;font:900 12px var(--fontSans);line-height:15px;letter-spacing:2px;color:var(--lightBlack2);text-transform:uppercase;display:block; }
.epi-temp-mid h1::after, .epi-temp-mid h2::after { display:block;content:'';border-radius:5px;margin:50px 0px 53px 0px;background: linear-gradient(0deg, var(--accentBlue), var(--lightBack2));flex-grow:1;width:100%; }
.epi-temp-mid .epi-temp-even::after { background: linear-gradient(0deg, var(--accentPink), var(--lightBack2))!important; }
.epi-temp-mid-1 { position:relative;padding-bottom:53px; }
.epi-temp-mid-1::after { content:'';display:block;height:2px;background-color:var(--lightBorder);position:absolute;bottom:0px;left:-246px;right:-51px; }

.epi-temp-mid ul { padding:0px 25px 0px 40px;margin:16px 0px 21px 0px; }
.epi-temp-mid ul:last-of-type { margin-bottom:0px; }
.epi-temp-mid li { padding-top:10px;gap:0px; }
.epi-temp-mid li::marker { content:''; }
.epi-temp-mid li::before { font-weight:800!important;font:800 14px var(--fontSans);line-height:20px;content:'⁘';display:block;float:left;color:var(--lightMedium);opacity:.3;margin-left:-30px; }

.epi-temp-mid h2 { margin:0px;display:flex;flex-direction:column;gap:10px; }
.epi-temp-mid h2 div { border-radius:5px;padding:15px 0px;text-align:center;font:800 10px var(--fontSans);line-height:10px;letter-spacing:2px;color:var(--lightBack1);background-color:var(--lightBlack3);cursor:pointer;text-transform:uppercase;transition:.7s; }
.epi-temp-mid h2 .selected, .epi-temp-mid h2 div:hover { background-color:var(--lightBlack2); }

.epi-temp-mid h3 { margin:28px 0px 20px 0px;font:900 19px var(--fontSans);line-height:17px;text-transform:uppercase;letter-spacing:1px;color:var(--lightMedium);opacity:.25; }
.epi-temp-mid h3:first-of-type { margin-top:0px; }
.epi-claims { padding:10px 0px 63px 15px; }
.epi-claims ul { margin:0px;padding-left:30px; }
.epi-claims li { font-size:12px;padding-top:2px; }
.epi-claims b { text-transform:uppercase; }
.epi-claims a { filter:brightness(90%); }

.GID-paradiso { --accentPink: #d9d782!important;--accentBlue: #a9b9d9!important; } 
.GID-purgatorio { --accentPink: #bfadd9!important;--accentBlue: #a5cfc4!important; }
.GID-inferno { --accentPink: #e3b88d!important;--accentBlue: #dea2c1!important; }

.GID-inactive { --accentPink: #bbb!important;--accentBlue: #777!important; }
.GID-administration { --accentPink: #A8B9E5!important;--accentBlue: #DBA9A9!important; }

:root {
    --Iconsax-Size:20px;
    --Iconsax-Color:#9fb3c7;
}
body::before { display:block;content:'';position:fixed;top:10px;bottom:10px;left:10px;right:10px;pointer-events:none;border:solid 2px var(--lightBorder);z-index:10000000;outline:solid 10px var(--lightBack1); }

.epi-menu { height:10px;padding:25px;position:fixed;left:10px;right:10px;top:10px;z-index:10000000;display:flex;justify-content:space-between;background-color:rgba(232,232,232,.5);background-color:rgba(30,30,30,.9);backdrop-filter:blur(10px) saturate(500%);color:rgba(232,232,232,.5);font:400 10px var(--fontSans);line-height:10px;letter-spacing:1px;white-space:nowrap; }
.epi-menu-left { display:flex;gap:10px;text-transform:uppercase;text-overflow: ellipsis; }
.epi-menu-left a { text-decoration:none;font-weight:800!important;color:var(--lightBorder);display:flex;gap:10px;align-items:center;transition:.7s; }
.epi-menu-left a:hover { color:var(--accentBlue); }
.epi-menu-left a::after { height:1px;width:15px;display:block;content:'';background-color:var(--lightMedium); }
.epi-menu-left a:first-of-type { background-color:var(--lightBlack1);padding:25px;margin:-25px 15px 0px -25px;height:10px; }
.epi-menu-left a:first-of-type::after, .epi-menu-left a:last-of-type::after { display:none; }
.epi-menu-right { display:flex;margin:-5px -15px -5px 0px;height:20px; }
.epi-menu-right a { text-decoration:none;display:flex;gap:10px;text-transform:uppercase;color:var(--lightBorder);padding-left:7px; }
.epi-menu-right i { --Iconsax-Color:var(--lightBack1); }
.epi-menu-right div { position:relative;overflow:hidden;margin:-5px 0px;transition:.35s;max-width:0px; }
.epi-menu-right a:hover div { max-width:100px; }
.epi-menu-right a h1 { margin:0px;position:absolute;height:6px;width:6px;background-color:var(--accentPink);border-radius:100%;border:solid 3px var(--lightBlack2);margin-left:-4px;animation:infinite ease .7s epitaphAlert;transition:.35s; }
@keyframes epitaphAlert {
  0% { height:5px;margin-top:-2px; }
  15% { height:6px;margin-top:-4px; }
  50% { height:6px;margin-top:-6px; }
  85% { height:6px;margin-top:-4px; }
  100% { height:5px;margin-top:-2px; }
}
.epi-menu-right a:hover h1 { background-color:var(--accentBlue); }
.epi-menu-right span { border-radius:5px;font-weight:800!important;padding:10px;background-color:var(--lightBlack1);display:block;margin-right:5px;overflow:hidden; }
.epi-menu .modal-link { position:relative;z-index:1; }
.epi-switch-acc select { width: 100%;-moz-appearance: none;-webkit-appearance: none;appearance: none; }
.epi-switch-acc #subaccounts_menu { padding:0px;position:absolute;margin-top:-5px;background:transparent; }
.epi-switch-acc #subaccounts_menu .forminput { background:transparent;position:relative;z-index:1;border:none;height:30px;color:transparent;cursor:pointer; }
.epi-switch-acc #subaccounts_menu option { background-color:var(--lightBack1);color:var(--lightBlack1);font:10px var(--fontSans); }

.modal-content { display: none; }
#fade-background { position: fixed;top: 12px;left: 12px;right:12px;bottom:12px;width: 100%;height: 100%;background: rgba(232,232,232,.85);backdrop-filter:blur(35px) saturate(500%);z-index:999999;cursor:pointer; }
#modal-window { position: fixed;text-align:justify;top: 50%;left: 50%;width: 800px;height: 400px;margin: -180px 0 0 -400px;z-index:999999;display:grid;grid-template-columns:1fr 1.8fr;gap:19px; }
.epi-modal-left { outline:solid 2px rgba(30,30,30,.06);background-color: var(--lightBack1);border-radius:15px;position:relative; }
.epi-modal-ink { border-radius:15px 15px 0px 0px;position:absolute;bottom:0px;left:0px;right:-1px;height:150px;
  mask-image: var(--directInk);
  mask-size: auto 175%;
  mask-repeat: no-repeat;
  mask-position: center bottom;
  -webkit-mask-image: var(--directInk);
  -webkit-mask-size: auto 175%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;transform:scaleY(-1); }
.epi-modal-ink div { height:100%;width:100%;background:linear-gradient(to bottom,var(--accentBlue),var(--accentPink) 85%); }
.epi-modal-click { position:absolute;top:0px;left:0px;right:0px;display:flex;justify-content:space-between; }
.epi-modal-click a { display:block;width:60px;height:95px;border-radius:15px 0px 15px 0px;background-color:var(--lightBlack2);display:flex;align-items:center;justify-content:center;--Iconsax-Color:var(--lightBorder);position:relative;transition:.7s; }
.epi-modal-click a::before { content:'';display:block;height:5px;width:15px;border-radius:5px 0px 0px 0px;box-shadow:-10px 0px 0px var(--lightBlack2);position:absolute;top:0px;right:-15px;background-color:var(--lightBack1); }
.epi-modal-click a:last-of-type { border-radius:0px 15px 0px 15px; }
.epi-modal-click a:last-of-type::before { content:'';display:block;height:5px;width:15px;border-radius:0px 5px 0px 0px;box-shadow:10px 0px 0px var(--lightBlack2);position:absolute;top:0px;left:-15px;background-color:var(--lightBack1); }
.epi-modal-click a:hover { opacity:.9; }
.epi-modal-icon { padding:23px;border-radius:100%;width:74px;height:74px;background:linear-gradient(to bottom,var(--accentBlue),var(--accentPink));margin:-25px auto 30px auto;filter:drop-shadow(0px 0px 0px var(--lightBack1)); }
.epi-modal-icon-1 { height:60px;width:60px;background-color:var(--lightBack1);padding:7px;border-radius:100%; }
.epi-modal-icon img { height:60px;width:60px;border-radius:100%; }
.epi-modal-name { display:block;text-decoration:none;text-align:center;font:800 25px var(--fontSans);line-height:20px;text-transform:lowercase;letter-spacing:.25px;color:var(--lightBlack2);letter-spacing:-.5px; }
.epi-modal-name::before { content:'welcome to solaris';display:block;font-size:10px;line-height:10px;text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;color:var(--lightMedium); }
.epi-modal-text { padding:20px 35px;font:12.5px var(--fontSans);line-height:20px;text-transform:lowercase;text-align:center;color:var(--lightMedium);letter-spacing:.25px; }
.epi-modal-text a { font:800 12.5px var(--fontSans);line-height:20px;text-decoration:none;background:linear-gradient(135deg,var(--lightBlack3) 33%,var(--accentPink),var(--accentBlue));background-size:350% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;transition:.7s; }
.epi-modal-text a:hover { background-position:99.9% 0%; }
.epi-modal-right-1 { display:flex;flex-direction:column; }
.epi-modal-welcome { padding:30px;font:12.5px var(--fontSans);line-height:20px;letter-spacing:.25px;flex-grow:1; }
.epi-modal-welcome div { overflow:auto;height:100%; }
.epi-modal-event { display:block;border-top:solid 2px var(--lightBorder);border-right:solid 2px var(--lightBorder);padding:20px;background-color:var(--lightBack2);margin-right:30px;border-radius:0px 15px 0px 0px;position:relative; }
.epi-modal-event::before { content:'';display:block;border:solid 23px var(--lightBack3);border-right:solid 13px transparent;position:absolute;filter:drop-shadow(2px 0px 0px var(--lightBorder)) drop-shadow(-1px 2px 0px var(--lightBorder)) drop-shadow(-1px -2px 0px var(--lightBorder));top:-15px;right:35px; }
.epi-modal-event-title { position:absolute;left:0px;top:-25px;border:solid 2px var(--lightBorder);border-left:none;padding:18px 0px;background-color:var(--lightBack2);font:900 15px var(--fontSans);line-height:10px;width:210px;text-align:center;color:var(--lightBlack2);letter-spacing:.25px; }
.epi-modal-event-title::before { content:'';display:block;height:0px;width:0px;border-top:solid 5px var(--lightBorder);border-left:solid 7px var(--lightBorder);border-right:solid 7px transparent;border-bottom:solid 5px transparent;bottom:-11px;right:-2px;position:absolute; }
.epi-modal-event-img { height:75px;width:100%;background-color:var(--lightBlack2);border-radius:0px 7px 0px 7px; }
.epi-modal-event-img div { height:100%;width:100%;border-radius:0px 7px 0px 7px;background-image:url(https://i.ibb.co/hYYmj2X/B2.png);background-size:cover;background-position:center;mix-blend-mode:lighten;filter:grayscale(100%) contrast(70%);transition:.7s; }
.epi-modal-event:hover .epi-modal-event-img div { filter:grayscale(0%) contrast(70%); }

.epi-modal-right { outline:solid 2px rgba(30,30,30,.06);background-color: var(--lightBack1);border-radius:15px;position:relative;overflow:hidden;display:grid;grid-template-columns:auto 200px; }
.epi-modal-right-2 { border-left:solid 2px var(--lightBorder);padding:0px 0px 23px 30px;display:flex;flex-direction:column;align-items:flex-start;gap:0px;background-color:var(--lightBack2);justify-content:flex-end;position:relative; }
.epi-modal-right-2::before { content:'quick navigation';display:block;border-radius:0px 0px 15px 0px;border-radius:0px 0px 15px 0px;border-right:solid 2px var(--lightBorder);border-bottom:solid 2px var(--lightBorder);padding:20px;font:800 15px var(--fontSans);line-height:15px;position:absolute;top:0px;left:0px;background-color:var(--lightBack3);color:var(--lightBlack3); }
.epi-modal-right-2 a { display:block;text-decoration:none;white-space:nowrap;font:800 12px var(--fontSans);line-height:25px;color:var(--lightBlack3);text-transform:uppercase;background:linear-gradient(135deg,var(--lightBlack3) 33%,var(--accentPink),var(--accentBlue));background-size:350% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;transition:.7s; }
.epi-modal-right-2 a:hover { background-position:99.9% 0%; }

.epi-banner { margin-top:70px;width:100%;min-width:1260px;height:950px;overflow:hidden;position:relative;background-color:var(--lightBack3);mask-image:linear-gradient(to top,transparent,#000 100px);
  -webkit-mask-image:linear-gradient(to top,transparent,#000 100px);
  background-image:url(https://i.ibb.co/F4fKJVH/p0gVOEg.png);
  background-attachment:fixed; }
.epi-banner::before { position:absolute;display:block;content:'';top:0px;left:0px;right:0px;bottom:0px;background-image:var(--bannerImg);background-size:200% 400%;background-position:center bottom;filter:blur(100px) saturate(100%);opacity:.75; }
.epi-banner-render { position:relative;z-index:10;height:700px;width:900px;margin:0px auto;transition:.7s; }
.epi-banner:hover .epi-banner-render { margin-top:-20px; }
.epi-banner-render::before { position:absolute;display:block;content:'';background-image:var(--bannerImg);height:750px;width:900px;background-repeat:no-repeat;background-position:center;filter:contrast(0%) brightness(31%); }
.epi-banner-render::after { display:block;content:'';background-image:var(--bannerImg);height:750px;width:900px;background-repeat:no-repeat;background-position:center;mix-blend-mode:lighten; }
.epi-banner-ink { width:1200px;height:700px;position:absolute;top:0px;left:50%;margin-left:-600px;
  -webkit-mask-image: var(--bannerInk);
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--bannerInk);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;transition:.7s; }
.epi-banner:hover .epi-banner-ink { mask-size:95%; }
.epi-banner-ink div { height:700px;width:1200px;background:radial-gradient(at top center,var(--accentBlue) 30%,var(--accentPink),var(--lightBorder) 85%);background-size:150% 150%;background-position:center bottom;background-attachment:fixed; }
.epi-banner-name { width:1200px;position:absolute;top:175px;left:50%;margin-left:-600px;text-align:center;font:italic 800 310px var(--fontSerif);line-height:200px;color:var(--lightBorder);text-shadow:0px 0px 20px rgba(0,0,0,.35);mix-blend-mode:soft-light;opacity:.65;transition:.7s; }
.epi-banner:hover .epi-banner-name { transform:scale(1.05); }
.epi-banner-radial { position:absolute;mix-blend-mode:soft-light;top:-35px;left:50%;margin-left:-350px;animation:infinite epitaphSpin 150s linear; }
.epi-banner-radial line { stroke:var(--lightBack1);stroke-width:1; }
@keyframes epitaphSpin {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}
.epi-banner-text { position:absolute;z-index:10;height:240px;width:850px;left:50%;margin-left:-425px;top:200px;display:grid;align-items:flex-end;justify-content:center; }
.epi-banner-text div { background-color:rgba(30,30,30,.9);padding:20px 15px;font:10px var(--fontSans);text-transform:uppercase;line-height:10px;height:10px;color:var(--lightBorder);letter-spacing:2px;max-width:fit-content;position:relative;display:flex; }
.epi-banner-text div b { padding-left:5px;font-weight:900!important;background:linear-gradient(90deg,var(--accentBlue),var(--accentPink));background-clip:text;-webkit-background-clip:text;color:transparent; }
.epi-banner-text div::before { display:block;position:absolute;content:'';height:0px;width:0px;border:solid 25px transparent;border-right:solid 15px rgba(30,30,30,.9);top:0px;left:-40px; }
.epi-banner-text div::after { display:block;position:absolute;content:'';height:0px;width:0px;border:solid 25px transparent;border-left:solid 15px rgba(30,30,30,.9);top:0px;right:-40px; }

.epi-wrapper { width:1260px;margin:-345px auto 0px auto; }
.epi-wrapper-inner { width:1200px;background-color:var(--lightBack1);outline:solid 2px var(--lightBorder);margin:0px auto;min-height:100px;color:var(--lightBlack3);padding-bottom:50px; }
.epi-wrapper-top { width:1200px;height:250px;margin-top:-245px;position:relative;z-index:15; }
.epi-wrapper-top::before { content:'';display:block;height:500px;width:1204px;border-radius:100% 100% 0% 0%;background-color:var(--lightBorder);margin:0px -2px; }
.epi-wrapper-top::after { content:'';display:block;height:500px;width:1200px;border-radius:100% 100% 0% 0%;background-color:var(--lightBack1);margin-top:-498px; }
.epi-wrapper-ink { width:600px;height:250px;border-radius:0% 100% 0% 0%;position:absolute;top:2px;left:0px;z-index:2;mask-image: var(--wrapperInk);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--wrapperInk);
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;  transform:scaleX(-1); }
.epi-wrapper-ink-2 { width:600px;height:250px;border-radius:0% 100% 0% 0%;position:absolute;top:2px;right:0px;z-index:2;mask-image: var(--wrapperInk);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--wrapperInk);
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center; }
.epi-wrapper-ink div, .epi-wrapper-ink-2 div { height:500px;width:600px;background-color:var(--lightBack3); }

.epi-wrapper-ribbon { height:200px;position:absolute;z-index:25;display:grid;grid-template-columns:50px auto 50px;width:800px;margin:0px 200px;overflow:hidden;padding-top:50px;margin-top:-50px; }
.epi-wrapper-ribbon-left { height:0px;width:0px;border:solid 50px var(--lightBack2);border-left:solid 35px transparent;border-right-width:65px;filter:drop-shadow(2px 0px 0px var(--lightBorder)) drop-shadow(-1px 2px 0px var(--lightBorder)) drop-shadow(-1px -2px 0px var(--lightBorder));transform:rotate(-45deg);margin:75px 125px; }
.epi-wrapper-ribbon-left::before { display:block;content:'';height:0px;height:0px;width:0px;border:solid 10px transparent;border-bottom-color:var(--lightBorder);transform:rotate(45deg);margin:25px 0px 0px 55px; }
.epi-wrapper-ribbon-right { height:0px;width:0px;border:solid 50px var(--lightBack2);border-right:solid 35px transparent;border-left-width:65px;filter:drop-shadow(2px 0px 0px var(--lightBorder)) drop-shadow(-1px 2px 0px var(--lightBorder)) drop-shadow(-1px -2px 0px var(--lightBorder));transform:rotate(45deg);margin:75px -175px; }
.epi-wrapper-ribbon-right::before { display:block;content:'';height:0px;height:0px;width:0px;border:solid 10px transparent;border-bottom-color:var(--lightBorder);transform:rotate(-45deg);margin:25px 0px 0px -75px; }
.epi-wrapper-ribbon-curve { position:relative;z-index:1;height:500px;width:500px;border:solid 100px transparent;border-top-color:var(--lightBack1);border-radius:100%;margin-top:-50px;filter:drop-shadow(2px 0px 0px var(--lightBorder)) drop-shadow(-1px 2px 0px var(--lightBorder)) drop-shadow(-1px -2px 0px var(--lightBorder)); }
.epi-wrapper-ribbon-text { grid-column: 1 / 4;grid-row: 2 / 3;position:absolute;margin-top:-762px;z-index:20;transform:rotate(48deg); }
.epi-wrapper-ribbon-text text { text-align:center;font:900 45px var(--fontSerif);line-height:35px;letter-spacing:-1px;stroke:var(--lightBorder);stroke-width:.75;fill:var(--lightBack3); }

.epi-wrapper-sub { position:absolute;z-index:100;font:800 15px var(--fontSans);line-height:20px;text-transform:uppercase;letter-spacing:1px;text-align:center;margin-top:185px;width:1200px;display:flex;justify-content:center;align-items:flex-start; }
.epi-wrapper-icon { background:linear-gradient(135deg,var(--accentBlue),var(--accentPink));padding:12px;border-radius:100%;height:56px;width:56px;position:absolute;margin-top:-95px; }
.epi-wrapper-icon-1 { padding:3px;height:50px;width:50px;border-radius:100%;background-color:var(--lightBack1); }
.epi-wrapper-icon img { height:50px;width:50px;border-radius:100%;filter:contrast(70%) grayscale(100%); }
.epi-wrapper-icon::before { top:0px;content:'❧';display:block;position:absolute;font-size:55px;line-height:100px;margin-left:-85px;color:var(--lightBorder);transform:scaleX(-1); }
.epi-wrapper-icon::after { top:0px;right:0px;content:'❧';display:block;position:absolute;font-size:55px;line-height:100px;margin-right:-72px;color:var(--lightBorder); }
.epi-wrapper-sub::before { content:'';display:block;height:2px;width:35px;background:var(--lightBack3);margin:9px -37px 0px 0px; }
.epi-wrapper-sub::after { content:'';display:block;height:2px;width:35px;background:var(--lightBack3);margin:9px 0px 0px -36px; }

.epi-title { margin:30px 0px 0px 0px;border-top:solid 2px var(--lightBorder);border-bottom:solid 2px var(--lightBorder);background-color:var(--lightBack2);padding:40px 0px;display:flex;flex-direction:column;align-items:center;position:relative;z-index:20;overflow:hidden; }
.epi-title::before { content:'shout our epitaph';display:block;font:italic 900 150px var(--fontSerif);position:absolute;white-space:nowrap;line-height:85px;color:var(--lightBack1);text-decoration:none;text-shadow: var(--lightBorder) 1px 0px 0px, var(--lightBorder) 0.540302px 0.841471px 0px, var(--lightBorder) -0.416147px 0.909297px 0px, var(--lightBorder) -0.989993px 0.14112px 0px, var(--lightBorder) -0.653644px -0.756803px 0px, var(--lightBorder) 0.283662px -0.958924px 0px, var(--lightBorder) 0.96017px -0.279416px 0px; }
.epi-title div { background-color:rgba(30,30,30,.9);padding:20px 10px 20px 15px;font:900 10px var(--fontSans);text-transform:uppercase;line-height:10px;height:10px;color:var(--lightBorder);letter-spacing:5px;max-width:fit-content;position:relative;display:flex; }
.epi-title div::before { display:block;position:absolute;content:'';height:0px;width:0px;border:solid 25px transparent;border-right:solid 15px rgba(30,30,30,.9);top:0px;left:-40px; }
.epi-title div::after { display:block;position:absolute;content:'';height:0px;width:0px;border:solid 25px transparent;border-left:solid 15px rgba(30,30,30,.9);top:0px;right:-40px; }

.epi-controls { position:sticky;z-index:10000;top:70px;background-color:var(--lightBack3);border-bottom:solid 2px var(--lightBorder);display:flex;gap:8px;padding:10px;text-transform:uppercase;letter-spacing:1px; }
.epi-pagination { flex-grow:1;display:flex;gap:3px; }
.epi-pagination a { border:solid 2px var(--lightBorder);font:900 9px var(--fontSans);line-height:21px;padding:0px 7px;background-color:var(--lightBack2);border-radius:3px;cursor:pointer; }
.epi-pagination a:nth-child(2) { background-color:var(--lightBlack3);border-color:transparent;color:var(--lightBack3); }
.epi-actions, .epi-search { border:solid 2px var(--lightBorder);background-color:var(--lightBack2);border-radius:3px;font:900 9px var(--fontSans);line-height:21px;padding:0px 7px;cursor:pointer; }
.epi-search i { --Iconsax-Color:#999;--Iconsax-Size:10px;float:right;display:flex;align-items:center;height:20px;margin-left:4px; }
.epi-controls-1 { display:block;font:900 9px var(--fontSans);color:var(--lightBack3);line-height:25px;padding:0px 9px;background-color:var(--lightBlack3);border-radius:3px;text-decoration:none; }

.epi-post { margin:0px;display:grid;grid-template-columns:300px auto 60px;gap:0px;position:relative;z-index:20;margin:30px 30px 0px 30px; }
.epi-post::after { content:'';display:block;grid-column-start:1;grid-column-end:4;height:2px;background-color:var(--lightBorder);margin:30px -30px 0px -30px; }
.epi-post-left { background-color:var(--lightBack3);border:solid 2px var(--lightBorder);border-right:none;margin-right:-10px;border-radius:10px 0px 0px 10px;position:relative; }
.epi-post-mid { display:flex;flex-direction:column;border:solid 2px var(--lightBorder);position:relative;z-index:1;background-color:var(--lightBack2);border-radius:10px;margin-right:30px;padding:51px;font:12.5px var(--fontSans);line-height:20px;letter-spacing:.35px; }
.epi-post-bulk { flex-grow:1; }
.epi-post-right { background-color:var(--lightBlack2);border-radius:10px;padding:21px 20px 25px 20px;display:flex;flex-direction:column;justify-content:space-between; }
.epi-post-right-links { position:sticky;top:137px;display:flex;flex-direction:column;gap:13px;--Iconsax-Color:var(--lightBack1);--Iconsax-Size:22px;filter:drop-shadow(1px 1px 0px rgba(30,30,30,.075));padding-bottom:200px; }
.epi-post-right-links a { transition:.15s; }
.epi-post-right-links a:hover { transform:scale(1.2); }
.epi-post-right-time { white-space:nowrap;font:500 11px var(--fontSans);line-height:20px;height:20px;transform:rotate(-90deg);text-transform:uppercase;color:var(--lightBack1);letter-spacing:1.5px;text-shadow:-1px 1px 0px rgba(30,30,30,.075); }
.epi-post-bot { background-color:var(--lightBack3);border:solid 2px var(--lightBorder);border-radius:10px 0px;margin:51px -53px -53px 0px;padding:18px;display:flex;gap:10px;justify-content:space-between;font:500 10px var(--fontSans);line-height:10px;text-transform:uppercase;color:var(--lightMedium);letter-spacing:1px; }
.epi-post-bot a { text-decoration:none;font:800 10px var(--fontSans);line-height:10px;background:linear-gradient(to left,var(--accentPink),var(--accentBlue));background-clip:text;-webkit-background-clip:text;color:transparent;filter:brightness(90%); }

.epi-post-ink { width:155%;height:615px;
  -webkit-mask-image: var(--bannerInk);
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--bannerInk);
  mask-size: auto 900px;
  mask-repeat: no-repeat;
  mask-position: right bottom;border-radius:8px 0px 0px 8px;position:absolute; }
.epi-post-ink div { height:100%;width:100%;background:linear-gradient(135deg,var(--accentBlue) 5%,var(--accentPink) 60%); }
.epi-post-thred { position:absolute;z-index:1;background-color:rgba(30,30,30,.89);margin:-1px 0px 0px -1px;top:0px;left:0px;right:0px;padding:15px 25px 15px 15px;border-radius:9px 0px 0px 0px;box-shadow:0px 2px 0px rgba(30,30,30,.075); }
.epi-post-thred a { display:block;background-color:var(--lightBlack1);border-radius:5px;padding:10px;font:800 10px var(--fontSans);line-height:10px;letter-spacing:1px;color:var(--lightBack3);text-decoration:none;text-transform:uppercase;white-space:nowrap;text-align:center; }
.epi-post-left-1 { position:sticky;top:114px;z-index:2;margin-top:60px;padding:45px 49px 39px 39px; }
.epi-post-name { display:block;text-decoration:none;font:900 32px var(--fontSerif);line-height:100%;text-transform:uppercase;color:var(--lightBlack2);text-align:center;padding-top:63px;background:linear-gradient(135deg,var(--lightBlack3) 33%,var(--accentPink),var(--accentBlue));background-size:350% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;transition:.7s; }
.epi-post-name:hover { background-position:99.9% 0%;filter:brightness(90%); }
.epi-post-av { width:200px;height:400px;padding:10px;background-color:var(--lightBack1);box-shadow:0px 0px 0px 2px rgba(30,30,30,.075);border-radius:5px;margin-bottom:12px; }
.epi-post-av-img { height:400px;width:200px;background-color:var(--lightBlack2);border-radius:3px;position:absolute;overflow:hidden; }
.epi-post-av-img div { height:100%;width:100%;background-image:url(https://i.ibb.co/ZxxPpDH/Mariso.png);background-size:cover;border-radius:3px;background-position:center;mix-blend-mode:lighten;filter:grayscale(0%); }

.epi-post-ribbon { height:200px;position:absolute;z-index:25;display:grid;grid-template-columns:0px auto 0px;width:200px;margin:-25px 0px 0px -5px;overflow:visible; }
.epi-post-ribbon-left { height:0px;width:0px;border:solid 20px var(--lightBack2);border-left:solid 10px transparent;border-right-width:30px;filter:drop-shadow(2px 0px 0px rgba(30,30,30,.075)) drop-shadow(-1px 2px 0px rgba(30,30,30,.075)) drop-shadow(-1px -2px 0px rgba(30,30,30,.075));transform:rotate(-45deg);margin:40px 30px; }
.epi-post-ribbon-left::before { display:block;content:'';height:0px;height:0px;width:0px;border-left:solid 8px transparent;border-right:solid 8px transparent;border-bottom:solid 10px var(--lightBorder);transform:rotate(45deg);margin:7px 0px 0px 20px; }
.epi-post-ribbon-right { height:0px;width:0px;border:solid 20px var(--lightBack2);border-right:solid 10px transparent;border-left-width:30px;filter:drop-shadow(2px 0px 0px rgba(30,30,30,.075)) drop-shadow(-1px 2px 0px rgba(30,30,30,.075)) drop-shadow(-1px -2px 0px rgba(30,30,30,.075));transform:rotate(45deg);margin:40px -70px; }
.epi-post-ribbon-right::before { display:block;content:'';height:0px;height:0px;width:0px;border-left:solid 8px transparent;border-right:solid 8px transparent;border-bottom:solid 10px var(--lightBorder);transform:rotate(-45deg);margin:6px 0px 0px -35px; }
.epi-post-ribbon-curve { position:relative;z-index:1;height:150px;width:150px;border:solid 40px transparent;border-top-color:var(--lightBack1);border-radius:100%;margin-top:0px;filter:drop-shadow(2px 0px 0px rgba(30,30,30,.075)) drop-shadow(-1px 2px 0px rgba(30,30,30,.075)) drop-shadow(-1px -2px 0px rgba(30,30,30,.075)); }
.epi-post-ribbon-text { grid-column: 1 / 4;grid-row: 2 / 3;position:absolute;margin-top:-237px;z-index:20;transform:rotate(59deg); }
.epi-post-ribbon-text text { text-align:center;font:900 12px var(--fontSans);line-height:10px;letter-spacing:-1px;fill:var(--lightBlack2);letter-spacing:3px;text-transform:uppercase; }

.GID-staff .epi-post-ribbon-text { transform:rotate(53deg); }
.GID-member .epi-post-ribbon-text { transform:rotate(51deg); }
.GID-member .epi-post-ribbon-text text { letter-spacing:1.5px!important; }
.GID-inactive .epi-post-ribbon-text { transform:rotate(62deg); }
.GID-paradiso .epi-post-ribbon-text { transform:rotate(60deg); }
.GID-purgatorio .epi-post-ribbon-text { transform:rotate(52deg); }
.GID-inferno .epi-post-ribbon-text { transform:rotate(66deg); }

.tab { display:block;position:absolute;height:400px;width:200px;margin:-422px 0px 0px 10px;opacity:0;transition:.35s; }
.tab0 { backdrop-filter:grayscale(100%) contrast(15%) brightness(36%);border-radius:3px; }
.show { opacity:1; }
.left::after { content:'';display:block; }
.left span:nth-child(2) { display:none; }
.right::before { content:'';display:block; }
.right span:nth-child(1) { display:none; }
.hide { display:none!important; }

.tab10 { width:39px;height:200px;margin:-222px 0px 0px 171px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden; }
.tab10 div { padding:13px 12px;background:linear-gradient(to bottom,var(--accentBlue),var(--accentPink));border-radius:10px 0px 3px 0px;display:flex;flex-direction:column;gap:7px;--Iconsax-Color:var(--lightBlack2);--Iconsax-Size:17px;margin-left:39px;transition:.35s; }
.tab10 div a { height:17px;width:15px;display:flex;align-items:center;justify-content:center; }
.tab10.show div { margin-left:0px; }

.mini { display:grid;grid-template-columns:1fr 1fr;gap:10px;width:220px;position:absolute; }
.closetabs { display:grid;grid-template-columns:1fr 1fr;gap:10px;width:220px;position:absolute; }
.mini span, .closetabs span { display:block;background-color:var(--lightBack1);border-radius:5px;position:relative;z-index:1;cursor:pointer;box-shadow:0px 0px 0px 2px rgba(30,30,30,.075);text-align:center;font:800 10px var(--fontSans);line-height:10px;padding:10px 0px;text-transform:uppercase;letter-spacing:3px;display:flex;gap:7px;justify-content:center; }
.mini span i, .closetabs span i { --Iconsax-Color:var(--accentBlue);--Iconsax-Size:10px;padding-right:3px;filter:grayscale(100%) brightness(90%);transition:.35s; }
.mini span:hover i, .closetabs span:hover i { filter:grayscale(0%) brightness(90%); }

.epi-mini-tab1 { padding:15px 25px 0px 25px;transition:.35s;display:flex;flex-direction:column; }
.tab3 .epi-mini-tab1 { align-items:flex-end; }
.show .epi-mini-tab1 { padding-top:35px; }
.epi-mini-img { height:70px;width:70px;padding:25px;background-color:var(--lightBlack1);border-radius:100%;margin:0px auto -10px auto;box-shadow:0px 0px 10px 5px var(--lightBlack2); }
.epi-mini-img-1 { padding:5px;height:60px;width:60px;background-color:var(--lightBack2);border-radius:100%;mix-blend-mode:lighten; }
.epi-mini-img-1 img { height:60px;width:60px;border-radius:100%; }
.epi-mini-alias::before { font:800 10px var(--fontSans);line-height:10px;letter-spacing:2px;color:var(--lightBack2);text-transform:uppercase;content:'call me';display:block;margin:0px 0px 5px 5px; }
.epi-mini-alias { text-align:left;font:italic 800 22px var(--fontSans);line-height:20px;text-transform:lowercase;background:linear-gradient(90deg,var(--accentBlue),var(--accentPink));background-clip:text;-webkit-background-clip:text;color:transparent;letter-spacing:-.25px;height:60px;max-width:fit-content;padding-right:5px;margin-right:-5px; }
.tab3 .epi-mini-alias { text-align:right; }
.epi-mini-stuff { display:flex;flex-direction:column;gap:13px;font:12.5px var(--fontSans);line-height:20px;text-transform:lowercase;color:var(--lightBack2);padding:28px 50px 0px 0px;letter-spacing:.25px;transition:.35s;margin-left:-20px; }
.show .epi-mini-stuff { padding:8px 30px 0px 0px;margin-left:0px; }
.epi-mini-stuff h1 { margin:0px 0px 1px 0px;font:800 10px var(--fontSans);line-height:10px;text-transform:uppercase;letter-spacing:2px;background:linear-gradient(90deg,var(--accentBlue),var(--accentPink));background-clip:text;-webkit-background-clip:text;color:transparent;max-width:fit-content; }
.tab3 .epi-mini-stuff { text-align:right;align-items:flex-end;align-self:flex-start;padding-right:0px;width:115px; }
.tab3 .epi-mini-stuff div { display:flex;flex-direction:column;align-items:flex-end; }
.tab3 .epi-mini-stuff h1 { margin-right:-5px; }

.epi-mini-tab2 { padding:55px 25px 0px 25px;transition:.35s; }
.epi-mini-pers { font:italic 500 18px var(--fontSerif);line-height:20px;color:var(--lightBorder);height:150px;display:flex;flex-direction:column;justify-content:center;text-align:center;position:relative;transform:scale(.85);transition:.35s; }
.epi-mini-pers i { position:absolute;--Iconsax-Color:var(--lightBlack3);--Iconsax-Size:35px;display:flex;justify-content:center;width:100%;margin-top:-175px; }
.show .epi-mini-pers { transform:scale(1); }
.epi-mini-ship { display:flex;flex-direction:column;justify-content:space-between;gap:10px;margin-right:40px;margin-top:28px;height:162px;align-items:flex-end;text-align:right;transition:.35s; }
.show .epi-mini-ship { margin-top:8px; }
.epi-mini-ship h1 { margin:0px 0px 0px 0px;font:800 10px var(--fontSans);line-height:10px;letter-spacing:2px;text-transform:uppercase;color:var(--lightBorder);padding:10px 8px 10px 10px;border-radius:10px;border-radius:5px;background-color:var(--lightBlack2);text-align:center; }
.epi-mini-ship h2 { margin:0px -5px 0px 0px;padding-right:5px;font:italic 800 22px var(--fontSans);line-height:20px;background:linear-gradient(90deg,var(--accentBlue),var(--accentPink));background-clip:text;-webkit-background-clip:text;color:transparent;max-width:fit-content;letter-spacing:-.5px; }

.GID-administration .epi-post-ribbon { display:none; }
.GID-administration .tab, .GID-administration .mini, .GID-staff .tab, .GID-staff .mini, .GID-member .tab, .GID-member .mini { display:none!important; }
.GID-administration .epi-post-name, .GID-staff .epi-post-name, .GID-member .epi-post-name { padding-top:20px; }w
</style>

<div class="epi-menu">
  <div class="epi-menu-left">
    <a href="">epitaph</a>
    <a href="">category name</a>
    <a href="">board name</a>
  </div>
  <div class="epi-menu-right">
    <a href="#">
      <i class="iconsax" icon-name="search-normal-1"></i>
      <div><span>search</span></div></a>
    <a href="#">
      <i class="iconsax" icon-name="users"></i>
      <div><span>members</span></div></a>
    <a href="#">
      <i class="iconsax" icon-name="setting-2"></i>
      <div><span>admin</span></div></a>
    <a href="#"><h1></h1>
      <i class="iconsax" icon-name="user-1-square"></i>
      <div><span>profile</span></div></a>
    <a href="#"><h1></h1>
      <i class="iconsax" icon-name="inbox-1"></i>
      <div><span>messages</span></div></a>
    <a href="#">
      <i class="iconsax" icon-name="activity-square"></i>
      <div><span>new posts</span></div></a>
    <a href="#">
      <i class="iconsax" icon-name="message-dots"></i>
      <div><span>discord</span></div></a>
    <a href="#">
      <i class="iconsax" icon-name="external-circle"></i>
      <div><span>logout</span></div></a>
    <!--<a href="#">
      <i class="iconsax" icon-name="pop-in-circle"></i>
      <div><span>login</span></div></a>
    <a href="#">
      <i class="iconsax" icon-name="add-circle"></i>
      <div><span>register</span></div></a>-->
    <a href="#" class="modal-link" data-modal-target="epi-modal">
      <i class="iconsax" icon-name="more-circle"></i>
      <div><span>navigation</span></div></a>
   
  </div>
</div>

<div id="epi-modal" class="modal-content">
  <div class="epi-modal-left">
    <div class="epi-modal-ink"><div></div></div>
    <div class="epi-modal-click">
      <a href="#" title="bookmarks"><i class="iconsax" icon-name="page-with-bookmark-2"></i></a>
      <a href="#" title="edit profile"><i class="iconsax" icon-name="edit-1"></i></a>
    </div>
    <div class="epi-modal-icon"><div class="epi-modal-icon-1">
      <img src="https://i.ibb.co/zFXz9TF/50.png">
    </div></div>
    <a href="#" class="epi-modal-name">first lastname</a>
    <div class="epi-modal-text">
      you have <a href="#">00 notifications</a> and <a href="#">00 messages</a> in your inbox.
    </div>
  </div>
  <div class="epi-modal-right">
    <div class="epi-modal-right-1">
      <div class="epi-modal-welcome"><div>
        An old man sitting there, <b>his head bowed down</b>. Every now and then, he takes a look around, and his eyes reflect the memory - pain of years gone by. He can't regain nostalgic dreams he'll never see again. With trembling hands, he wipes a tear. Many fall like rain. There's one for every year. And his life laid out so clearly, now, life that's brought death. So nearly now life once he clung to dearly so lets go.
      </div></div>
      <a href="#" class="epi-modal-event">
        <div class="epi-modal-event-title">event title here</div>
        <div class="epi-modal-event-img"><div></div></div>
      </a>
    </div>
    <div class="epi-modal-right-2">
      <a href="">getting started</a>
      <a href="">guidelines</a>
      <a href="">plot + setting</a>
      <a href="">member groups</a>
      <a href="">application</a>
      <a href="">claims masterlist</a>
      <a href="">mod request</a>
      <a href="">site store</a>
      <a href="">site templates</a>
      <a href="">affiliation</a>
      <a href="">frequently asked</a>
      <a href="">our credits</a>
    </div>
  </div>
</div>

<div class="epi-banner">
  <div class="epi-banner-render"></div>
  <div class="epi-banner-ink"><div></div></div>
  <div class="epi-banner-radial"></div>
  <div class="epi-banner-name">epitaph</div>
  <div class="epi-banner-text">
    <div>welcome to <b>solaris</b>, first lastname</div>
  </div>
</div>
<div class="epi-wrapper">
<div class="epi-wrapper-inner">
  <div class="epi-wrapper-ribbon">
    <div class="epi-wrapper-ribbon-left"></div>
    <div class="epi-wrapper-ribbon-curve"></div>
    <div class="epi-wrapper-ribbon-right"></div>
    <svg viewBox="0 0 600 600" class="epi-wrapper-ribbon-text">
  <path id="curve" d="M 0 200 A 50 50 0 1 1 400 200 A 50 50 0 1 1 0 200" transform="translate(100,100)" fill="none"/>
  <text width="500">
    <textPath alignment-baseline="top" xlink:href="#curve">
      ❈ EPITAPH ❈
    </textPath>
  </text>
</svg>
  </div>
  <div class="epi-wrapper-sub">
    <div class="epi-wrapper-icon"><div class="epi-wrapper-icon-1">
      <img src="https://i.ibb.co/YZFGj0L/Ast.png">
    </div></div>
    an animanga<br>small town afterlife rp
  </div>
  <div class="epi-wrapper-top">
    <div class="epi-wrapper-ink"><div></div></div>
    <div class="epi-wrapper-ink-2"><div></div></div>
  </div>
 
 
 
  <div class="epi-title"><span>
    <div>thread title goes here</div>
  </span></div>
 
  <div class="epi-controls">
    <div class="epi-pagination">
      <a>prev</a><a>1</a><a>2</a><a>next</a></div>
    <a href="#" class="epi-controls-1">compose a reply</a>
    <div class="epi-actions">actions</div>
    <div class="epi-search">search
      <i class="iconsax" icon-name="search-normal-1"></i></div>
  </div>
 
 
 
 
 
 
 
 
 
 
  <div class="epi-post">
    <div class="epi-post-left">
      <div class="epi-post-thred">
        <a href="#">thread title goes here</a>
      </div>
      <div class="epi-post-ink"><div></div></div>
      <div class="epi-post-left-1">
       
       
        <div class="epi-post-ribbon">
          <div class="epi-post-ribbon-left"></div>
          <div class="epi-post-ribbon-curve"></div>
          <div class="epi-post-ribbon-right"></div>
            <svg viewBox="0 0 220 220" class="epi-post-ribbon-text">
            <path id="curve2" d="M 0 80 A 20 20 0 1 1 160 80 A 20 20 0 1 1 0 80" transform="translate(30,30)" fill="none"/>
            <text width="150">
              <textPath alignment-baseline="top" xlink:href="#curve2">
                PURGATORIO
              </textPath>
            </text>
            </svg>
        </div>
       
        <div id="mini-out">
        <div class="epi-post-av">
          <div class="epi-post-av-img"><div></div></div>
        </div>
          <div class="tab tab0"></div>
          <div class="tab tab1"><div class="epi-mini-tab1">
            <div class="epi-mini-img"><div class="epi-mini-img-1">
              <img src="https://i.ibb.co/wr9JDs4/52.png">
            </div></div>
            <div class="epi-mini-alias">nickname</div>
            <div class="epi-mini-stuff">
              <div><h1>pronouns</h1>go here</div>
              <div><h1>age</h1>18 yrs old</div>
              <div><h1>species</h1>goes here</div>
              <div><h1>occupation</h1>goes here</div>
            </div>
          </div></div>
          <div class="tab tab2"><div class="epi-mini-tab2">
            <div class="epi-mini-pers"><i class="iconsax" icon-name="quote-start-circle"></i>
              these days, my life just careens through a pinball machine. i could do so much better, but i can't.
            </div>
            <div class="epi-mini-ship">
              <h1>engaged to</h1>
              <h2>first lastname</h2>
            </div>
          </div></div>
          <div class="tab tab3"><div class="epi-mini-tab1">
            <div class="epi-mini-img"><div class="epi-mini-img-1">
              <img src="https://storage.proboards.com/7309187/avatar/kWMiLXSshaUqqOnwBzls.png">
            </div></div>
            <div class="epi-mini-alias">leap</div>
            <div class="epi-mini-stuff">
              <div><h1>posts</h1>000 written</div>
              <div><h1>dollars</h1>000 earned</div>
              <div><h1>currently</h1>offline</div>
              <div><h1>timezone</h1>gmt-6 (cst)</div>
            </div>
          </div></div>
          <div class="tab tab10"><div>
            <a href="#" title="application"><i class="iconsax" icon-name="book-square"></i></a>
            <a href="#" title="plotter"><i class="iconsax" icon-name="key-square"></i></a>
            <a href="#" title="tracker"><i class="iconsax" icon-name="direction-square"></i></a>
            <a href="#" title="development"><i class="iconsax" icon-name="music-square-2"></i></a>
            <a href="#" title="get all posts"><i class="iconsax" icon-name="direction-square"></i></a>
            <a href="#" title="send message"><i class="iconsax" icon-name="message-square"></i></a>
            <a href="#" title="parent account"><i class="iconsax" icon-name="user-1-square"></i></a>
          </div></div>
         
          <div class="closetabs hide"><span><i class="iconsax" icon-name="chevron-circle-left"></i>prev</span><span>next<i class="iconsax" icon-name="chevron-circle-right"></i></span></div>
          <div class="mini mini1 right"><span><i class="iconsax" icon-name="chevron-circle-left"></i>prev</span><span>next<i class="iconsax" icon-name="chevron-circle-right"></i></span></div>
          <div class="mini mini2 hide"><span><i class="iconsax" icon-name="chevron-circle-left"></i>prev</span><span>next<i class="iconsax" icon-name="chevron-circle-right"></i></span></div>
          <div class="mini mini3 left"><span><i class="iconsax" icon-name="chevron-circle-left"></i>prev</span><span>next<i class="iconsax" icon-name="chevron-circle-right"></i></span></div> 
        </div>
        <a href="#" class="epi-post-name" id="my-element">marisol magellan</a>
      </div>
    </div>
    <div class="epi-post-mid">
      <div class="epi-post-bulk">
       
       
       
       
       
       
       
       
       
       
       
       
<div class="epi-temp"><div class="epi-temp-1">
<div class="epi-temp-top">
<i class="ph ph-butterfly"></i>
<h1>small subtitle here</h1>
<h2>large title here</h2>
</div>
<div class="epi-temp-mid">

<h1><b>sub-sub-title text here</b>
sub-title can go here</h1>
<div class="epi-temp-mid-1">
An old man sitting there, his head bowed down. Every now and then, he takes a look around, and his eyes reflect the memory - pain of years gone by. <b>He can't regain nostalgic dreams he'll never see again.</b> With trembling hands, he wipes a tear. Many fall like rain; there's one for every year. And his life laid out so clearly, now - life that's brought death. So nearly so life once he clung to dearly now lets go.
<br><br>
So spare a thought as you pass him by. Take a closer look, and you'll say, <i>"He's our tomorrow just as much as we are his yesterday."</i> A lonely grave is soon forgot. Only wind and leaves lament his mournful soul, yet they shout his epitaph out clear for anyone who's passing by. It names the person lying here as you.
<blockquote>
Thermal count is rising in perpetual writhing. The primodrial ooze and the sanity they lose. Awakened in the morning to more air pollution warnings. Still, we sleepwalk off to work while our nervous systems jerk. <a href="">Pretending not to notice how history forbode us.</a> With the Greenhouse in effect, our environment was wrecked. Now I can only laugh as I read our epitaph. We spend our lives as moles in the dark of the dawn patrol.
</blockquote>
</div>

<h1 class="epi-temp-even"><b>sub-sub-title text here</b>
sub-title can go here</h1>
<div class="epi-temp-mid-1">
As he stood out on the watch deck looking out onto the sea, it would offer no solutions, only silent company. So he took hold of the reasons as he tried to understand, but they offered just confusion as they bled into his - Dear God, couldn't you decide what should happen to a man's assassins? Dear God, is it suicide? I have never been a man of passion. I believe what the prophets said - that the oceans hold their dead - but at night when the waves are near, they whisper, and I hear.
<ul>
  <li>this is a listed item</li>
  <li>and another one, this time with lots of lone text so as to see what this will look like when it wraps to a new line.</li>
  <li>wowza!</li>
</ul>
</div>

<h2><div class="selected">face claims</div>
<div>occupations</div>
<div>who's who</div>
<div>reservations</div></h2>
<div class="epi-temp-mid-1 epi-claims">

  <h3>series title here</h3>
  <ul>
    <li class="GID-purgatorio"><b>character name</b> as <a href="">first lastname</a></li>
    <li class="GID-inferno"><b>character name</b> as <a href="">first lastname</a></li>
  </ul>
  <h3>series title here</h3>
  <ul>
    <li class="GID-paradiso"><b>character name</b> as <a href="">first lastname</a></li>
    <li><b>character name</b> as <a href="">first lastname</a></li>
  </ul>
 
  <br><br>

  <h3>paradiso</h3>
  <ul>
    <li class="GID-paradiso"><b>job title</b>, <a href="">first lastname</a></li>
    <li class="GID-paradiso"><b>job title</b>, <a href="">first lastname</a></li>
  </ul>
  <h3>inferno</h3>
  <ul>
    <li class="GID-inferno"><b>job title</b>, <a href="">first lastname</a></li>
    <li class="GID-inferno"><b>job title</b>, <a href="">first lastname</a></li>
  </ul>
  <h3>purgatorio</h3>
  <ul>
    <li class="GID-purgatorio"><b>job title</b>, <a href="">first lastname</a></li>
    <li class="GID-purgatorio"><b>job title</b>, <a href="">first lastname</a></li>
  </ul>
 
  <br><br>

  <h3>face claims</h3>
  <ul>
    <li class="GID-paradiso"><b>series, character</b> for <i>alias</i> until 00.00</li>
    <li class="GID-paradiso"><b>series, character</b> for <i>alias</i> until 00.00</li>
  </ul>
  <h3>occupations</h3>
  <ul>
    <li class="GID-purgatorio"><b>job title</b> for <i>alias</i> until 00.00</li>
    <li class="GID-purgatorio"><b>job title</b> for <i>alias</i> until 00.00</li>
  </ul>

</div>

</div>
</div></div>
       
       
       
       
       
       
       
       
       
       
       
       
       
      </div>
      <div class="epi-post-bot">
        <div class="epi-post-likes"><a href="">first lastname</a> liked this</div>
        <div class="epi-post-edit">last edit on month 00, 0000</div>
      </div>
    </div>
    <div class="epi-post-right">
      <div class="epi-post-right-links">
      <a href=""><i class="iconsax" icon-name="quote-start-square"></i></a>
      <a href=""><i class="iconsax" icon-name="pen-tool-square"></i></a>
      <a href=""><i class="iconsax" icon-name="tick-square"></i></a>
      <a href=""><i class="iconsax" icon-name="more-square"></i></a>
      </div>
      <div class="epi-post-right-time">month 00, 0000</div>
    </div>   
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

</div></div>

<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script src="//glenthemes.github.io/iconsax/geticons.js"></script>
<link href="//glenthemes.github.io/iconsax/style.css" rel="stylesheet">
<script src="//d3js.org/d3.v3.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Passions+Conflict&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<script src="https://unpkg.com/@phosphor-icons/web"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fitty/2.3.6/fitty.min.js"></script>
[/html]