Black Swan - Cronología (w/scroll)

<script src="//pull.cappuccicons.com/cpf.js"></script><link href="https://fonts.googleapis.com/css2?family=Gentium+Basic&family=Spline+Sans&display=swap" rel="stylesheet"><div class="bswancon"> <div class="bswantop"> <div class="bswanimg"><img src="https://data.whicdn.com/images/341209670/original.gif"></img></div><div class="bswantop2"> <div class="bswantitle">Black Swan</div><div class="bswansub"> <div class="bswandat"><span class="cp cp-feather"></span>Dato 1</div><div class="bswandat"><span class="cp cp-feather"></span>Dato 2</div><div class="bswandat"><span class="cp cp-feather"></span>Dato 3</div></div></div></div><div class="bswancron"> <div class="bswancron1"> <div class="bswancroninf"> <span class="bswancrontt"><a href="#">Titulo del Post</a></span> <m>Con persona 1 y persona 2</m> </div><div class="bswancroninfimg"> <img src="https://c.tenor.com/A7db1AJrqEcAAAAC/black-swan-worldwide-handsome.gif"></img> <div class="bswancroninficon"><span class="cp cp-clock"></span></div></div></div><div class="bswancron1"> <div class="bswancroninf"> <span class="bswancrontt"><a href="#">Titulo del Post</a></span> <m>Con persona 1 y persona 2</m> </div><div class="bswancroninfimg"> <img src="https://i.pinimg.com/originals/a0/2a/38/a02a38cb0f461b3b7ca0579c48e36308.gif"></img> <div class="bswancroninficon"><span class="cp cp-cross"></span></div></div></div><div class="bswancron1"> <div class="bswancroninf"> <span class="bswancrontt"><a href="#">Titulo del Post</a></span> <m>Con persona 1 y persona 2</m> </div><div class="bswancroninfimg"> <img src="https://c.tenor.com/sjhyKp-GgpUAAAAC/black-swan-bts.gif"></img> <div class="bswancroninficon"><span class="cp cp-check-mark"></span></div></div></div></div><div class="bswanbot"></div></div><div class="mystcred"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div></div>


<style>.bswancon{--bswan1:#c1c1c1;--bswan2:#000;--bswan3: #aaa; --bswan4: #111;}.bswancon{width: 400px; height: auto; padding: 20px; border-radius: 20px; background: var(--bswan2); margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}.bswantop{width: 380px; display: flex; justify-content: space-around; align-items: center; margin-top: 15px;}.bswanimg img{width: 120px; height: 120px; object-fit: cover; border-radius: 120px; border: 5px solid var(--bswan1)}.bswantop2{width: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center;}.bswantitle{width: 100%; font: 35px 'Gentium Basic'; font-style: italic; font-weight: 700; text-align: center; color: var(--bswan1); text-shadow: 1px 1px 10px var(--bswan3); border-bottom: 5px solid var(--bswan1);}.bswansub{background: var(--bswan1); width: 180px; min-height: 105px; padding: 10px; display: flex; flex-direction: column; justify-content: space-around; opacity: 0; position: absolute; margin-top: 100px; transition: 0.5s ease-out;}.bswandat{outline: 1px solid var(--bswan2); padding: 5px; display: flex; justify-content: space-between; align-items: center; font: 13px 'Gentium Basic';}.bswandat span{background: var(--bswan2); color: var(--bswan1); padding: 5px; font-size: 10px;}.bswantop2:hover .bswansub{opacity: 0.94; margin-top: 175px; transition: 0.5s ease-out;}.bswancron{width: 340px; height:370px; overflow:auto; margin-bottom: 10px; padding: 20px; text-align: justify; font: 10px 'Spline Sans'; color: var(--bswan1); margin-top: -5px;}.bswancron1{width: 100%; background: var(--bswan4); padding: 10px; margin-left: -10px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; transition: 0.2s ease-out; margin-bottom: 10px;}.bswancron1:nth-child(even){flex-direction: row-reverse;}.bswancroninf{width: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center;}.bswancrontt a{font: 30px 'Gentium Basic'; text-decoration: none; font: 20px 'Gentium Basic'; font-style: italic; text-align: center; color: var(--bswan1); font-weight: 800;}.bswancroninf m{width: 100%; text-align: center; font: 12px 'Spline Sans'; border-top: 2px solid var(--bswan3);}.bswancroninfimg img{border-radius: 100px; width: 100px; height: 100px; object-fit: cover; border: 5px solid var(--bswan1);}.bswancroninficon{display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; width: 100px; height: 100px; border-radius: 100px; background: var(--bswan4); font-size: 40px; text-shadow: 1px 1px 30px var(--bswan1); position: relative; margin-top: -107px; margin-left: 5px; opacity: 0; transition: 0.2s ease-out;}.bswancron1:hover .bswancroninficon{opacity: 1; transition: 0.2s ease-out;}.bswanbot{width: 100%; height: 5px; background: var(--bswan1); margin-bottom: 5px;}.mystcred{width: 400px; margin: 0px auto; text-align: center;}.mystcred a{font: 11px 'Spline Sans'; text-decoration: none; color: #000; font-weight: 500;}.bswancron::-webkit-scrollbar{width:4px; height: auto;}.bswancron::-webkit-scrollbar-thumb:vertical{width: 4px; height:10px; background-color: var(--bswan1);}</style>