Fire - Exp [Elements Pack]

<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Playfair+Display:wght@400;600&family=Raleway:wght@100&display=swap" rel="stylesheet"><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"> <div class="elementfire1"> <div class="elemtitlef">TITULO</div><div class="elemproff" style="background:url('IMAGEN AQUI'); background-size: cover;"> <div class="elemprof2f"></div><div class="elemiconf"><span class="th th-fire"></span></div></div><div class="eleminfof"> <div class="elemtitf">DESCRIPCIÓN FÍSICA</div><div class="elempff"> TEXTO AQUI </div><div class="elemtitf">DESCRIPCIÓN PSICOLÓGICA</div><div class="elempff"> TEXTO QUI</div><div class="elemtitf">HISTORIA</div><div class="elemhif"> TEXTO AQUI </div><br><div class="elemlinf"> <div class="elemico2f"><a href="link1" class="th th-user"><h>PROFILE</h></a></div><div class="elemico2f"><a href="link2" class="th th-heart-1"><h>RELACIONES</h></a></div><div class="elemico2f"><a href="link3" class="th th-clock"><h>CRONOLOGIA</h></a></div><div class="elemico2f"><a href="link4" class="th th-envelope"><h>MP</h></a></div></div></div></div><div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div><style>.elementfire1{--cfire1: #000; --cfire2:#AB2828; --cfire3: #5A2727; --cfire4: #FFF;}.elementfire1{width: 350px; height: 550px; background: var(--cfire1); padding: 10px;position: relative;border: 1px solid var(--cfire2); margin:0 auto;}.elemtitlef{width: 520px; height: 30px; background: linear-gradient(to bottom right, var(--cfire2), var(--cfire3)); font-family: 'Playfair Display'; font-size: 20px; color: var(--cfire4); transform: rotate(-90deg); text-align: center; position: absolute; top: 265px; left: -220px; line-height: 30px;}.elemproff{width: 265px; height: 150px; border: 1px solid var(--cfire2); position: absolute; top: 20px; left: 80px;}.elemprof2f{width: 265px; height: 150px; background: var(--cfire2); opacity: 0.4;}.elemiconf{width: 45px; height: 45px; background: var(--cfire2); position: absolute; top: 106px; left: 220px;}.elemiconf .th{color: var(--cfire1); font-size: 40px; line-height: 30px; position:relative; top:4px; left:1px;}.eleminfof{width: 300px; padding: 5px; position: relative; top: 165px; left: 55px;}.elemtitf{padding-top: 7px; font-family: 'PlayFair Display'; font-size: 12px; color: var(--cfire2); position: relative; text-align: right; right: 15px; font-style: bold;}.elempff{width: 250px; max-height: 50px; padding: 10px; border-top: 1px solid var(--cfire2); overflow: auto; font-family: 'Raleway'; font-size: 11px; color: var(--cfire4); text-align: justify;}.elemhif{width: 250px; max-height: 80px; padding: 10px; border-top: 1px solid var(--cfire2); overflow: auto; font-family: 'Raleway'; font-size: 11px; color: var(--cfire4); text-align: justify;}.elemlinf{width: 250px; height: 10px; padding: 10px; background: linear-gradient(to bottom right, var(--cfire2), var(--cfire3)); display: flex; justify-content: center; align-items: center;}.elemico2f{background: var(--cfire1); width: 25px; height: 25px; border-radius: 25px; display: flex; justify-content: center; align-items: center; margin-left: 5px;}.elemico2f a{color: var(--cfire4); font-size: 15px; line-height: 10px; text-decoration: none;}.elemico2f h{max-width:68px; background:var(--cfire1); position:absolute; font:0px 'raleway'; text-transform:uppercase; display:flex; transition:ease 1s;}.elemico2f:hover h{overflow:visible; padding:5px 10px; margin-top: 20px; margin-left: 10px; font:8px 'raleway'; border: 1px solid var(--cfire2);}#myscr{font-family: 'Century Gothic'; font-size: 11px; text-align: center; color: #333 ; margin: 0 auto; margin-top: 1px;}#myscr a{color: #333;text-decoration: none;}.elempff::-webkit-scrollbar{width:6px; height: auto; background-color: var(--cfire1);}.elempff::-webkit-scrollbar-thumb:vertical{width: 6px; height:10px; background-color: var(--cfire2);}.elempff::-moz-scrollbar{width:2px; height: auto; background-color: var(--cfire1);}.elempff::-moz-scrollbar-thumb:vertical{width: 2px; height:10px; background-color: var(--cfire2);}.elemhif::-webkit-scrollbar{width:6px; height: auto; background-color: var(--cfire1);}.elemhif::-webkit-scrollbar-thumb:vertical{width: 6px; height:10px; background-color: var(--cfire2);}.elemhif::-moz-scrollbar{width:2px; height: auto; background-color: var(--cfire1);}.elemhif::-moz-scrollbar-thumb:vertical{width: 2px; height:10px; background-color: var(--cfire2);}</style>