MJ5.- En la Bruma (multi)

<div class="MJ5" style="background-image: url(https://i.pinimg.com/564x/8f/1d/1d/8f1d1d2b589bf7bd8dbbe508aa99b18b.jpg);"><b></b><b></b><b></b><b></b><div>Sweet lemon drops gummies sweet gummi bears cake marshmallow sesame <b>snaps gummi bears.</b> Cake topping pie. Candy muffin chupa chups powder. Topping sesame snaps chocolate cake liquorice wafer brownie gingerbread tart. Jelly beans carrot cake chocolate bar.

Toffee cookie chocolate caramels biscuit brownie chupa chups jelly. Muffin jujubes halvah sesame snaps sugar plum. Gummi bears liquorice chocolate lollipop.

Dragée chocolate bar macaroon jelly gingerbread oat cake chupa chups. Sweet roll caramels halvah chupa chups halvah topping. Sugar plum sweet topping biscuit gingerbread powder. Lollipop caramels sweet marshmallow jelly-o. Chocolate bar sugar plum lemon drops biscuit danish.</div><strong>En la Bruma</strong></div><a class="miMJ5" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>

<link href="https://fonts.googleapis.com/css?family=Lato|Lora:400,700&display=swap" rel="stylesheet"><style>.MJ5, .MJ5 * {box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin;} .MJ5 {color: #FFF; width: 300px; margin: auto; min-height: 300px; background-position: center; background-size: cover; border: 10px solid #FFFD; animation: borde 10s linear infinite alternate; position: relative; overflow: hidden;} @keyframes borde {0% {box-shadow: inset 0 0 70px 0px;} 25% {box-shadow: inset 0 -10px 200px -10px;} 50% {box-shadow: inset -10px 0 100px 0px;} 75% {box-shadow: inset -10px 0 80px 0px;} 100% {box-shadow: inset 0 5px 150px -10px;}} .MJ5 > strong {display: block; padding: 0 0 25px; text-align: center; font: bold 14px Lora; text-shadow: 1px 1px 2px #000, 0 0 10px #000, 0 0 5px #000; letter-spacing: 2px; position: relative; margin-bottom: 10px;} .MJ5 > strong::before, .MJ5 > strong::after {content: ""; position: absolute; bottom: 20px; width: 70px; left: calc(50% - 35px); border-bottom: 2px solid;} .MJ5 > strong::after {color: #000; margin: -2px 2px; filter: blur(2px);} .MJ5 > div {margin: 30px; text-align: justify; hyphens: auto; max-height: 300px; overflow: auto; padding-right: 3px; font: 12px Lato; text-shadow: 1px 1px 2px #000, 0 0 10px #000, 0 0 5px #000; opacity: 0; transition: 1s; position: relative; background: #0006; box-shadow: 0 0 40px 40px #0006;} .MJ5:hover > div {opacity: 1;} .MJ5 > div b {text-shadow: 0 0 5px, 0 0 10px #000; letter-spacing: 1px;} .MJ5 > b:before, .MJ5 > b:after {content:""; position: absolute; width: 120px; height: 120px; box-shadow: inset 0 0 0100px; border-radius: 50%; filter: blur(25px); animation: bajo 5s linear infinite alternate;} .MJ5 > b:nth-of-type(odd)::before {transform: scale(2); bottom: -50px; left: calc(50% - 50px); animation-delay: .5s;} .MJ5 > b:nth-of-type(odd)::after {left: 0; bottom: -50px; animation-delay: 1s;} .MJ5 > b:nth-of-type(even)::before {transform: scale(2); bottom: -25px; right: -20px; animation-delay: 1.5s;} .MJ5 > b:nth-of-type(even)::after {right: 0; bottom: -50px;} .MJ5 > b:nth-of-type(3), .MJ5 > b:nth-of-type(4) {animation: bajo 3s linear infinite alternate;} @keyframes bajo {from {margin-bottom: 0; opacity: 1;} to {margin-bottom: 50px; opacity: .5;}} .miMJ5 {display: block; font: 10px arial; letter-spacing: 2px; text-align: center; transition: .5s;} .miMJ5:hover {letter-spacing: 10px;} .MJ5 div::-webkit-scrollbar {width: 5px !important; height: 5px !important; background: #0006 !important;} .MJ5 div::-webkit-scrollbar-thumb {background: #0003 !important;}</style>