@import "colors.css";
@import url('hljs/github-dark-dimmed.min.css') screen and (prefers-color-scheme: dark);
@import url('hljs/github-dimmed.min.css') screen and (prefers-color-scheme: light);

:root {
    --width: calc(100vw - clamp(40px, 100vw - (500px + 50vw), 33vw));
}

body {
    display: flex;
    flex-flow: column nowrap;
    align-content: center;
    align-items: center;
    background-color: var(--bg-shade-1);
    font-family: Consolas, sans-serif;
    margin: 0;
    color: var(--text-color);
    gap: 10px;
    margin-bottom: 10px;

    >* {
        width: var(--width);
    }
}

.header {
    width: 100%;
    background-color: var(--theme-shade-1);
    color: var(--text-color-white);

    .container {
        padding-left: 20px;
        /* Space before the first item */
        padding-right: 20px;
        /* Space after the last item */
        display: flex;
        flex-flow: row wrap;
        align-content: stretch;
        align-items: center;
        gap: 20px;
        font-size: large;
        justify-content: start;

        .buttons {
            display: flex;
            flex-flow: row wrap;
            align-content: stretch;
            align-items: center;
            gap: 20px;
            justify-content: center;
            flex-grow: 1;

        }

        h1 {
            flex-grow: 10000;
            text-align: left;
            font-size: xx-large;
            user-select: none;
        }

        a:link {
            text-decoration: none;
            color: inherit;
        }

        a:visited {
            text-decoration: none;
            color: inherit;
        }

        a:hover {
            text-decoration: underline;
        }

        a:active {
            text-decoration: underline;
        }
    }
}

.center-text {
    max-width: 700px;
    text-align: center;
}

hr {
    margin: 0;
    border-left: 0;
    border-right: 0;
}

.showcase {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    gap: 2vw;

    &.reverse {
        flex-wrap: wrap-reverse;
    }

    >* {
        flex: 1 1 45%;
    }

    pre {
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: var(--width);

        code {
            border-radius: 8px;
            max-width: var(--width);
        }
    }

    p {
        em {
            background-color: var(--theme-shade-2);
            border-radius: 4px;
            padding-inline: 0.5em;
            white-space: nowrap;
        }
    }
}