Midnight - Post de Rol

<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Courgette&family=Poppins&display=swap" rel="stylesheet"><link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"><div class="ylcont"><div class="ylcont1"><div class="ytitle"><div class="ytitle0"></div><div class="yltitle1">TITULO</div></div><div class="yicon"><span class="sf sf-constellation"></span></div><div class="yltxt">TEXTO AQUI </div></div></div><div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div>
<style>.ylcont{--ycolor1:#FFF; --ycolor2:#C02942; --ycolor3: #9D2053; --ycolor4: #7A1E48; --ycolor5: #838282;}.ylcont{width: 330px;min-height:400px; height: auto; background: var(--ycolor1);display: flex; align-items: center; justify-content: center; position: relative; margin: 10px auto;}.ylcont::before, .ylcont::after{display: block; content: ''; position: absolute; width: 330px;min-height:400px; height: auto; background: var(--ycolor2); z-index: -1; animation: 2s clockwise infinite;}.ylcont:after{background: var(--ycolor3); animation: 2s counterclockwise infinite;}.ylcont1{width: 290px;height:380px;display: flex;flex-direction: column;justify-content: center;align-items: center;}.ytitle{max-width: 300px; display:flex; justify-content: center; align-items: center;}.ytitle0{width: 270px; height: 2px; background: var(--ycolor2); position: absolute;}.yltitle1{background: var(--ycolor1);font-size: 30px;font-family:'Courgette';font-style: italic;color: var(--ycolor3);z-index: 1;}.yicon{position: absolute; font-size: 280px;margin-top: 90px; background: var(--ycolor2); background: linear-gradient(90deg, var(--ycolor2) 0%, var(--ycolor4) 99%); -webkit-background-clip: text; color: transparent; opacity: 0.2;}.yltxt{width: 240px;height: 280px;overflow: auto;font-family:'Poppins';font-size: 11px;text-align: justify;color: var(--ycolor5);padding: 6px 20px;z-index: 1;}@keyframes clockwise{0%{top: -5px; left: 0;}12%{top: -2px; left: 2px;}25%{top: 0; left: 5px;}37%{top: 2px; left: 2px;}50%{top: 5px; left: 0;}62%{top: 2px; left: -2px;}75%{top: 0; left: -5px;}87%{top: -2px; left: -2px;}100%{top: -5px; left: 0;}}@keyframes counterclockwise{0%{top: -5px;right: 0;}12%{top: -2px;right: 2px;}25%{top: 0;right: 5px;}37%{top: 2px;right: 2px;}50%{top: 5px;right: 0;}62%{top: 2px;right: -2px;}75%{top: 0;right: -5px;}87%{top: -2px;right: -2px;}100%{top: -5px; right: 0;}}#myscr{font-family: 'Century Gothic'; font-size: 11px; text-align: center; color: #333 ; margin: 0 auto; margin-top: 8px;}#myscr a{color: #333;text-decoration: none;}.yltxt::-webkit-scrollbar{width:4px; height: auto; background-color: var(--ycolor1);}.yltxt::-webkit-scrollbar-thumb:vertical{width: 4px; height:10px; background-color: var(--ycolor3);}.yltxt::-moz-scrollbar{width:4px; height: auto; background-color: var(--ycolor1);}.yltxt::-moz-scrollbar-thumb:vertical{width: 4px; height:10px; background-color: var(--ycolor3);}</style>