Rápido (expediente)

<div class="MM041"><input type="radio" name="MM041" id="MM041-1" checked><input type="radio" name="MM041" id="MM041-2"><input type="radio" name="MM041" id="MM041-3">

<div class="MM041-t"><div><b>Nombre Apellido</b><i>

<label title="Básico" for="MM041-1" style="background-image: url(https://i.postimg.cc/6QJ1mvcp/01.png);"></label>
<label title="Resumen" for="MM041-2" style="background-image: url(https://i.postimg.cc/FFD8H1rT/02.png);"></label>
<label title="Stats" for="MM041-3" style="background-image: url(https://i.postimg.cc/DyNN1Dbs/03.png);"></label>

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

<div class="MM041-p m1">
<div class="MM041-img" style="background-image: url(https://i.postimg.cc/3R3fKQPM/04.png);"></div>
<div class="MM041-txt">
<span><b>Nombre:</b>Info Aquí</span>
<span><b>Edad:</b>Info Aquí</span>
<span><b>Nacionalidad:</b>Info Aquí</span>
<span><b>Ocupación:</b>Info Aquí</span>
<span><b>Grupo:</b>Info Aquí</span>
</div>
</div>

<div class="MM041-p m2">
<div class="MM041-img" style="background-image: url(https://i.postimg.cc/cJR5yLkM/05.png);"></div>
<div class="MM041-b"><div>
<b>Psico</b>
<span>Wafer candy canes candy canes topping carrot cake cupcake cake icing. Pastry marshmallow gummies pudding jelly beans donut gummi bears. Croissant lemon drops ice cream lemon drops jelly gummi bears. Gummies cake gummies pudding cookie croissant brownie pie.

Cake pastry sugar plum fruitcake jujubes topping sweet. Carrot cake chupa chups donut biscuit halvah tart. Caramels biscuit chocolate bar biscuit sugar plum macaroon sweet pastry biscuit. Lollipop gummi bears soufflé candy canes jujubes cupcake.</span>

<b>Historia</b>
<span>Macaroon muffin cake wafer. Cotton candy topping pudding. Ice cream sweet roll gummies toffee tootsie roll marzipan. Ice cream bear claw chocolate cake liquorice.

Gummi bears tiramisu sugar plum chupa chups. Bear claw chocolate cake chupa chups wafer gummi bears marzipan candy. Lemon drops gummies pudding cake gummi bears candy wafer gummies ice cream.

Oat cake fruitcake wafer ice cream carrot cake cake. Candy cheesecake apple pie jelly. Bonbon candy canes sugar plum ice cream. Pudding jelly beans marzipan sugar plum marzipan chocolate halvah lemon drops fruitcake.</span>
</div></div>
</div>


<div class="MM041-p m3">
<div class="MM041-s">
<span><b>Confianza</b><i style="width: 30%;"></i></span>
<span><b>Agilidad</b><i style="width: 50%;"></i></span>
<span><b>Honestidad</b><i style="width: 70%;"></i></span>
<span><b>Inteligencia</b><i style="width: 10%;"></i></span>
<span><b>Lealtad</b><i style="width: 1%;"></i></span>
<span><b>Random</b><i style="width: 100%;"></i></span>
</div>
<div class="MM041-img" style="background-image: url(https://i.postimg.cc/y8SbjPFG/06.png);"></div>
</div>

</div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Oswald&display=swap" rel="stylesheet"><style>.MM041, .MM041 * { box-sizing: border-box; scrollbar-color: var(--mm-01) #0002 !important; scrollbar-width: thin; transition: .5s; } .MM041 input, .MM041 br { display: none; } .MM041 { --mm-01: #218c8c; --mm-02: #111; --mm-03: #1a1a1a; --mm-04: #222; --mm-05: #555; --mm-06: #999; width: 500px; border: 1px solid var(--mm-02); background: var(--mm-03); margin: auto; color: var(--mm-01); text-align: center; font: 12px Open Sans; position: relative; } .MM041-t { border-bottom: 1px solid var(--mm-02); padding: 8px; } .MM041-t > div { display: flex; border: 1px solid var(--mm-02); align-items: center; Background: var(--mm-04); } .MM041-t b { font: 20px Oswald; padding: 10px 15px; margin-right: auto; } .MM041-t i { display: flex; } .MM041-img, .MM041-t label { box-shadow: inset 0 0 0 5px var(--mm-04), inset 0 0 0 6px var(--mm-02); background-position: center; background-size: cover; } .MM041-t label { width: 50px; height: 50px; border-left: 1px solid var(--mm-02); display: block; cursor: crosshair; } .MM041 input[id*="-1"]:checked ~ div label[for*="-1"], .MM041 input[id*="-2"]:checked ~ div label[for*="-2"], .MM041 input[id*="-3"]:checked ~ div label[for*="-3"] { box-shadow: inset 0 0 0 3px var(--mm-01), inset 0 0 0 4px var(--mm-02); } .MM041-p { height: 350px; opacity: 0; pointer-events: none; display: flex; } .MM041-p ~ .MM041-p { position: absolute; bottom: 0; left: 0; right: 0; } .MM041 input[id*="-1"]:checked ~ .m1, .MM041 input[id*="-2"]:checked ~ .m2, .MM041 input[id*="-3"]:checked ~ .m3 { opacity: 1; pointer-events: auto; } .MM041-p.m1 { flex-direction: column; } .MM041-img { flex: 1; border: 1px solid var(--mm-02); margin: 8px; } .MM041-txt { border-top: 1px solid var(--mm-02); padding: 6px; display: flex; flex-wrap: wrap; } .MM041-txt > span { border: 1px solid var(--mm-02); margin: 2px; min-width: 40%; flex: 1; background: var(--mm-04); display: flex; color: var(--mm-05); align-items: center; padding-right: 10px; } .MM041-s span:hover b, .MM041-b > div > span:hover, .MM041-txt > span:hover { color: var(--mm-06); } .MM041-txt b { padding: 5px 10px; border-right: 1px solid var(--mm-02); margin-right: auto; color: var(--mm-01); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; } .MM041-b { border-left: 1px solid var(--mm-02); width: 65%; padding: 8px; } .MM041-b > div { height: 100%; overflow: auto; padding-right: 5px; } .MM041-b > div > b { display: block; border: 1px solid var(--mm-02); background: var(--mm-04); padding: 5px; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; } .MM041-b > div > span { display: block; margin: 5px 0; border: 1px solid var(--mm-02); padding: 15px; text-align: justify; hyphens: auto; color: var(--mm-05); } .MM041-b > div > span:last-of-type { margin-bottom: 0; } .MM041-s { width: 65%; border-right: 1px solid var(--mm-02); display: flex; flex-direction: column; align-items: center; justify-content: center; } .MM041-s > span { position: relative; width: 80%; background: var(--mm-04); height: 10px; margin: 15px 0; border: 1px solid var(--mm-02); } .MM041-s b { position: absolute; bottom: 100%; left: 5px; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; color: var(--mm-05); right: 0; text-align: left; } .MM041-s i { position: absolute; background: var(--mm-01); top: 0px; bottom: 0px; left: 0px; border: 3px solid var(--mm-04); } .MM041-b > div > span br { display: block; } .MM041-b > div > span br ~ br { margin: 5px; } .MM041 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM041 div::-webkit-scrollbar-thumb { background: var(--mm-01) !important; } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: 0.5s; text-transform: uppercase; padding: 3px; color: #444; } .miMM:hover { letter-spacing: 3px; }</style>