html
    head
        title Welcome | #{_app.name}
        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", sans-serif;
                font-size: 50pt;
                margin-left: 35px;
                color: #00323d;
                text-decoration: none;
            }

            .flitter-text {
                font-family: "Rajdhani", sans-serif;
                font-size: 24pt;
                color: #00323d;
            }
    body
        .flitter-container
            img.flitter-image(src="/assets/logo/3x/logo3x.png")
            div
                a.flitter-name(href="/login" target="_blank") #{_app.name}
                p.flitter-text(style="margin-left: 38px;") #{_app.name} is your personal information tree
        if user
            .flitter-container
                p.flitter-text Welcome, #{user.uid}! <a href="/auth/logout">Log out.</a>
        else
            .flitter-container
                p.flitter-text <a href="/auth/login">Get started here.</a>