/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,
:after,
:before {
    box-sizing: border-box
}

:root {
    -moz-tab-size: 4;
    tab-size: 4
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji
}

strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

::-moz-focus-inner {
    border-style: none;
    padding: 0
}

:-moz-focusring {
    outline: 1px dotted ButtonText
}

:-moz-ui-invalid {
    box-shadow: none
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

:disabled {
    cursor: not-allowed
}

:root {
    --max-body-width: 48rem
}

html {
    height: 100%;
    line-height: 1.4
}

h1 {
    line-height: 1.15
}

body {
    display: flex;
    flex-direction: column;
    width: calc(100% - 1rem);
    max-width: var(--max-body-width);
    min-height: 100%;
    margin: 0 auto;
    overflow-wrap: break-word
}

main {
    flex-grow: 1
}

footer {
    margin-top: 1rem
}

body>footer {
    text-align: center
}

body>footer {
    padding-bottom: 1rem
}

@media (hover:hover) {
    body {
        overflow-x: hidden
    }
}

@media not all and (hover:hover) {}

:root {
    color-scheme: light dark;
    --border-color: #dbdbdb;
    --border-hover-color: #b5b5b5;
    --background-color: #fff;
    --highlighted-background-color: #f5f5f5;
    --text-color: #363636;
    --danger-color: #f14668;
    --danger-text-color: #fff;
    --danger-hover-color: #f03a5f;
    --success-color: #48c774;
    --success-text-color: #fff;
    --success-hover-color: #3ec46d;
    --danger-text-background-color: #fde0e6;
    --success-text-background-color: #effaf3;
    --border-radius: 0.25rem;
    --border-width: 1px;
    --code-text-color: #f14668;
    --code-background-color: #f5f5f5;
    --link-color: #3273dc;
    --link-visited-color: #b86bff;
    --link-hover-color: #363636;
    --link-active-color: #363636
}

@media (prefers-color-scheme:dark) {
    :root {
        --border-color: #5f6267;
        --border-hover-color: #bcbebd;
        --background-color: #202124;
        --highlighted-background-color: #292b2e;
        --text-color: #fff;
        --danger-color: #770018;
        --danger-text-color: #fff;
        --danger-hover-color: #6b0015;
        --success-color: #006624;
        --success-text-color: #fff;
        --success-hover-color: #006122;
        --danger-text-background-color: #770018;
        --success-text-background-color: #006624;
        --code-text-color: #f1a0b0;
        --code-background-color: #292b2e;
        --link-color: #90b3ed;
        --link-visited-color: #cb93ff;
        --link-hover-color: #fff;
        --link-active-color: #fff
    }
}

body {
    color: var(--text-color);
    background-color: var(--background-color)
}

body>footer {
    padding-top: 1rem;
    border-top: var(--border-width) solid var(--border-color)
}

:disabled {
    opacity: .5
}

:invalid:not(form) {
    border: var(--border-width) solid var(--danger-color)
}

:disabled :disabled {
    opacity: unset
}

:invalid:not([type=checkbox]):focus {
    border-color: var(--danger-hover-color);
    outline: none;
    box-shadow: 0 0 .2rem .05rem var(--danger-hover-color)
}

:invalid:not([type=checkbox]):not(:focus) {
    box-shadow: none
}

:invalid:not(form):enabled:hover {
    border-color: var(--danger-hover-color)
}

:root {
    --max-body-width: 64rem
}

.social-links {
    display: flex;
    list-style: none;
    padding: 0;
    margin-top: 2rem;
    gap: 1rem;
    justify-content: center;
}

.social-links li {
    display: inline-block;
}