.ascii-wrap { margin-bottom: calc(100vh - 70px); } .ascii-chars { text-align: center; max-width: 1200px; margin: 0 auto; } .ascii-char { display: inline-flex; flex-direction: column; border: 2px solid #4a3650; border-radius: 5px; overflow: hidden; width: 200px; text-align: left; margin: 2px; background-color: #333; cursor: pointer !important; transition: background-color .1s; } .ascii-char:hover, .ascii-char:focus { background-color: #444; } .ascii-char:active { background-color: #222; } .ascii-char-print { white-space: pre; font-family: 'Victor Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 2.5em; text-align: center; padding: 10px; pointer-events: none; } .ascii-char-desc { text-align: center; font-size: 1.2em; padding: 0 5px 5px; pointer-events: none; } .ascii-char-misc { display: flex; justify-content: space-evenly; border-top: 1px solid #4a3650; } .ascii-char-misc-item { flex: 1 1 auto; padding: 2px 5px; transition: background-color .1s; background-color: #444; } .ascii-char-misc-item:not(:last-child) { border-right: 1px solid #4a3650; } .ascii-char-misc-item:hover, .ascii-char-misc-item:focus { background-color: #666; } .ascii-char-misc-item:active { background-color: #555; } .ascii-char-misc-item-head { font-variant: small-caps; } .ascii-char-misc-item-value { font-family: 'Victor Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace; text-align: right; } .ascii-search { padding-top: 10px; position: sticky; top: 0; z-index: 1000; background-image: linear-gradient(180deg, #4a3650 51px, transparent); } .ascii-search-box { border: 1px solid #000; border-radius: 5px; overflow: hidden; max-width: 1200px; margin: 0 auto; } .ascii-search-box input { border-width: 0; background-color: #111; color: #fff; width: 100%; height: 100%; font-size: 2em; padding: 5px; } .ascii-search-hint { font-size: .9em; padding: 0 5px; transition: opacity .2s; max-width: 1200px; margin: 0 auto; }