Emerald Store - Inventario

<link href="https://nagoshiashumari.github.io/Rpg-Awesome/stylesheets/rpg-awesome.min.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Bad+Script&family=Dosis&display=swap" rel="stylesheet"><div class="mshop"> <div class="mshoptit"><div class="mshoptit2">Shopping Time</div></div><div class="mshopcont"> <div class="mshoptxt">I love cheesecake sweet wafer I love carrot cake. Powder sweet roll caramels I love I love lemon drops soufflé soufflé jelly. Cheesecake carrot cake cotton candy danish dragée powder cotton candy I love pastry.</div><div class="mshopitems"> <div class="mshopitemcont"> <div class="mshopitem0"><span class="ra ra-potion"></span></div><div class="mshopitem1"><p>Poción mágica</p><i>Cantidad: 25</i></div></div><div class="mshopitemcont"> <div class="mshopitem0"><span class="ra ra-mirror"></span></div><div class="mshopitem1"><p>Espejo</p><i>Cantidad: 1</i></div></div><div class="mshopitemcont"> <div class="mshopitem0"><span class="ra ra-crystal-ball"></span></div><div class="mshopitem1"><p>Bola de Cristal</p><i>Cantidad: 1</i></div></div><div class="mshopitemcont"> <div class="mshopitem0"><span class="ra ra-emerald"></span></div><div class="mshopitem1"><p>Esmeralda</p><i>Cantidad: 5</i></div></div><div class="mshopitemcont"> <div class="mshopitem0"><span class="ra ra-bullets"></span></div><div class="mshopitem1"><p>Balas</p><i>Cantidad: 25</i></div></div><div class="mshopitemcont"> <div class="mshopitem0"><span class="ra ra-daggers"></span></div><div class="mshopitem1"><p>Dagas</p><i>Cantidad: 25</i></div></div><div class="mshopitemcont"> <div class="mshopitem0"><span class="ra ra-eye-shield"></span></div><div class="mshopitem1"><p>Escudo</p><i>Cantidad: 1</i></div></div><div class="mshopitemcont"> <div class="mshopitem0"><span class="ra ra-kunai"></span></div><div class="mshopitem1"><p>Kunai</p><i>Cantidad: 25</i></div></div><div class="mshopitemcont"> <div class="mshopitem0"><span class="ra ra-shuriken"></span></div><div class="mshopitem1"><p>Shuriken</p><i>Cantidad: 25</i></div></div><div class="mshopitemcont"> <div class="mshopitem0"><span class="ra ra-apple"></span></div><div class="mshopitem1"><p>Manzana</p><i>Cantidad: 10</i></div></div><div class="mshopitemcont"> <div class="mshopitem0"><span class="ra ra-compass"></span></div><div class="mshopitem1"><p>Brújula</p><i>Cantidad: 1</i></div></div><div class="mshopitemcont"> <div class="mshopitem0"><span class="ra ra-book"></span></div><div class="mshopitem1"><p>Libros</p><i>Cantidad: 25</i></div></div></div></div></div><div class="mystcred"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div>


<style>.mshop{--shopcol1: #000; --shopcolt: #111; --shopcol2: #283D3B; --shopcol3: #197278; --shopcol4: #FFF;--shopdeg: linear-gradient(15deg, rgba(40,61,59,1) 28%, rgba(30,96,99,1) 87%); --shopdeg1: linear-gradient(95deg, rgba(40,61,59,1) 3%, rgba(25,114,120,1) 46%, rgba(25,120,71,1) 100%);}.mshop{width: 400px; height: 540px; padding: 20px; background: var(--shopcol1); display: flex; justify-content: space-between; align-items: flex-start; margin: 0 auto;}.mshoptit{width: 40px; height: 500px; padding: 20px; background: var(--shopdeg); display: flex; justify-content: center; align-items: center;}.mshoptit2{width: 530px; height: 80px; max-height: 80px; overflow: hidden; display: flex; justify-content: center; align-items: center; font: 60px 'Bad Script'; color: var(--shopcol4); text-align: center; position: absolute; margin-left: 5px; transform: rotate(-90deg);}.mshopcont{width: 310px; height: 540px; display: flex; justify-content: center; flex-direction: column;}.mshoptxt{width: 270px; height: 55px; padding: 20px; font: 12px 'Dosis'; text-align: right; color: var(--shopcol3); font-weight: 800;}.mshopitems{width: 270px; height: 400px; padding: 20px; background: var(--shopcolt);overflow: auto; border-top: 1px solid var(--shopcol2); border-bottom: 1px solid var(--shopcol2); border-radius: 4px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}.mshopitemcont{width: 85px; height: 90px; background: var(--shopdeg1); border-radius: 10px; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; overflow: hidden; transition: 0.5s ease-out;}.mshopitem0{font-size: 70px; color: var(--shopcol4); line-height: 70px; margin-left: 70px; transition: 0.5s ease-out; display: flex; justify-content: center; align-items: center; text-align: center;}.mshopitem0 span{font-size: 70px; color: var(--shopcol4); margin-left: 10px;}.mshopitem1{width: 85px; height: 90px; background: var(--shopcol3); border-radius: 10px; display: flex; justify-content: space-around; align-items: center; flex-direction: column; opacity: 0; transition: 0.5s ease-out;}.mshopitem1 p{width: 80px; border-bottom: 1px solid var(--shopcol4); text-align: center; font: 20px 'Dosis'; font-weight: 800; color: var(--shopcol4); line-height: 20px; padding-bottom: 5px; margin-top: 0px;}.mshopitem1 i{width: 80px; text-align: center; font: 12px 'Dosis'; font-weight: 800; color: var(--shopcol4); margin-top: -50px;}.mystcred{width: 400px; margin: 0px auto; text-align: center;}.mystcred a{font: 11px 'Dosis'; text-decoration: none; color: #000; font-weight: 500;}.mshopitemcont:hover .mshopitem0{opacity: 0.8; margin-left: -80px; transition: 0.5s ease-out;}.mshopitemcont:hover .mshopitem1{opacity: 0.8; margin-left: 0px; transition: 0.5s ease-out;}.mshopitems::-webkit-scrollbar{width:4px; height: auto;}.mshopitems::-webkit-scrollbar-thumb:vertical{width: 4px; height:10px; background-color: var(--shopcol3);}</style>