CSS: .ME8, .ME8 * { box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin; } :root { --fondo-uno: #111; --fondo-dos: #181818; --borde: #262626; --texto: #777; --hover: #ac471d; } .ME8 { min-width: 900px; margin: auto; padding-top: 250px; background-position: center; background-size: cover; border: 1px solid var(--borde); font: 12px Lato; color: var(--texto); } .inME8 { background: var(--fondo-uno); border-top: 1px solid var(--borde); position: relative; min-height: 200px; font-size: 0px; letter-spacing: -5px; } .ttME8 { font: bold 50px/30px Prompt; letter-spacing: 20px; position: absolute; bottom: calc(100% - 1px); width: 100%; text-align: center; color: var(--fondo-uno) !important; text-transform: uppercase; padding: 20px 0 0 20px; -webkit-text-stroke: 1px var(--borde); overflow: hidden; } .linksME8 { padding: 5px; border-bottom: 1px solid var(--borde); display: flex; } .linksME8 a { margin: 5px; flex: 1; text-align: center; background: var(--fondo-dos); padding: 5px 3px 5px 5px; transition: 0.5s; color: var(--texto); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; border: 1px solid var(--borde); } .linksME8 a:hover { flex: 1.5; color: var(--hover); } .moME8 { display: inline-block; vertical-align: middle; letter-spacing: normal; } .moME8.mmst { background: var(--fondo-dos); padding: 20px; border-right: 1px solid var(--borde); width: 270px; } .moME8.mmst > div { display: flex; } .moME8.mmst > div > div { margin: 5px; flex: 1; height: 120px; border: 5px solid; box-shadow: inset 0 0 0 1px var(--borde); position: relative; background-size: cover; background-position: center; overflow: hidden; transition: 0.5s; } .moME8.mmst > div > div:hover { border: 5px solid var(--hover); } .moME8.mmst > div > div > div { position: absolute; background: var(--fondo-uno); width: 100%; height: 100%; display: flex; font-size: 20px; align-items: center; justify-content: center; transition: 0.5s; flex-wrap: wrap; top: 100%; padding: 20px 0; } .moME8.mmst > div > div:hover > div { top: 0%; } .moME8.mmst a { padding: 0 10px; color: var(--texto); transition: 0.3s; transform: scale(0.; } .moME8.mmst a:hover { transform: scale(1); color: var(--hover); } .moME8.mmam { width: 60px; padding: 0 5px; text-align: center; } .moME8.mmam a { display: block; font-size: 20px; margin: 15px 0; transform: scale(0.; transition: 0.3s; color: var(--texto); } .moME8.mmam a:hover { transform: scale(1); color: var(--hover); } .moME8.mmbo { height: 170px; background: var(--fondo-dos); border-left: 1px solid var(--borde); border-right: 1px solid var(--borde); width: calc(100% - 580px); } .moME8.mmbo > div { margin: 30px; font: 12px Lato; height: calc(100% - 60px); overflow: auto; text-align: justify; hyphens: auto; padding-right: 5px; } .moME8.mmwh { padding: 20px; width: 250px; } .moME8.mmwh > div { font: 12px Lato; height: 125px; overflow: auto; text-align: justify; hyphens: auto; } .moME8.mmwh > div span { display: block; margin-bottom: 10px; clear: both; } .moME8.mmwh > div strong { font: 30px/30px Prompt; float: left; margin-right: 5px; color: var(--hover); width: 40px; text-align: center; } .moME8.mmwh > div a { color: var(--hover); } .miME8 { display: block; font: 10px arial; letter-spacing: 2px; text-align: center; transition: 0.5s; } .miME8:hover { letter-spacing: 10px; } .ME8 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0006 !important; } .ME8 div::-webkit-scrollbar-thumb { background: #0003 !important; }