MM082.- Luna Roja (indice)

<div class="MM082" style="background-image: url(https://i.postimg.cc/qq66Mvcb/FN3k-Xd-CWYAA63-HO.jpg.jpg);"><div>

<b>Luna Roja</b>
<div class="MM082-a">
<a href="URL"><i class="cp cp-moon"></i><b>Ficha</b></a>
<a href="URL"><i class="cp cp-calendar"></i><b>Crono</b></a>
<a href="URL"><i class="cp cp-user"></i><b>Relas</b></a>
<a href="URL"><i class="cp cp-envelope"></i><b>Buzón</b></a>
<a href="URL"><i class="cp cp-book"></i><b>Diario</b></a>
<a href="URL"><i class="cp cp-planet"></i><b>Random</b></a>
</div>

<div class="MM082-a">
Nombre Apellido
</div>
</div></div><a href="https://emmescodes.tumblr.com/" class="miMM"style="color: #a6001f;">emme</a><link href="https://fonts.googleapis.com/css2?family=Joan&family=Lato:wght@400;700&display=swap" rel="stylesheet"><link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"><style>.MM082, .MM082 * { box-sizing: border-box; scrollbar-color: #0006 #0002 !important; scrollbar-width: thin; transition: .5s; } .MM082 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM082 div::-webkit-scrollbar-thumb { background: #0006 !important; } .MM082 br { display: none; } .MM082 { --m1: #222; --m2: #111; --m3: #e1e1e1; --m4: #a6001f; width: 550px; margin: auto; min-height: 100px; background-position: center; background-size: cover; border-top: 15px solid; border-bottom: 15px solid; color: var(--m1); display: flex; justify-content: flex-end; font: 10px Lato; outline: 1px solid var(--m2); box-shadow: inset 0 -1px var(--m2), inset 0 1px var(--m2); text-shadow: -1px -1px var(--m2), -1px 1px var(--m2), 1px -1px var(--m2), 1px 1px var(--m2); } .MM082 > div { width: 200px; border-left: 1px solid var(--m2); border-right: 1px solid var(--m2); margin-right: 20px; display: flex; align-items: center; justify-content: center; padding: 80px 10px 70px; flex-direction: column; background: linear-gradient(to top, var(--m1), transparent, var(--m1)); position: relative; z-index: 1; } .MM082 > div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--m1); opacity: .6; z-index: -1; } .MM082 > div > b { position: relative; color: var(--m3); font: 16px Joan; letter-spacing: 2px; z-index: 1; } .MM082 > div > b::before { content: ""; width: 50px; height: 50px; border-radius: 100px; color: var(--m4); z-index: -1; position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); animation: moon 4s linear infinite; transform: rotate(45deg); } @keyframes moon { 0% { border-top: 49px solid; border-bottom: 1px solid; } 50% { border-top: 1px solid; border-bottom: 1px solid; } 100% { border-top: 1px solid; border-bottom: 49px solid; } } .MM082-a { display: flex; flex-wrap: wrap; justify-content: center; border-top: 1px solid var(--m4); border-bottom: 1px solid var(--m4); margin-top: 34px; position: relative; padding: 0 0 5px 5px; } .MM082-a::before { content: ""; height: 20px; border-left: 1px solid var(--m4); bottom: 100%; left: 50%; position: absolute; } .MM082-a > a { border: 1px solid var(--m2); margin: 5px 5px 0 0; min-width: 30%; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 9px 0 5px; background: var(--m1); text-transform: uppercase; color: var(--m3) !important; } .MM082-a > a:hover { background: var(--m2); } .MM082-a i { color: var(--m4); font-size: 12px; margin-bottom: 3px; } .MM082-a ~ .MM082-a { color: var(--m3); padding: 1px 3px 3px 5px; margin-top: 20px; letter-spacing: 2px; } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: 0.5s; text-transform: uppercase; padding: 3px; } .miMM:hover { letter-spacing: 3px; }</style>