*
{
    /* apply defaults */
    margin: 0;
    padding: 0;

    /* allow draw */
    font-family: monospace;

    /* adaptive */
    color-scheme: light dark;

    /* vars */
    --container-max-width: 768px;
    --color-warning: #ee784e;
    --color-error: #ff6363;
    --color-default: #999;
}

*::placeholder
{
    font-size: 12px;
}

a, a:active, a:visited
{
    text-decoration: none;
}

a:hover
{
    text-decoration: underline;
}

body
{
    font-size: 12px;
    padding: 0 16px;
}

header
{
    max-width: var(--container-max-width);
    margin: 16px auto;
    display: block;
}

header > strong
{
    font-size: 14px;
}

header > div
{
    margin: 12px 0;
}

header > div > code
{
    color: var(--color-error);
    font-weight: bold;
}

header > div > sub > svg
{
    fill: var(--color-error);
}

main
{
    display: block;
    margin: 16px auto 0 auto;
    max-width: var(--container-max-width);
    padding-bottom: 164px;
}

main > h2
{
    display: inline-block;
    font-size: 12px;
    margin: 16px 0;
}

main > form > input[type="text"]
{
    box-sizing: border-box;
    padding: 4px;
    width: 100%;
}

main ul
{
    list-style: none;
}

main ul ul
{
    margin-left: 24px;
}

main ul li
{
    border-top: 1px var(--color-default) solid;
    word-wrap: break-word;
}

main ul li div
{
    padding: 16px 0;
}

main ul li p
{
    padding: 8px 0;
}

main ul li p > br /* tmp solution for current twig filters implementation */
{
    display: block;
    margin: 4px 0;
}

main ul li span > svg
{
    cursor: default;
    fill: var(--color-default);
    float: right;
}

main a > svg
{
    fill: var(--color-warning);
}

footer
{
    /*backdrop-filter: blur(100px);*/
    background-color: Canvas;
    bottom: 0;
    display: block;
    left: 0;
    position: fixed;
    right: 0;
    z-index:2;
}

footer > form
{
    bottom: 16px;
    display: block;
    margin: 16px auto;
    max-width: var(--container-max-width);
    overflow: hidden;
    padding: 4px;
    width: 100%;
}

footer > form > input[type="text"],
footer > form > textarea
{
    box-sizing: border-box;
    display: block;
    margin-bottom: 10px;
    max-width: var(--container-max-width);
    padding: 4px;
    width: 100%;
}

footer > form > textarea:focus
{
    min-height: 100px;
}

footer > form > button
{
    cursor: pointer;
    float: right;
    padding: 2px 8px;
}

footer > form > output
{
    color: var(--color-error);
    display: block;
    font-weight: bolder;
    margin-bottom: 16px;
}