* { margin: 0; padding: 0; box-sizing: border-box; position: relative; outline-style: none; scrollbar-color: #4a3650 #111; } html, body { width: 100%; height: 100%; } body { font-family: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; background-color: #111; color: #fff; padding: 1px; } .container { max-width: 1020px; margin: 0 auto; } .header { display: flex; justify-content: space-between; margin: 10px; } .title { font-size: 20px; line-height: 25px; } .nav { display: flex; font-size: 16px; line-height: 25px; } .nav a { color: #ccc; text-decoration: none; padding: 2px 5px; transition: color .2s, text-shadow .2s; } .nav a:hover, .nav a:focus { color: #fff; text-shadow: 0 0 10px #fcfcfc; } .nav a:active { color: #ddd; text-shadow: 0 0 6px #fcfcfc; } .lookup-form { display: flex; border-radius: 5px; margin: 10px; overflow: hidden; box-shadow: 0 1px 5px #222; transition: opacity .2s; } .locked .lookup-form { opacity: .5; } .lookup-form-input { display: block; flex: 1 1 auto; padding: 10px; background-color: #212121; background-image: linear-gradient(0deg, #262626, #202020); border-width: 0; color: #fff; font-family: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif; } .lookup-form-submit { flex: 0 0 auto; background-color: #333333; background-image: linear-gradient(0deg, transparent, #404040); color: #fff; border-width: 0; padding: 10px; cursor: pointer; border-radius: 0; transition: background-color .2s; } .lookup-form-submit:focus, .lookup-form-submit:hover { background-color: #3F3F3F; } .lookup-form-submit:active { background-color: #393939; } .result { margin: 10px; padding: 6px 10px; white-space: pre-wrap; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 14px; transition: opacity .2s; background-color: #202020; border-radius: 5px; box-shadow: 0 1px 5px #222; overflow: auto; } .locked .result { opacity: .5; } .copy { font-size: 11px; line-height: 16px; text-align: center; margin: 10px; } .copy a { color: inherit; text-decoration: none; } .copy a:hover, .copy a:focus { text-decoration: underline; }