Wine O'Clock - Baúl

<script src="//pull.cappuccicons.com/cpf.js"></script><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Orelega+One&family=Satisfy&display=swap" rel="stylesheet"><div class="winecont0"><div class="winecont"><div class="winecontimg"></div><div class="winecontlink1"><a href="#"><span class="cp cp-grapes-o"><h>Perfil</h></span></a><a href="#"><span class="cp cp-wine"><h>Expediente</h></span></a><a href="#"><span class="cp cp-grapes-o"><h>Relaciones</h></span></a></div><div class="winecontlink2"><a href="#"><span class="cp cp-flower-o"><h>Cronología</h></span></a><a href="#"><span class="cp cp-wine"><h>Mensaje Privado</h></span></a><a href="#"><span class="cp cp-flower-o"><h>Otro</h></span></a></div><div class="winetxt">Caramels tiramisu wafer halvah powder lemon drops chocolate bar chupa chups. Sweet gingerbread soufflé wafer wafer oat cake.</div><div class="winecol"><span class="winedat">Vino</span><span class="winedat">Uvas</span><span class="winedat">Italia</span><span class="winedat">10 años</span></div></div><div class="winetitle">Wine O'Clock</div><div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div></div>

<style>.winecont0{--wine1: #300018; --wine2: #5A3D31; --wine3: #837B47; --wine4: #ADB85F; --wine5: #E5EDB8; --wineimg: url(http://via.placeholder.com/200x200/) center;}.winecont0{width:420px; height: 320px; margin: 0 auto;}.winecont{width: 420px; background: var(--wine1); margin: 0 auto; height: 320px; padding: 20px;}.winecontimg{background: var(--wineimg); background-size: cover; width: 200px; height: 200px; border: 10px solid var(--wine4);}.winecontlink1{display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; width: 60px; height: 220px; margin-top: -220px; position: absolute; margin-left: 230px;}.winecontlink2{display: flex; justify-content: space-evenly; align-items: center; width: 220px; height: 60px; margin-top: 10px;}.winecontlink1 a, .winecontlink2 a{width: 10px; height: 10px; padding: 20px; background: var(--wine4); color: var(--wine1); font-size: 12px; text-align: center; display: flex; justify-content: center; align-items: center; text-decoration:none;}.winecontlink1 .cp, .winecontlink2 .cp{font-size: 20px; color: var(--wine1);}.winecontlink1 span h, .winecontlink2 span h{max-width:68px; background:var(--wine4); position:absolute; font:0px 'Century Gothic'; text-transform:uppercase; display:flex; transition:ease 1s; z-index: 9;}.winecontlink1 span:hover h, .winecontlink2 span:hover h{overflow:visible; padding:5px 10px; margin-top: 20px; margin-left: 10px; font:10px 'Century Gothic'; border: 1px solid var(--wine2);}.winetxt{width: 200px; height: 90px; font-size: 13px; font-family: 'Orelega One'; text-transform: lowercase; font-style: oblique; font-weight: 400; text-align: center; line-height: 14px; color: var(--wine5); position: absolute; margin-top: -65px; margin-left: 225px; display: flex; justify-content: center; align-items: center;}.winecol{width: 100px; height: 220px; position: absolute; margin-top: -290px; margin-left: 310px; display: flex; flex-direction: column; justify-content: center; align-items: center;}span.winedat{width:100px;height: 20px;background:var(--wine4);margin-top: 5px;padding:10px;font-family:'Orelega One';color: var(--wine1);}.winetitle{font-family: 'Satisfy'; font-size: 55px; color: var(--wine3); margin-top: -42px; margin-left: 20px; width: 440px; text-align: left;}#myscr{width: 450px; font-family: 'Century Gothic'; font-size: 11px; text-align: right; color: #333 ; margin: 0 auto; margin-top: -35px;}#myscr a{color: var(--wine2);text-decoration: none;}</style>