body {
    min-height: 100vh;
    height: 100%;

    & .deco-line {
        background-image: linear-gradient(to right, var(--monster-color-gradient-1) 0, var(--monster-color-gradient-2) 50%, var(--monster-color-gradient-3) 100%);
        height: 4px;
    }


}

:root {
    color-scheme: light dark; /* both supported */
}


monster-panel[slot="end"] {

    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    /*padding: 0.6em 0.6em 4rem ;*/
    padding: 0;

    & .to-overview a {
        display: flex;
        align-items: center;
        width: max-content;

        & svg {
            margin-right: 0.5em;
        }

    }

    & code {
        font-size: 0.9em;
    }

    & .example-code {
        border: 1px solid var(--monster-bg-color-primary-3);
        padding: 1em;
        display: block;
        border-radius: 4px;
        background-color: var(--monster-bg-color-primary-1);
    }

    & .option-grid > :nth-child(8n+1),
    & .option-grid > :nth-child(8n+2),
    & .option-grid > :nth-child(8n+3),
    & .option-grid > :nth-child(8n+4) {
        background-color: var(--monster-bg-color-primary-2);
    }

    & .option-grid > div {
        display: flex;
        width: 100%;
        align-self: stretch;
        flex-direction: column;
        align-items: start;
    }

    & .option-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 2fr 5fr;
        grid-gap: 0;
        margin: .5em 0;
        align-items: center;
        justify-items: start;

        & .option-headline {
            font-weight: bold;
            font-size: 1.1em;
        }

        div {
            padding: 0.5em;
        }

    }

    & .method-grid > :nth-child(6n+1),
    & .method-grid > :nth-child(6n+2),
    & .method-grid > :nth-child(6n+3) {
        background-color: var(--monster-bg-color-primary-2);
    }

    & .method-grid > div {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: start;
        align-self: stretch;

        &.method-signature {
            flex-direction: row;

            & .monster-badge-secondary-pill {
                font-size: 0.6em;
            }

        }


        &.method-description {
            display: flow;
        }


    }

    & .method-grid {
        display: grid;
        grid-template-columns: 2fr 2fr 5fr;
        grid-gap: 0;
        margin: .5em 0;
        align-items: center;
        justify-items: start;

        & .method-headline {
            font-weight: bold;
            font-size: 1.1em;

        }

        & div {
            padding: 0.5em;
        }

        & ul + strong {
            padding-top: 1em;
        }


    }


    & .show-it {

        background-color: var(--monster-bg-color-primary-1);
        color: var(--monster-color-primary-1);
        padding: 5em;
        border: 1px solid var(--monster-bg-color-primary-3);
        margin: 1em 0 2em 0;
    }

    & pre {
        margin: 0;
        padding: 0;

        & pre {
            margin: 0;
            padding: 0;

            & code.hljs {
                padding: 1rem;
                margin: 0;
                background-color: var(--monster-bg-color-tertiary-2);
                color: var(--monster-color-tertiary-2);
                font-size: 0.9em;
                font-weight: normal

            }

        }
    }

    & ul {
        margin: 0;
        padding: calc(0.5em + 1px) 0 0 1.2em;
        list-style-type: square;
    }

    & .container {
        padding: 0.6em;
        min-height: 80vh;
    }

    & footer {
        margin: 7em 0 0;
        padding: 1em 1em 2em;
        background-color: var(--monster-bg-color-primary-4);

        & p {
            margin: 0;
            padding: 0;
            font-size: 0.8em;
            color: var(--monster-color-primary-4);

            & a {
                color: var(--monster-color-primary-4);
            }
        }
    }


    & monster-tabs::part(icon) {
        width: 1.1em;
        height: 1.1em;
        margin-top: 4px;
    }

    & .info-grid {

        margin: 0.5em 0 2em 0;
        padding: 0.5em;
        border-radius: 4px;
        background-color: var(--monster-bg-color-primary-2);
        color: var(--monster-color-primary-2);
        overflow: auto;

        display: grid;
        grid-template-columns: max-content 20px 4fr;
        grid-gap: 0.5em;

        & img {
            width: 1em;
            height: auto;
            margin-right: 0.5em;
            vertical-align: middle;
        }

        & div {

            display: flex;

            & pre {
                margin: 0;
                padding: 0;

                & code {

                }

                & code.hljs {
                    padding: 0;
                    margin: 0;
                    background-color: transparent;
                    font-size: 0.9em;
                    font-weight: normal
                }
            }


        }
    }


}


/** prism */


code[class*="language-"],
pre[class*="language-"] {

    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    tab-size: 4;
    hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
    border-radius: 0.3em;
}

/*:not(pre) > code[class*="language-"],*/
pre[class*="language-"] {

    color: var(--monster-color-tertiary-1);
}

/* Inline code */
:not(pre) > code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal;
}


.namespace {
    opacity: .7;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: var(--monster-color-gray-4)
}

.token.punctuation {
    color: var(--monster-color-rose-4);
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
    color: var(--monster-color-pink-5);
}

.token.boolean,
.token.number {
    color: var(--monster-color-orange-5);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: var(--monster-color-green-5);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
    color: var(--monster-color-blue-5);
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
    color: var(--monster-color-yellow-5);
}

.token.keyword {
    color: var(--monster-color-red-5);
}

.token.regex,
.token.important {
    color: var(--monster-color-red-5);
}

@media (prefers-color-scheme: dark) {

    .token.comment,
    .token.prolog,
    .token.doctype,
    .token.cdata {
        color: var(--monster-color-gray-4)
    }

    .token.punctuation {
        color: var(--monster-color-rose-2);
    }

    .token.property,
    .token.tag,
    .token.constant,
    .token.symbol,
    .token.deleted {
        color: var(--monster-color-pink-3);
    }

    .token.boolean,
    .token.number {
        color: var(--monster-color-orange-3);
    }

    .token.selector,
    .token.attr-name,
    .token.string,
    .token.char,
    .token.builtin,
    .token.inserted {
        color: var(--monster-color-green-3);
    }

    .token.operator,
    .token.entity,
    .token.url,
    .language-css .token.string,
    .style .token.string,
    .token.variable {
        color: var(--monster-color-blue-3);
    }

    .token.atrule,
    .token.attr-value,
    .token.function,
    .token.class-name {
        color: var(--monster-color-yellow-2);
    }

    .token.keyword {
        color: var(--monster-color-red-2);
    }

    .token.regex,
    .token.important {
        color: var(--monster-color-red-1);
    }
}


.token.important,
.token.bold {
    font-weight: bold;
}

.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}