/* * This is (basically) water.css. * * repo: https://github.com/kognise/water.css * * The license: * * The MIT License (MIT) * * Copyright © 2019 Kognise * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the “Software”), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ :root { --background-body:#4a4a55; --background:#383844; --background-alt:#242438; --selection:#23bf7c; --text-main:#dfdfef; --text-bright:#f7f7ff; --text-muted:#878797; --links:#28db8f; --focus:#299465df; --border:#676773; --code:var(--text-main); --animation-duration:0.1s; --button-base:#299465; --button-hover:#23bf7c; --scrollbar-thumb:var(--button-hover); --scrollbar-thumb-hover:#000; --form-placeholder:#a9a9a9; --form-text:#fff; --variable:#d941e2; --highlight:#efdb43; --select-arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23efefef'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E") } html { scrollbar-color:#040a0f #202b38; scrollbar-color:var(--scrollbar-thumb) var(--background-body); scrollbar-width:thin } body { font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Segoe UI Emoji,Apple Color Emoji,Noto Color Emoji,sans-serif; line-height:1.4; max-width:800px; margin:20px auto; padding:0 10px; word-wrap:break-word; color:#dbdbdb; color:var(--text-main); background:#202b38; background:var(--background-body); text-rendering:optimizeLegibility } button, input, textarea { transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease; transition:background-color var(--animation-duration) linear,border-color var(--animation-duration) linear,color var(--animation-duration) linear,box-shadow var(--animation-duration) linear,transform var(--animation-duration) ease } h1 { font-size:2.2em; margin-top:0 } h1, h2, h3, h4, h5, h6 { margin-bottom:12px; margin-top:24px } h1, h2, h3, h4, h5, h6, strong { color:#fff; color:var(--text-bright) } b, h1, h2, h3, h4, h5, h6, strong, th { font-weight:600 } q:after, q:before { content:none } blockquote, q { border-left:4px solid rgba(0,150,191,.67); border-left:4px solid var(--focus); margin:1.5em 0; padding:.5em 1em; font-style:italic } blockquote>footer { font-style:normal; border:0 } address, blockquote cite { font-style:normal } a[href^=mailto\:]:before { content:"📧 " } a[href^=tel\:]:before { content:"📞 " } a[href^=sms\:]:before { content:"💬 " } mark { background-color:#efdb43; background-color:var(--highlight); border-radius:2px; padding:0 2px; color:#000 } a>code, a>strong { color:inherit } button, input[type=button], input[type=checkbox], input[type=radio], input[type=range], input[type=reset], input[type=submit], select { cursor:pointer } input, select { display:block } [type=checkbox], [type=radio] { display:initial } button, input, select, textarea { color:#fff; color:var(--form-text); background-color:#161f27; background-color:var(--background); font-family:inherit; font-size:inherit; margin-right:6px; margin-bottom:6px; padding:10px; border:none; border-radius:6px; outline:none } button, input[type=button], input[type=reset], input[type=submit] { background-color:#0c151c; background-color:var(--button-base); padding-right:30px; padding-left:30px } button:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover { background:#040a0f; background:var(--button-hover) } input[type=color] { min-height:2rem; padding:8px; cursor:pointer } input[type=checkbox], input[type=radio] { height:1em; width:1em } input[type=radio] { border-radius:100% } input { vertical-align:top } label { vertical-align:middle; margin-bottom:4px; display:inline-block } button, input:not([type=checkbox]):not([type=radio]), input[type=range], select, textarea { -webkit-appearance:none } textarea { display:block; margin-right:0; box-sizing:border-box; resize:vertical } textarea:not([cols]) { width:100% } textarea:not([rows]) { min-height:40px; height:140px } select { background:#161f27 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23efefef'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E") calc(100% - 12px) 50%/12px no-repeat; background:var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat; padding-right:35px } select::-ms-expand { display:none } select[multiple] { padding-right:10px; background-image:none; overflow-y:auto } button:focus, input:focus, select:focus, textarea:focus { box-shadow:0 0 0 2px rgba(0,150,191,.67); box-shadow:0 0 0 2px var(--focus) } button:active, input[type=button]:active, input[type=checkbox]:active, input[type=radio]:active, input[type=range]:active, input[type=reset]:active, input[type=submit]:active { transform:translateY(2px) } button:disabled, input:disabled, select:disabled, textarea:disabled { cursor:not-allowed; opacity:.5 } ::-moz-placeholder { color:#a9a9a9; color:var(--form-placeholder) } :-ms-input-placeholder { color:#a9a9a9; color:var(--form-placeholder) } ::-ms-input-placeholder { color:#a9a9a9; color:var(--form-placeholder) } ::placeholder { color:#a9a9a9; color:var(--form-placeholder) } fieldset { border:1px solid rgba(0,150,191,.67); border:1px solid var(--focus); border-radius:6px; margin:0 0 12px; padding:10px } legend { font-size:.9em; font-weight:600 } input[type=range] { margin:10px 0; padding:10px 0; background:transparent } input[type=range]:focus { outline:none } input[type=range]::-webkit-slider-runnable-track { width:100%; height:9.5px; -webkit-transition:.2s; transition:.2s; background:#161f27; background:var(--background); border-radius:3px } input[type=range]::-webkit-slider-thumb { box-shadow:0 1px 1px #000,0 0 1px #0d0d0d; height:20px; width:20px; border-radius:50%; background:#526980; background:var(--border); -webkit-appearance:none; margin-top:-7px } input[type=range]:focus::-webkit-slider-runnable-track { background:#161f27; background:var(--background) } input[type=range]::-moz-range-track { width:100%; height:9.5px; -moz-transition:.2s; transition:.2s; background:#161f27; background:var(--background); border-radius:3px } input[type=range]::-moz-range-thumb { box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d; height:20px; width:20px; border-radius:50%; background:#526980; background:var(--border) } input[type=range]::-ms-track { width:100%; height:9.5px; background:transparent; border-color:transparent; border-width:16px 0; color:transparent } input[type=range]::-ms-fill-lower, input[type=range]::-ms-fill-upper { background:#161f27; background:var(--background); border:.2px solid #010101; border-radius:3px; box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d } input[type=range]::-ms-thumb { box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d; border:1px solid #000; height:20px; width:20px; border-radius:50%; background:#526980; background:var(--border) } input[type=range]:focus::-ms-fill-lower, input[type=range]:focus::-ms-fill-upper { background:#161f27; background:var(--background) } a { text-decoration:none; color:#41adff; color:var(--links) } a:hover { text-decoration:underline } code, samp, time { background:#161f27; background:var(--background); color:#ffbe85; color:var(--code); padding:2.5px 5px; border-radius:6px; font-size:1em } pre>code { padding:10px; display:block; overflow-x:auto } var { color:#d941e2; color:var(--variable); font-style:normal; font-family:monospace } kbd { background:#161f27; background:var(--background); border:1px solid #526980; border:1px solid var(--border); border-radius:2px; color:#dbdbdb; color:var(--text-main); padding:2px 4px } img, video { max-width:100%; height:auto } hr { border:none; border-top:1px solid #526980; border-top:1px solid var(--border) } table { border-collapse:collapse; margin-bottom:10px; width:100%; table-layout:fixed } table caption, td, th { text-align:left } td, th { padding:6px; vertical-align:top; word-wrap:break-word } thead { border-bottom:1px solid #526980; border-bottom:1px solid var(--border) } tfoot { border-top:1px solid #526980; border-top:1px solid var(--border) } tbody tr:nth-child(2n) { background-color:#161f27; background-color:var(--background) } tbody tr:nth-child(2n) button { background-color:#1a242f; background-color:var(--background-alt) } tbody tr:nth-child(2n) button:hover { background-color:#202b38; background-color:var(--background-body) } ::-webkit-scrollbar { height:10px; width:10px } ::-webkit-scrollbar-track { background:#161f27; background:var(--background); border-radius:6px } ::-webkit-scrollbar-thumb { background:#040a0f; background:var(--scrollbar-thumb); border-radius:6px } ::-webkit-scrollbar-thumb:hover { background:#000; background:var(--scrollbar-thumb-hover) } ::-moz-selection { background-color:#1c76c5; background-color:var(--selection); color:#fff; color:var(--text-bright) } ::selection { background-color:#1c76c5; background-color:var(--selection); color:#fff; color:var(--text-bright) } details { display:flex; flex-direction:column; align-items:flex-start; background-color:#1a242f; background-color:var(--background-alt); padding:10px 10px 0; margin:1em 0; border-radius:6px; overflow:hidden } details[open] { padding:10px } details>:last-child { margin-bottom:0 } details[open] summary { margin-bottom:10px } summary { display:list-item; background-color:#161f27; background-color:var(--background); padding:10px; margin:-10px -10px 0; cursor:pointer; outline:none } summary:focus, summary:hover { text-decoration:underline } details>:not(summary) { margin-top:0 } summary::-webkit-details-marker { color:#dbdbdb; color:var(--text-main) } dialog { background-color:#1a242f; background-color:var(--background-alt); color:#dbdbdb; color:var(--text-main); border-radius:6px; border:#526980; border-color:var(--border); padding:10px 30px } dialog>header:first-child { background-color:#161f27; background-color:var(--background); border-radius:6px 6px 0 0; margin:-10px -30px 10px; padding:10px; text-align:center } dialog::-webkit-backdrop { background:rgba(0,0,0,.61); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) } dialog::backdrop { background:rgba(0,0,0,.61); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) } footer { border-top:1px solid #526980; border-top:1px solid var(--border); padding-top:10px; color:#a9b1ba; color:var(--text-muted) } body>footer { margin-top:40px } @media print { body, button, code, details, input, pre, summary, textarea { background-color:#fff } button, input, textarea { border:1px solid #000 } body, button, code, footer, h1, h2, h3, h4, h5, h6, input, pre, strong, summary, textarea { color:#000 } summary::marker { color:#000 } summary::-webkit-details-marker { color:#000 } tbody tr:nth-child(2n) { background-color:#f2f2f2 } a { color:#00f; text-decoration:underline } }