The Future is Now - Post de Rol

<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Roboto+Mono&display=swap" rel="stylesheet"><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><div class="futcont1"> <div id="futimg"><div id="futimg1"><div id="futimg2"></div></div></div><div id="futcont1"> <div id="futil">TITULO AQUI</div><div id="futxt">TEXTO AQUI</div></div><div class="futdat"> <div id="fda1"><span class="th th-satellite-dish"></span> FECHA</div><div id="fda1"><span class="th th-satellite-dish"></span> LUGAR</div><div id="fda1"><span class="th th-satellite-dish"></span> CON QUIEN</div><div id="fda1"><span class="th th-satellite-dish"></span> DATO EXTRA</div></div></div><div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div><style>.futcont1{--color1: #111; --color2: #FFF; --color3: rgb(6,11,17,0.9);--color4: #3E545F; --imgfut:url('IMAGEN AQUI');}.futcont1{width: 520px; height: 300px; background: var(--color3); border: 2px solid var(--color1); border-radius: 10px; background-image: url("https://www.transparenttextures.com/patterns/black-thread.png"); display: flex; align-items: center; justify-content: space-around; margin: 0 auto;}#futimg{width: 100px; height: 100px; border-radius: 100px; border: 10px solid; animation: futpard 1.5s ease-out infinite; display: flex; align-content: center; align-items: center; justify-content: center; justify-items: center;}#futimg1{width: 90px; height: 90px; border-radius: 90px; border: 5px solid; position: absolute; animation: futpard1 1.5s ease-in infinite;}#futimg2{width: 80px; height: 80px; border-radius: 80px; border: 5px solid var(--color3); background:var(--imgfut) center; background-size: cover; position: absolute;}#futcont1{width: 220px; height: 280px; display: flex; flex-direction: column; justify-content: space-around;}#futil{font: 20px 'Audiowide'; color: var(--color2); text-shadow: 2px 3px var(--color3); text-align: center;}#futxt{width: 210px; height: 190px;font: 12px 'Roboto Mono'; text-align: justify; overflow: auto; color: var(--color2); padding: 5px;}.futdat{width: 150px; height: 200px; display: flex; flex-direction: column; justify-content: space-around; align-items: center;}#fda1 .th{color: var(--color4);}#fda1{width: 130px; font: 11px 'Roboto Mono'; color: #FFF; border-bottom: 1px solid var(--color4);}#myscr{font-family: 'Century Gothic'; font-size: 11px; text-align: center; margin: 0px auto;}#myscr a{color: #000;text-decoration: none;}@keyframes futpard{0%{border-color: rgba(234,215,215,0.5)}50%{border-color: rgba(234,215,215,0)}100%{border-color: rgba(234,215,215,0.1)}}@keyframes futpard1{0%{border-color: rgba(234,215,215,0.5)}50%{border-color: rgba(234,215,215,0)}100%{border-color: rgba(234,215,215,0.5)}}::-webkit-scrollbar{width: 5px;height: 5px;}::-webkit-scrollbar-button{width: 0px; height: 0px;}::-webkit-scrollbar-thumb{background: var(--color2);}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-corner{background: transparent;}</style>