PPG "Bubbles" - Relas (w/scroll)

<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Raleway&display=swap" rel="stylesheet"><div class="ppgcont2" id="ppgbur"> <div class="ppgcontit"> <div id="ppgcir"></div><div class="ppgtit1"> <div class="ppgtitb">Bubbles</div><div class="ppgtitf">Marshmallow carrot cake wafer powder cotton candy sugar plum chocolate cake lollipop jelly. Toffee sesame snaps jelly-o muffin ice cream cookie.</div></div><div class="ppgimg" style="background:url('https://64.media.tumblr.com/438a3f16e00522364c2afab474e636b1/tumblr_omhkxhDndv1w0yr0uo8_r1_250.gifv');"></div></div><div class="ppgcontgen"> <div class="ppgcontre"> <div class="ppgsub1">Relaciones</div><div class="ppgrel1"> <div class="ppgreim" style="background:url(http://via.placeholder.com/140x100);"> <div class="ppgreim1"><m>Blossom</m>Hermana</div></div><div class="ppgreim" style="background:url(http://via.placeholder.com/140x100);"> <div class="ppgreim1"><m>Blossom</m>Hermana</div></div><div class="ppgreim" style="background:url(http://via.placeholder.com/140x100);"> <div class="ppgreim1"><m>Blossom</m>Hermana</div></div><div class="ppgreim" style="background:url(http://via.placeholder.com/140x100);"> <div class="ppgreim1"><m>Blossom</m>Hermana</div></div><div class="ppgreim" style="background:url(http://via.placeholder.com/140x100);"> <div class="ppgreim1"><m>Blossom</m>Hermana</div></div><div class="ppgreim" style="background:url(http://via.placeholder.com/140x100);"> <div class="ppgreim1"><m>Blossom</m>Hermana</div></div><div class="ppgreim" style="background:url(http://via.placeholder.com/140x100);"> <div class="ppgreim1"><m>Blossom</m>Hermana</div></div></div></div><div class="ppgcontdat"> <span class="ppgdat1">10 años</span> <span class="ppgdat1">Rubio</span> <span class="ppgdat1">Superheroína</span> <span class="ppgdat1">Estudiante</span> </div><div class="ppgcont3"> <div class="ppgcont3img" style="background:url('https://64.media.tumblr.com/67fb375cf347829af46a0d465ef63ed2/ec58939878b2f7cc-24/s100x200/c20db9cbfe5a37876ded4050f11009e5a3762f86.gifv')"></div><div class="ppgcont3img" style="background:url('https://64.media.tumblr.com/d15965badf3281719fab03d85c68f65d/tumblr_omhkxhDndv1w0yr0uo7_r1_100.gifv')"></div><div class="ppgcont3img" style="background:url('https://64.media.tumblr.com/f8ea5a56f76929a5893863de19bc0e99/ec58939878b2f7cc-2c/s100x200/864a013b71e38b5781a2aa20b7fe6f1ad5f151ef.gifv')"></div><div class="ppgcont3fr">Marshmallow carrot cake wafer powder cotton candy sugar plum chocolate cake lollipop jelly. Toffee sesame snaps jelly-o muffin ice cream cookie.</div></div></div></div><div class="mystcred"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div>



<style>#ppgbur{--ppgfondo: #f0f0f0;--ppgfondo2: #fff; --ppg1: #64e1e6; --ppgtit: #fff;}.ppgcont2{width: 500px; height: auto; margin: 0 auto; background: var(--ppgfondo); overflow: hidden;}#ppgcir{position: relative; height: 70px; width: 600px; background: var(--ppg1);}#ppgcir:before{content: "";display: block; position: absolute;border-radius: 30% 100%; width: 340px; height: 200px; background-color: var(--ppg1); right: 30px; top: 50px;}#ppgcir:after{content: ""; display: block; position: absolute; border-radius: 50% 50%; width: 390px; height: 200px; background-color: var(--ppg1); left:-50px;top: 10px;}.ppgcontit{width: 500px; height: 100px; background: var(--ppg1);}.ppgtit1{display: flex; flex-direction: column;justify-content: center;position: absolute; width: 300px; margin-top: -10px; margin-left: 5px;}.ppgtitb{font: 35px 'Lobster'; color: var(--ppgtit); text-align: center;}.ppgtitf{font: 10px 'Raleway'; color: var(--ppgtit); width: 250px; text-align: center; margin: 0 auto;}.ppgimg{width: 180px; height: 180px; border-radius: 200px; position: absolute; margin-left: 310px; margin-top: -50px;}.ppgcontgen{width:500px; height: auto; min-height: 400px; margin-top: 110px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}.ppgcontre{width: 500px; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center;}.ppgsub1{font: 40px 'Lobster'; color: var(--ppg1); width: 450px;}.ppgrel1{width: 460px; height: 300px; margin-left: 30px; overflow: auto; display: flex; flex-wrap: wrap;flex-basis: 200px;}.ppgreim{width: 140px; height: 100px; outline: 1px solid var(--ppg1); margin-right: 5px; margin-bottom: 5px;}.ppgreim1{position: absolute; width: 140px; height: 100px; background: var(--ppg1); text-align: center; font: 12px 'Raleway'; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: 0.5s ease-out;}.ppgreim1 m{font: 30px 'Lobster'; color: var(--ppgtit);}.ppgreim:hover .ppgreim1{opacity: 0.8; transition: 0.5s ease-out;}.ppgcontdat{width: 500px; height: 40px; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center;}.ppgdat1{background: var(--ppg1); padding: 5px 20px; font: 12px 'Raleway'; color: var(--ppgtit);}.ppgcont3{width: 500px; height: 80px; background: var(--ppg1); display: flex; justify-content: space-around; align-items: center;}.ppgcont3img{width: 70px; height: 70px;}.ppgcont3img img{width: 70px; height: 70px;}.ppgcont3fr{width: 240px; height: 60px; padding: 5px; font: 10px 'Raleway'; color: var(--ppgtit); display: flex; align-items: center; text-align: justify;}.mystcred{width: 540px; margin: 5px auto; text-align: center;}.mystcred a{font: 11px 'Raleway'; text-decoration: none; color: #000; font-weight: 500;}.ppgrel1::-webkit-scrollbar{width:4px; height: auto;}.ppgrel1::-webkit-scrollbar-thumb:vertical{width: 4px; height:10px; background-color: var(--ppg1);}</style>