:root {
    --background-body: #252525;
    --background: #353535;
    --background-hover: #454545;
    --text-main: #f7f7f7;
    --text-bright: #fff;
    --text-muted: silver;
    --button-base: var(--background);
    --button-hover: var(--background-hover);
    --links: #56c7ff;
    --focus: #7aa3fc;
    --table: var(--table-bg-alt);
    --table-bg: var(--background);
    --table-bg-alt: var(--background-body);
    --box-shadow: 0 0 0px 1px hsla(0, 0%, 100%, .15), rgba(0, 0, 0, .24) 0px 3px 8px
}

::backdrop {
    --dialog-backdrop: hsla(0, 0%, 100%, .1)
}

body {
    background-color: var(--background-body);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.8;
    margin: 3rem auto;
    max-width: min(90%, 1100px)
}

a {
    color: var(--links);
    text-decoration: underline;
    transition: .2s
}

a:hover {
    text-decoration: none
}

a:focus-visible {
    outline-color: var(--links)
}

input {
    background-color: var(--background);
    border: 2px solid transparent;
    border-radius: .25rem;
    color: var(--text-main);
    display: block;
    font-size: medium;
    margin-bottom: .5rem;
    padding: .55rem;
    transition-duration: .2s
}

input[type=checkbox],
input[type=radio] {
    cursor: pointer;
    display: inline-block;
    height: .9rem;
    width: .9rem
}

input[type=checkbox]:focus,
input[type=radio]:focus {
    outline: 2px solid var(--focus)
}

input[type=checkbox]:active,
input[type=radio]:active {
    transform: scale(1.1)
}

input:focus {
    border-color: var(--focus);
    outline: none
}

input::-moz-placeholder {
    color: var(--text-muted)
}

input::placeholder {
    color: var(--text-muted)
}

code {
    background-color: var(--background);
    border-radius: .25rem;
    color: var(--text-bright);
    padding: .25rem
}

pre>code {
    display: block;
    overflow-x: auto;
    padding: 10px
}

::-webkit-scrollbar {
    height: 10px;
    width: 10px
}

::-webkit-scrollbar-thumb {
    background-color: var(--text-muted);
    border-radius: 5px
}

::-webkit-scrollbar-thumb:hover {
    background: #777
}

::-webkit-scrollbar-track {
    background: var(--background-body)
}

blockquote {
    border-left: 5px solid var(--focus);
    margin: 1.5em 0;
    padding: 0 1.5rem
}

footer {
    padding-top: 1rem
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
    background-color: var(--button-base);
    border: 2px solid var(--background-hover);
    border-radius: .5rem;
    color: var(--text-bright);
    cursor: pointer;
    font-size: 1em;
    padding: .6rem;
    transition-duration: .2s
}

button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
    background-color: var(--button-hover)
}

button:active,
input[type=button]:active,
input[type=reset]:active,
input[type=submit]:active {
    transform: scale(1.05)
}

button:focus-visible,
input[type=button]:focus-visible,
input[type=reset]:focus-visible,
input[type=submit]:focus-visible {
    border: 2px solid var(--focus);
    outline: none
}

button:disabled,
button:disabled:active,
button:disabled:hover,
input:disabled,
input:disabled:active,
input:disabled:hover {
    background-color: var(--background);
    cursor: not-allowed;
    opacity: .5;
    transform: none
}

dialog {
    background-color: var(--background-body);
    border: 1px solid var(--background-hover);
    border-radius: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .35);
    color: var(--text-main)
}

@keyframes backdrop-appear {
    0% {
        opacity: 0
    }
}

dialog::backdrop {
    animation: backdrop-appear 1s;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background-color: var(--dialog-backdrop)
}

details {
    background-color: var(--background-body);
    border: 1px solid var(--background-hover);
    border-radius: .5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
    overflow: hidden;
    padding: .5rem
}

details>:not(summary) {
    margin-top: 0
}

details>:last-child {
    margin-bottom: 0
}

details[open] summary {
    border-radius: .4rem .4rem 0 0;
    margin-bottom: .2rem
}

details>summary {
    list-style: none
}

details>summary::-webkit-details-marker,
details>summary::marker {
    display: none
}

summary:before {
    border-bottom: 6px solid transparent;
    border-left: 10px solid var(--text-bright);
    border-top: 6px solid transparent;
    content: "";
    display: inline-block;
    height: 0;
    margin-right: 10px;
    position: relative;
    transition: .2s;
    width: 0
}

details[open] summary:before {
    transform: rotate(90deg)
}

summary {
    background-color: var(--background);
    border: 2px solid transparent;
    border-radius: .4rem;
    cursor: pointer;
    margin: -.5rem;
    padding: .2rem 1rem;
    transition-duration: .2s
}

summary:hover {
    background-color: var(--background-hover)
}

summary:focus-visible {
    outline-color: var(--focus)
}

table {
    border-collapse: collapse;
    border-radius: .5rem .5rem 0 0;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    padding: 1rem;
    text-align: left;
    width: 100%
}

thead {
    background-color: var(--table);
    color: #fff
}

tbody tr {
    background-color: var(--table-bg)
}

tbody tr:nth-child(2n) {
    background-color: var(--table-bg-alt)
}

tbody:last-of-type {
    border-bottom: .2rem solid var(--table)
}

td,
th {
    padding: .5rem
}

img,
svg,
video {
    height: auto;
    max-width: 100%
}

select {
    background-color: var(--background);
    border: 2px solid var(--background-hover);
    border-radius: .5rem;
    color: var(--text-main);
    font-family: inherit;
    font-size: inherit;
    outline: none;
    padding: .25rem;
    transition-duration: .2s
}

select:focus {
    border-color: var(--focus)
}

kbd {
    border: 1px solid var(--text-muted);
    border-radius: .25rem;
    box-shadow: 0 2px 8px 0 rgba(99, 99, 99, .2);
    padding: .2rem .4rem
}