html
    head
        title Flitter
        style(type="text/css").
            @import url('https://fonts.googleapis.com/css?family=Rajdhani');
            html,
            body {
                height: 100%;
                overflow-y: hidden;
                background-color: #c7dbdf;
            }

            .flitter-container {
                height: 60%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .flitter-image {
                height: 150px;
            }

            .flitter-name {
                font-family: "Rajdhani";
                font-size: 50pt;
                margin-left: 35px;
                color: #00323d;
                text-decoration: none;
            }

            .flitter-text {
                font-family: "Rajdhani";
                font-size: 24pt;
                color: #00323d;
            }
body
        .flitter-container
            img.flitter-image(src="/assets/flitter.png")
            a.flitter-name(href="https://flitter.garrettmills.dev/" target="_blank") powered by flitter
        if user
            .flitter-container
                p.flitter-text Welcome, #{user.uid}! <a href="/auth/logout">Log out.</a>
        else
            .flitter-container
                p.flitter-text New to Flitter? <a href="https://flitter.garrettmills.dev/" target="_blank">Start here.</a>