Macaroon - Dark Version (Expediente)

<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Libre+Barcode+39+Text&family=Montserrat&family=Style+Script&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"><div class="grad0"> <div class="grad1"> <div class="gradnavicon"> <span class="fas fa-angle-left"></span> <span class="fas fa-angle-right"></span> <span class="fas fa-home"></span> </div><div class="gradnav"> <span>macaroonweb.com</span> <div class="gradnavicon1"> <span class="fas fa-redo-alt"></span> <span class="fas fa-times"></span> </div></div></div><div class="grad01"> <div class="grad01nav"> <div class="gradpt"> <div id="grapun1"></div><div id="grapun2"></div><div id="grapun3"></div></div></div><div class="macr"> <input type="checkbox" name="macr" id="macr"/> <input type="checkbox" name="macro" id="macro"/> <div class="macr1"> <div class="gradpes1"> <label for="macr"><span class="far fa-star"></span> Principal</label> </div><div class="gradpes2"> <label for="macro"><span class="far fa-star"></span> Historia</label> </div></div><div class="grad2"> <div class="gradtit">Nombre y Apellido</div><div class="gradbar1"></div><div class="graddato"> <div class="gradimg"><img src="http://via.placeholder.com/150x150"></img></div><div class="graddat1"> <span class="gradat2"><div id="grapun1" style="margin-right: 10px;"></div>Dato 1</span> <span class="gradat2"><div id="grapun2" style="margin-right: 10px;"></div>Dato 2</span> <span class="gradat2"><div id="grapun3" style="margin-right: 10px;"></div>Dato 3</span> <span class="gradat2"><div id="grapun1" style="margin-right: 10px;"></div>Dato 4</span> </div></div><div class="gradtxt">Lemon drops soufflé soufflé caramels caramels danish chocolate bar jujubes pudding. Liquorice carrot cake pie sesame snaps cotton candy macaroon. Cheesecake cake chupa chups donut liquorice brownie gummies oat cake tart. Toffee gingerbread biscuit oat cake dragée marzipan I love cheesecake dragée. Jelly beans I love donut I love liquorice pie brownie cupcake oat cake. Tiramisu caramels biscuit pastry chocolate cake jelly beans apple pie sweet roll I love. Croissant I love gingerbread I love icing chocolate cake. Shortbread toffee candy muffin topping sugar plum I love brownie oat cake. Sesame snaps cake chocolate icing topping. <br>Jelly beans I love donut I love liquorice pie brownie cupcake oat cake. Tiramisu caramels biscuit pastry chocolate cake jelly beans apple pie sweet roll I love. Croissant I love gingerbread I love icing chocolate cake. Shortbread toffee candy muffin topping sugar plum I love brownie oat cake. Sesame snaps cake chocolate icing topping. Toffee gingerbread biscuit oat cake dragée marzipan I love cheesecake dragée. I love brownie oat cake. Liquorice carrot cake pie sesame snaps cotton candy macaroon. Apple pie sweet roll I love. Cheesecake. </div></div><div class="grad22"> <div class="gradtit">Historia</div><div class="gradbar1"></div><div class="gradtxt">Lemon drops soufflé soufflé caramels caramels danish chocolate bar jujubes pudding. Liquorice carrot cake pie sesame snaps cotton candy macaroon. Cheesecake cake chupa chups donut liquorice brownie gummies oat cake tart. Toffee gingerbread biscuit oat cake dragée marzipan I love cheesecake dragée. Jelly beans I love donut I love liquorice pie brownie cupcake oat cake. Tiramisu caramels biscuit pastry chocolate cake jelly beans apple pie sweet roll I love. Croissant I love gingerbread I love icing chocolate cake. Shortbread toffee candy muffin topping sugar plum I love brownie oat cake. Sesame snaps cake chocolate icing topping. Lemon drops soufflé soufflé caramels caramels danish chocolate bar jujubes pudding. Liquorice carrot cake pie sesame snaps cotton candy macaroon. Cheesecake cake chupa chups donut liquorice brownie gummies oat cake tart. Toffee gingerbread biscuit oat cake dragée marzipan I love cheesecake dragée. Jelly beans I love donut I love liquorice pie brownie cupcake oat cake. Tiramisu caramels biscuit pastry chocolate cake jelly beans apple pie sweet roll I love. Croissant I love gingerbread I love icing chocolate cake. Shortbread toffee candy muffin topping sugar plum I love brownie oat cake. Sesame snaps cake chocolate icing topping.Sweet chocolate bar lollipop I love gingerbread candy canes macaroon chocolate cake. Croissant soufflé tiramisu dragée apple pie carrot cake cupcake dragée. I love gummies icing tootsie roll pudding oat cake I love. Icing candy canes candy canes icing bonbon. Muffin gummi bears cake I love oat cake macaroon caramels I love. Jujubes I love gummies I love candy canes chupa chups. Caramels I love cake powder sugar plum. I love I love biscuit chocolate bar powder wafer candy canes I love. Jelly cake sugar plum I love soufflé lollipop toffee icing.Bonbon sesame snaps chocolate cake bonbon donut I love caramels candy. Chocolate cupcake pie candy fruitcake candy jujubes apple pie. I love gummi bears muffin croissant chupa chups. Chupa chups cupcake powder chocolate bar cake candy dessert pudding. Jelly bear claw toffee candy canes macaroon halvah. Donut ice cream danish caramels dragée chocolate cake. Pastry halvah oat cake sweet croissant I love danish I love wafer. Bonbon sesame snaps chocolate cake bonbon donut I love caramels candy. Chocolate cupcake pie candy fruitcake candy jujubes apple pie. I love gummi bears muffin croissant chupa chups. Chupa chups cupcake powder chocolate bar cake candy dessert pudding. Jelly bear claw toffee candy canes macaroon halvah. Donut ice cream danish caramels dragée chocolate cake. Pastry halvah oat cake sweet croissant I love danish I love wafer</div></div></div><div class="grad3">Macaroon caramels carrot.</div></div></div><div class="mystcred"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div>


