* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; margin:0; overflow:hidden; justify-content: center; align-items: center; min-height: 100vh; background: #f0f0f0; } h1,h2,h3,h4,h5,h6,p { margin-bottom: 8px; } h1,h2,h3 { hyphens: auto; } h1 { font-size: 24px; } h2 { font-size: 24px; } h3 { font-size: 22px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 16px; } p { font-size: 16px; } ul { list-style: none; font-size: 16px; } hr { margin: 6px 0; } .cell-info { position: absolute; top: 0; left: 0; width: 45%; height: 100%; padding: 54px 16px 16px 16px; overflow-x: hidden; overflow-y: scroll; background-color: #cccccc; transform: translate(-40%, -100%); transition: transform 0.2s ease-in-out; opacity: 0.9; } .cell-info.shown { transform: translate(0%, 0%); } .cell-info a.closer { display: block; position: absolute; right: 12px; top: 12px; cursor: pointer; width: 24px; height: 24px; } .cell-info a.center { display: block; position: absolute; right: 36px; top: 12px; cursor: pointer; width: 24px; height: 24px; } .cell-info .az-row { display: flex; justify-content: space-between; align-items: center; } .cell-info .az-row h3 { margin-bottom: 0; } .cell-info .az-row .icons { display: flex; gap: 8px; } .cell-info .az-row a { position: static; right: auto; top: auto; cursor: pointer; width: 24px; height: 24px; } .cell-info ul.social { display: block; position: absolute; left: 12px; top: 12px; margin: 0; padding: 0; display: flex; justify-content: flex-end; gap: 8px; } .cell-info ul.social li { width: 24px; height: 24px; } p a, .cell-info a { color: black; } .cell-info img { max-width: 100%; } @media screen and (min-width: 1024px) { h1 { font-size: 32px; } h2 { font-size: 28px; } h3 { font-size: 26px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 18px; } p { font-size: 16px; } }