<!DOCTYPE html>
<html>

<head>
    <title>Junk rare cube</title>
    <style>
        body {
            background: #eee;
        }

        main {
            background: white;
            max-width: 920px;
            margin: 0 auto;
            padding: 20pt;
        }

        h1,
        h2,
        h3 {
            margin: 0;
            padding: 0;
        }

        h2 {
            font-weight: normal;
        }

        .columns {
            padding: 20pt 0;
            display: flex;
        }

        .color-section {
            flex: 1;
        }

        .color-section header {
            text-align: center;
        }

        .color-W header {
            background-color: #fff6eb;
        }

        .color-U header {
            background-color: #49b0fd;
        }

        .color-B header {
            background-color: #666;
            color: white;
        }

        .color-R header {
            background-color: #ff6868;
        }

        .color-G header {
            background-color: #78ce59;
        }

        .color-MC header {
            background: linear-gradient(to left, #f3ff6b, #ffb019);
        }

        .color-CL header {
            background-color: #d2d2d2;
        }
    </style>
</head>

<body>
    <main>
        <header>
            <h1>Junk rare cube</h1>
            <h2>Using cards from <a href="https://www.cardmarket.com/en/Magic/Users/<%=user%>"><b><%= user %></b></a>
            </h2>
        </header>
        <section class="columns">
            <% for (const column in columns) { %>
            <section class="color-section color-<%=column%>">
                <header>
                    <h3><%=utils.colorNames[column]%></h3>
                </header>
            </section>
            <% } %>
        </section>
    </main>
</body>

</html>