<style>.grad0{--gradb:#000; --gradb1:#0e0e0e; --grad1:#d8a4e0; --grad2:#91d4db; --grad3:#8771cd; --gradtxt: #aaa; --gradr: linear-gradient(138deg, rgba(242,242,242,1) 0%, rgba(179,123,187,1) 5%, rgba(217,222,252,1) 38%, rgba(135,113,205,1) 65%, rgba(66,66,118,1) 99%); --gradr1:linear-gradient(138deg, rgba(216,164,224,1) 14%, rgba(136,76,144,1) 50%, rgba(124,207,215,1) 100%);}.grad0{background: var(--gradb); width: 400px; height: auto; padding: 20px; border-radius: 20px; margin: 0 auto; box-shadow: 2px 2px 2px var(--gradb1); padding-bottom: 30px; color: var(--gradtxt);}.grad1{width: 420px; height: 40px; padding: 10px; background: var(--gradb1); margin-left: -20px; margin-top: -20px; border-radius: 10px 10px 0px 0px; display: flex; justify-content: space-around; align-items: center;}.gradpt{width: 65px; display: flex; justify-content: space-around;}#grapun1{width: 15px; height: 15px; border-radius: 50px; background: var(--grad1);}#grapun2{width: 15px; height: 15px; border-radius: 50px; background: var(--grad2);}#grapun3{width: 15px; height: 15px; border-radius: 50px; background: var(--grad3);}.gradnav{width: 300px; height: 15px; padding: 5px; background: var(--gradb); border-radius: 5px; font: 10px 'Montserrat'; color: var(--gradtxt); line-height: 18px; display: flex; justify-content: space-between;}.gradnavicon{width: 50px; font-size: 15px; line-height: 15px; display: flex; justify-content: space-between; align-items: center; color: var(--gradtxt);}.gradnavicon1{width: 25px; font-size: 10px; line-height: 15px; display: flex; justify-content: space-around; align-items: center; color: var(--gradtxt);}.grad01{background:var(--gradb1); width: 410px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin-top: 20px; border-radius: 20px; margin-left:-5px;}.grad01nav{background:var(--gradb); width: 366px; height: 5px;margin: 0 auto;padding: 20px; border-radius: 20px 20px 0px 0px; outline: 2px solid var(--gradb1); border-bottom: 1px solid var(--grad1); display: flex; justify-content: space-between; align-items: center;}.macr1{display: flex; justify-content: space-around; width: 240px; position: absolute; margin-top: -48px; margin-left: 160px;}.gradpes1{background: var(--gradb1); font: 12px 'Montserrat'; color:var(--gradtxt); width: 110px; height: 35px; border-radius: 10px 10px 0px 0px; margin-top: 10px; display: flex; justify-content: center; align-items: center; outline: 1px solid var(--grad1); border-bottom: 1px solid var(--gradb1);}.gradpes2{background: var(--gradb1); font: 12px 'Montserrat'; color:var(--gradtxt); width: 110px; height: 35px; border-radius: 10px 10px 0px 0px; margin-top: 10px; display: flex; justify-content: center; align-items: center; outline: 1px solid var(--grad1); border-bottom: 1px solid var(--gradb1);}.macr input{display:none;}.macr label{cursor:pointer; text-align: center; margin-left: 5px; color: var(--gradtxt);}.macr .grad2{opacity: 1;}.macr input#macr:checked ~ .grad2{opacity: 1;}.macr label{position:relative; z-index:1;}.macr .grad22{background: white; opacity: 0;}.macr input#macro:checked ~ .grad22{opacity: 1; background: var(--gradb1);}.macr label{position:relative; z-index:1;}.grad2{width: 410px; height: 620px; font-weight: 300; text-align: justify;}.gradtit{width:400px; margin-top: 20px; text-align: center; font: 45px 'Pacifico'; background: var(--gradb); background: var(--gradr1); color:transparent; background-clip: text; -webkit-background-clip: text;}.gradbar1{width: 350px; height: 3px; background: var(--gradr1); margin: -10px auto;}.gradtxt{width: 350px; height: 600px; overflow: auto; padding: 10px 20px 0px 20px; border: 10px solid transparent; font: 12px 'Montserrat'; color:var(--gradtxt);}.graddato{display: flex; justify-content: space-around; align-items: center; width: 400px; margin-top: 30px; padding: 10px; margin-left: -2px;}.gradimg img{width: 150px; height: 150px; padding: 5px; border: 1px solid var(--grad1);}.graddat1{display: flex; flex-direction: column;}.graddat1 span{display: flex; width: 190px; padding: 5px; margin-bottom: 5px; font: 12px 'Montserrat'; color:var(--gradtxt); border-bottom: 1px solid var(--grad1)}.grad2 .gradtxt{height: 310px;}.grad22{width: 410px; height: 640px; font-weight: 300; text-align: justify; position:absolute; margin-top:-640px}.grad22 .gradtit{font-size: 40px; text-align: left; margin-left: 20px;}.grad22 .gradtxt{height: 530px;}.grad3{width:400px; padding-bottom: 25px; margin: 0 auto; text-align: center; font: 30px 'Libre Barcode 39 Text'; background: var(--gradb); background: var(--gradr1); color:transparent; background-clip: text; -webkit-background-clip: text; margin-top: 20px;}.mystcred{width: 400px; margin: 2px auto; text-align: center;}.mystcred a{font: 11px 'Montserrat'; text-decoration: none; color: #000; font-weight: 500;}.gradtxt::-webkit-scrollbar{width:4px; height: auto;}.gradtxt::-webkit-scrollbar-thumb:vertical{width: 4px; height:10px; background-color: var(--grad2);}</style>