Retro OS Style (crono)

<div class="MG3"><div class="ttMG3">Nombre Apellido <i>[Timeline]</i></div><div class="xxMG3"><div class="imgMG3" style="background-image: url(https://i.pinimg.com/564x/48/e0/e5/48e0e50843d8f2ea5ba6f94f28f59aef.jpg);"></div></div><div class="xxMG3"><div class="txtMG3">

<a href="URL" title="Completado"><i>Primer Tema</i>con Nombre<b>✓</b></a>

<a href="URL" title="Abandonado"><i>Segundo Tema</i>con Nombre<b>✗</b></a>

<a href="URL" title="Activo"><i>Tercer Tema</i>con Nombre<b>...</b></a>

<a href="URL" title="Completado"><i>Cuarto Tema</i>con Nombre<b>✓</b></a>

<a href="URL" title="Abandonado"><i>Quinto Tema</i>con Nombre<b>✗</b></a>

<a href="URL" title="Activo"><i>Sexto Tema</i>con Nombre<b>...</b></a>

<a href="URL" title="Completado"><i>Septimo Tema</i>con Nombre<b>✓</b></a>

<a href="URL" title="Abandonado"><i>Octavo Tema</i>con Nombre<b>✗</b></a>

<a href="URL" title="Activo"><i>Noveno Tema</i>con Nombre<b>...</b></a>

</div></div></div><a class="miMG3" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700|VT323&display=swap" rel="stylesheet"><style>.MG3, .MG3 * {box-sizing: border-box; scrollbar-color: #29de21 #0003; scrollbar-width: thin;} .txtMG3 br {display: none;} .MG3, .imgMG3:before {width: 500px; background-color: #0009; background-image: linear-gradient(to bottom, #29de2117 1px, #0000 1px, #0000 6px), linear-gradient(to bottom, #29de2144 1px, #0000 1px, #0000 6px); margin: auto; padding: 20px; font: 12px PT Sans; text-align: center; background-size: 6px 6px, auto 6px; background-repeat: repeat, no-repeat; animation: retro 15s linear infinite; box-shadow: inset 0 0 50px 10px #000; color: #29de21;} @keyframes retro {from {background-position: top center, top;} to {background-position: top center, bottom;}} .ttMG3 {font: 25px VT323; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 3px; text-align: left;} .ttMG3 > i {float: right;} .xxMG3 {position: relative; padding: 15px; background: #00800040; box-shadow: 0 0 15px 5px #00800040;} .xxMG3::before, .xxMG3::after {content: ""; position: absolute; left: 0; right: 0; border: 2px solid; border-bottom: none; height: 15px;} .xxMG3::before {top: 0;} .xxMG3::after {bottom: 0; transform: rotate(180deg);} .xxMG3 ~ .xxMG3 {margin-top: 5px;} .imgMG3 {height: 150px; background-position: center; background-size: cover; position: relative;} .imgMG3::before {content: ""; position: absolute; box-sizing: content-box; background-color: transparent !important; top: 0; width: auto; left: 0; bottom: 0; right: 0; box-shadow: none;} .txtMG3 {margin-bottom: -5px; overflow: auto; max-height: 300px;} .txtMG3 > a {display: block; text-align: left; box-shadow: inset 0 0 30px -15px; margin: 0 0 5px; padding: 10px 60px 8px 10px; position: relative; color: inherit !important;} .txtMG3 > a:hover {box-shadow: inset 0 0 30px -10px;} .txtMG3 i {font: 20px/15px VT323; letter-spacing: 1px; display: block;} .txtMG3 > a b {position: absolute; right: 0; box-shadow: inset 0 0 30px -15px; top: 0; width: 50px; text-align: center; line-height: 48px; font-size: 30px;} .txtMG3 > a:hover b {box-shadow: inset 0 0 30px -5px; -webkit-text-fill-color: #000;} .miMG3 {display: block; font: 10px arial; letter-spacing: 2px; text-align: center; transition: .5s;} .miMG3:hover {letter-spacing: 10px;} .MG3 div::-webkit-scrollbar {width: 5px !important; height: 5px !important; background: #0006 !important;} .MG3 div::-webkit-scrollbar-thumb {background: #29de21 !important;}</style>