iv. Madness

<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet"><div id="Madness"> <div class="ina">Nombre McNombre McApellido</div> <div class="society"></div> <div class="dat"> <div class="resumen">— Apodo</div> <div class="resumen">— Edad</div> <div class="resumen">— Afiliación</div> <div class="resumen">— Ficha</div> <div class="resumen">— Relaciones</div> </div> <div class="scarlet1"><b>— Abiertos</b></div> <div class="rayita1"></div> <div class="scarletext">— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/></div> <div class="society1"></div> <div class="scarlet2"><b>— Cerrados</b></div> <div class="rayita2"></div> <div class="scarletext2">— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/>— Nombre • <b><a href="/">link</a></b> • Lugar<br/></div> <div class="society2"></div><a class="razicred" href="https://thewitchlies.tumblr.com/">— w</a></div>

<style>#Madness { width: 400px; height: 605px; margin: 0 auto; background-color: #0e0e0e; position: relative; outline: .1px solid #9b080857; outline-offset: 10px; margin-top: 20px; border-left: 80px solid #9b0808cc; }.ina{ font-size: 48px; transform: rotate(-90deg); position: absolute; color: #0e0e0e; left: -320px; top: -70px; letter-spacing: -1px; margin-top: 366px; font-family:'Impact'; width: 605px;}.society { width: 160px; height: 160px; position: relative; left: 10px; background: -webkit-linear-gradient(bottom,#0e0e0e,rgba(0,0,0,0),rgba(0,0,0,0)), url('https://media1.tenor.com/images/11040ff59e282fb3c746b97df565e90f/tenor.gif');}.dat { color: #fefefe; border-left: 5px solid #7c0909; width: 230px; height: 160px; position: relative; left: 170px; top: -173px;}.resumen{ color: #fefefe; margin-left: 10px; margin-top: 13px; font-size: 9px; line-height: 15px; text-align: justify; font-family: Lato; letter-spacing: 2px; padding: 2px; text-transform: uppercase; padding-top: 5px; }.scarlet1{ font-size: 40px; font-family: 'Abril Fatface'; position: relative; top: -158px; left: 10px; text-transform: lowercase; color: #9b0808cc; letter-spacing: -1px; }.scarlet2{ font-size: 40px; font-family: 'Abril Fatface'; float: right; position: relative; top: -121px; left: -10px; text-transform: lowercase; color: #9b0808cc; letter-spacing: -1px; }.rayita1 { width: 400px; border-bottom: 1px solid #9B0808; position: absolute; margin-top: -142px; }.rayita2 { position: absolute; width: 400px; border-bottom: 1px solid #9B0808; margin-top: -87px;}.scarletext { width: 215px; height: 162px; color: #fefefe; margin-top: -130px; margin-left: 10px; position: absolute; font-size: 10px; font-family: calibri; letter-spacing: 1px; overflow: auto; text-align: justify; }.scarletext2 { width: 220px; height: 162px; color: #fefefe; margin-top: -77px; left: 170px; position: absolute; font-size: 10px; font-family: calibri; letter-spacing: 1px; overflow: auto; line-height: 15px; padding-left: 10px;}.society1 { width: 160px; height: 160px; position: relative; left: 230px; top: -131px; background: -webkit-linear-gradient(bottom,#0e0e0e,rgba(40,22,22,0),rgba(0,0,0,-20.65)), url('https://media.giphy.com/media/IlZ0U1R4IxTSo/giphy.gif'); }.society2 { width: 160px; height: 160px; position: relative; left: 10px; top: -75px; background: -webkit-linear-gradient(bottom,#0e0e0e,rgba(40,22,22,0),rgba(0,0,0,-20.65)), url('https://66.media.tumblr.com/468410d8942a01dbba3955a4fc3f6cdd/tumblr_n1vw3cTGtI1qjzhwpo1_250.gif'); }.scarletext::-webkit-scrollbar { width: 5px; }.scarletext::-webkit-scrollbar-track { background: transparent; border: none; } .scarletext::-webkit-scrollbar-thumb { background: transparent; border: 1px solid #9B0808; }.scarletext2::-webkit-scrollbar { width: 5px; }.scarletext2::-webkit-scrollbar-track { background: transparent; border: none;  }.scarletext2::-webkit-scrollbar-thumb { background: transparent; border: 1px solid #9B0808; }.scarletext a { color: #7FA80A; text-decoration: none; }.scarletext2 a { color: #CB3434; text-decoration: none; }.scarletext b { color: #5E81A6;}.scarletext2 b { color: #5E81A6;}a.razicred {position: absolute; font-family:  Lobster; font-size: 10px; text-decoration: none; color: #9B0808; margin-top: -55px; left: 380px;}</style>