/************************ TEMA OSCURO **********************************/

<div class="BettyBaul BettyBaul-o"><div class="BT-tabs" style="border-color:var(--bt-border-color)"><div class="BT-modul"><input type="radio" id="baul-1" name="baul-group-1" checked><label for="baul-1"><img src="https://placehold.jp/60x60.png" style="border-color:var(--bt-fondo-2); outline-color:var(--bt-border-color)"/></label>

<div class="BT-contenido-tab"><div class="BT-titulo"><b>Florence</b><span>Florence</span></div><div class="BT-descrp"><img src="https://placehold.jp/100x100.png"/><div class="BT-datos"><div><i class="fas fa-user"></i><span>Dato</span></div><div><i class="fas fa-birthday-cake"></i><span>Dato</span></div><div><i class="fas fa-flag"></i><span>Dato</span></div><div><i class="fas fa-quote-right"></i><span>Dato</span></div></div></div><img src="https://placehold.jp/306x95.png" class="BT-img-port"/></div></div><div class="BT-modul"><input type="radio" id="baul-2" name="baul-group-1"><label for="baul-2"><img src="https://placehold.jp/60x60.png" style="border-color:var(--bt-fondo-2); outline-color:var(--bt-border-color)" /></label>
<div class="BT-contenido-tab"><div class="BT-titulo"><b>Playlist</b><span>Playlist</span></div><div class="BT-playlist-principal"><img src="https://placehold.jp/80x80.png" style="border-color:var(--bt-fondo-2); outline-color:var(--bt-border-color)"/><img src="https://placehold.jp/80x80.png" style="border-color:var(--bt-fondo-2); outline-color:var(--bt-border-color)"/><img src="https://placehold.jp/80x80.png" style="border-color:var(--bt-fondo-2); outline-color:var(--bt-border-color); margin:0"/>
<div class="BT-titulo2" style="margin-top:4px; border-color:var(--bt-fondo-2); outline-color:var(--bt-border-color)">artistas</div></div><div class="BT-playlist-principal" style="height:80px;"><iframe src="https://open.spotify.com/embed/track/2D0dj3hVkRQJCp63cxCPEx" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe></div></div></div><div class="BT-modul"><input type="radio" id="baul-3" name="baul-group-1"><label for="baul-3"><img src="https://placehold.jp/60x60.png" style="border-color:var(--bt-fondo-2); outline-color:var(--bt-border-color)"/></label>
<div class="BT-contenido-tab"><div class="BT-moodboard"><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/></div></div></div><div class="BT-modul"> <input type="radio" id="baul-4" name="baul-group-1"><label for="baul-4"><img src="https://placehold.jp/60x60.png" style="border-color:var(--bt-fondo-2); outline-color:var(--bt-border-color)"/></label>  
<div class="BT-contenido-tab"><div class="BT-titulo"><b>Miscelánea</b><span>Miscelanea</span></div><div class="BT-otrosDatos" style="color:#ccc!important"><div><i class="fas fa-quote-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus nisi mauris, at sodales lorem mollis in. Vestibulum at pellentesque est. Ut euismod tellus quis arcu feugiat, eu eleifend libero faucibus. Mauris eu sem diam.<br/><br/> <i class="fas fa-quote-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus nisi mauris, at sodales lorem mollis in. Vestibulum at pellentesque est. Ut euismod tellus quis arcu feugiat, eu eleifend libero faucibus. Mauris eu sem diam.<br/><br/> <i class="fas fa-quote-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus nisi mauris, at sodales lorem mollis in. Vestibulum at pellentesque est. Ut euismod tellus quis arcu feugiat, eu eleifend libero faucibus. Mauris eu sem diam.<br/><br/> <i class="fas fa-quote-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus nisi mauris, at sodales lorem mollis in. Vestibulum at pellentesque est. Ut euismod tellus quis arcu feugiat, eu eleifend libero faucibus. Mauris eu sem diam.<br/><br/> <i class="fas fa-quote-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus nisi mauris, at sodales lorem mollis in. Vestibulum at pellentesque est. Ut euismod tellus quis arcu feugiat, eu eleifend libero faucibus. Mauris eu sem diam.<br/> </div></div></div>
</div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link type="text/css" rel="stylesheet" href="https://dl.dropbox.com/s/1re0fgmkc3njbl8/miscelanea.css?dl=0"/><style>.BettyBaul-o{--bl-acento-1:#9659c1!important; --bt-fondo-2:#444; --bt-fondo-3:#555; --bt-fondo-1:#333; --bl-acento-2:#9659c1!important; --bt-border-color:#666;} .BettyBaul br{display:none;} .BettyBaul-o .BT-contenido-tab, .BettyBaul-o .BT-titulo, .BettyBaul-o .BT-playlist-principal, .BettyBaul-o .BT-descrp,.BettyBaul-o .BT-datos > div,.BettyBaul-o .BT-descrp > img{border-color:var(--bt-border-color)!important;}.BettyBaul-o .BT-datos > div{color:#ccc!important;} .BettyBaul-o .BT-datos > div i{border-radius:0px 20px 0px 0px; padding-right:10px; font-size:12px!important;} .BettyBaul-o .BT-img-port{outline-color:var(--bt-border-color)!important;} .BettyBaul-o .BT-otrosDatos > div {color:#ccc!important;}.BT-otrosDatos br{display:block;} .BettyBaul-o .BT-titulo > span{text-shadow:2px 2px var(--bt-fondo-1)!important;}</style>

/************************ TEMA CLARO ***********************************/


<div class="BettyBaul"><div class="BT-tabs"><div class="BT-modul"><input type="radio" id="baul-1" name="baul-group-1" checked><label for="baul-1"><img src="https://placehold.jp/60x60.png"></label>
<div class="BT-contenido-tab"><div class="BT-titulo"><b>Florence</b><span>Florence</span></div><div class="BT-descrp"><img src="https://placehold.jp/100x100.png"/><div class="BT-datos"><div><i class="fas fa-user"></i><span>Dato</span></div><div><i class="fas fa-birthday-cake"></i><span>Dato</span></div><div><i class="fas fa-flag"></i><span>Dato</span></div><div><i class="fas fa-quote-right"></i><span>Dato</span></div></div></div><img src="https://placehold.jp/306x95.png" class="BT-img-port"/></div></div><div class="BT-modul">
<input type="radio" id="baul-2" name="baul-group-1"><label for="baul-2"><img src="https://placehold.jp/60x60.png"></label><div class="BT-contenido-tab"><div class="BT-titulo"><b>Playlist</b><span>Playlist</span></div><div class="BT-playlist-principal"><img src="https://placehold.jp/80x80.png"/><img src="https://placehold.jp/80x80.png"/><img src="https://placehold.jp/80x80.png" style="margin:0;"/><div class="BT-titulo2" style="margin-top:4px;">artistas</div></div><div class="BT-playlist-principal" style="height:80px;"><iframe src="https://open.spotify.com/embed/track/2D0dj3hVkRQJCp63cxCPEx" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe></div></div></div><div class="BT-modul"><input type="radio" id="baul-3" name="baul-group-1"><label for="baul-3"><img src="https://placehold.jp/60x60.png"></label><div class="BT-contenido-tab"><div class="BT-moodboard"><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/><img src="https://placehold.jp/105x105.png"/></div></div></div><div class="BT-modul"><input type="radio" id="baul-4" name="baul-group-1"><label for="baul-4"><img src="https://placehold.jp/60x60.png"></label><div class="BT-contenido-tab"><div class="BT-titulo"><b>Miscelánea</b><span>Miscelanea</span></div><div class="BT-otrosDatos"><div> <i class="fas fa-quote-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus nisi mauris, at sodales lorem mollis in. Vestibulum at pellentesque est. Ut euismod tellus quis arcu feugiat, eu eleifend libero faucibus. Mauris eu sem diam.<br/><br/> <i class="fas fa-quote-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus nisi mauris, at sodales lorem mollis in. Vestibulum at pellentesque est. Ut euismod tellus quis arcu feugiat, eu eleifend libero faucibus. Mauris eu sem diam.<br/><br/> <i class="fas fa-quote-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus nisi mauris, at sodales lorem mollis in. Vestibulum at pellentesque est. Ut euismod tellus quis arcu feugiat, eu eleifend libero faucibus. Mauris eu sem diam.<br/><br/> <i class="fas fa-quote-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus nisi mauris, at sodales lorem mollis in. Vestibulum at pellentesque est. Ut euismod tellus quis arcu feugiat, eu eleifend libero faucibus. Mauris eu sem diam.<br/><br/> <i class="fas fa-quote-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus nisi mauris, at sodales lorem mollis in. Vestibulum at pellentesque est. Ut euismod tellus quis arcu feugiat, eu eleifend libero faucibus. Mauris eu sem diam.<br/> </div></div></div></div>
</div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link type="text/css" rel="stylesheet" href="https://dl.dropbox.com/s/1re0fgmkc3njbl8/miscelanea.css?dl=0"/><style>.BettyBaul{--bl-acento-1:#dcc29c;--bl-acento-2:#75bd7d;} .BT-otrosDatos br{display:block;}.BettyBaul br{display:none;} .BT-datos > div i{border-radius:0px 20px 0px 0px; padding-right:10px; font-size:12px!important;} .BT-datos > div{color:#555;} </style>