doctype html
html(lang="en-gb")
    head
        meta(content="text/html;charset=utf-8" http-equiv="Content-Type")
        title mixsy
        style.
            :root {
                --bg: #ed9f96;
                --alt: #dc4c6b;
                --inverse: #444;
                --text: #7be5b3;
            }

            * {
                box-sizing: border-box;
                color: var(--text);
                font-family: sans-serif;
            }

            html, body {
                background-color: var(--bg);
                margin: 0;
                padding: 0;
            }

            button {
                background-color: var(--text);
                border: 0;
                border-radius: 2.5vmin;
                color: var(--alt);
                cursor: pointer;
                display: block;
                font-size: 5vmin;
            }

            h1, p {
                margin: 0;
                text-align: center;
            }

            h1 {
                font-size: 10vmin;
            }

            h2 {
                font-size: 5vmin;
                margin: 0;
                text-align: center;
            }

            textarea {
                background-color: var(--inverse);
                border: 0;
                color: var(--text);
                font-family: monospace;
                height: 17vmin;
                width: 100%;
            }

            #container {
                background-color: var(--alt);
                border-radius: 5vmin;
                height: 100vmin;
                width: 100vmin;
            }

            .centre {
                margin: 0 auto;
            }

            .left {
                float: left;
            }

            .row {
                width: 100%;
                height: calc(82vmin / 3);
            }

            .square {
                width: 50vmin;
                height: 100%;
                padding: 0.5em;
            }
    body
        #container.centre
            h1 mixsy
            p combine #[a(href="https://ledoux.itch.io/bitsy") bitsy] games
            .row.top
                #main.square.left
                    h2 main
                    textarea#a(placeholder="Paste your main game data here...")
                #additional.square.left
                    h2 additional
                    textarea#b(placeholder="Paste additional game data here...")
            .row.middle
                // todo have some kind of arrow here
                button#merge.centre mix!
            .row.bottom
                .square.centre
                    h2 output
                    textarea#c
        //- Note the usage of `type=module` here as this is an ES6 module -->
        script(type="module")
            include index.js