Día de los muertos - V2

<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Aladin&family=Crimson+Text&family=Pacifico&display=swap" rel="stylesheet"><div id="diamuer4"> <div class="diamuertcont4"> <div class="diamuer4"> <div class="diamu4" style="border: 2px solid var(--color5);"> <div class="diamuhv4" style="color: var(--color5);"> <span class="th th-skull-o"></span> <div class="diamutit4">TITULO 1</div><div class="diamuhv5" style="background: var(--color5);"> <div class="diamutit5">TITULO 2</div><div class="diamutext4">TEXTO AQUI </div></div><div class="diamuimghv4"> <div class="diamudat4" style="background: var(--color5);">Otro</div><div class="diamudat4" style="background: var(--color5);">Otro</div><div class="diamudat4" style="background: var(--color5);">Otro</div><div class="diamudat4" style="background: var(--color5);">Otro</div></div></div><div class="diamuimg4" style="background: url('https://i.imgur.com/rKYCmDi.jpg');"> </div></div></div></div></div><div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div><style>#diamuer4{--color1: #000; --color2: #FFF; --color3: #1C1B1B; --color4: #FAC902; --color5: #0FC2C2;}#diamuer4{margin: 0 auto; background: var(--color1); width: 520px; height: 320px; padding: 5px;}.diamuertcont4{margin: 0 auto; margin-top: 30px;margin-left: 10px;}.diamuer4{width: 500px; height: 300px; position: absolute; margin-top: -20px; background: var(--color3);}.diamu4{width: 470px; height: 270px; padding: 5px; margin: 0 auto; margin-top: 8px;}.diamuimg4{width: 200px; height: 270px; margin-left: 270px; margin-top: -200px;}.diamuhv4{margin: 0 auto; text-align: center; margin-top: 70px; margin-left: -200px; color: var(--color5);}.diamu4 span{width: 80px; height: 80px; font-size: 80px;}.diamutit4{font-size: 40px; margin: 15px auto; font-family:'Aladin';}.diamuhv5{width: 245px; height: 250px; padding: 10px; position: absolute; margin-right: -500px; margin-top: -199px; font-size: 12px; color: var(--color1); opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}.diamuhv4:hover .diamuhv5{margin-left: 200px; opacity:1; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}.diamuimghv4{margin-top: -40px; margin-left: 260px; position: absolute;}.diamudat4{width: 200px; height: 20px; color: var(--color1); margin-top: 2px; font-size: 15px; text-align: center; line-height: 20px; font-family:'Crimson Text'; margin-left: 300px; opacity: 0;-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}.diamuhv4:hover .diamudat4{margin-left: 210px; opacity: 1; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}.diamutit5{font-size: 30px; margin: 10px auto; font-family:'Aladin'; color: var(--color1);}.diamutext4{font-family:'Crimson Text'; font-size: 14px; text-align: justify; width: 230px; height: 190px; padding: 10px; margin: 0 auto; margin-left: -4px; margin-top: -4px; overflow: auto;}#myscr{font-family: 'Century Gothic'; font-size: 11px; text-align: center; color: #333 ; margin: 0 auto; margin-top: 1px;}#myscr a{color: #333;text-decoration: none;}.diamutext4::-webkit-scrollbar{width:3px; height: auto;}.diamutext4::-webkit-scrollbar-thumb:vertical{background-color: var(--color3);}.diamutext4::-moz-scrollbar-button:start:decrement, -webkit-scrollbar-button:end:increment{display:none;}.diamutext4::-moz-scrollbar{width:2px; height: auto;}.diamutext4::-moz-scrollbar-thumb:vertical{background-color: var(--color3);}</style>