html
    head
        title Uh, oh! | Flitter
        style(type="text/css").
            @import url(https://fonts.googleapis.com/css?family=Roboto:300);

            .login-page {
                width: 360px;
                padding: 8% 0 0;
                margin: auto;
            }

            .form {
                position: relative;
                z-index: 1;
                background: #FFFFFF;
                max-width: 360px;
                margin: 0 auto 100px;
                padding: 45px;
                text-align: center;
                box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
            }

            .form input {
                font-family: "Roboto", sans-serif;
                outline: 0;
                background: #f2f2f2;
                width: 100%;
                border: 0;
                margin: 0 0 15px;
                padding: 15px;
                box-sizing: border-box;
                font-size: 14px;
                color: #006a81;
            }

            .form button {
                font-family: "Roboto", sans-serif;
                text-transform: uppercase;
                outline: 0;
                background: #006a81;
                width: 100%;
                border: 0;
                padding: 15px;
                color: #FFFFFF;
                font-size: 16px;
                -webkit-transition: background 0.6s;
                -moz-transition: background 0.6s;
                -ms-transition: background 0.6s;
                -o-transition: background 0.6s;
                transition: background 0.6s;
                cursor: pointer;
            }

            .form button:hover, .form button:active, .form button:focus {
                background: #00b3da;
            }

            .form .message {
                margin: 15px 0 0;
                color: #b3b3b3;
                font-size: 12px;
            }

            .form .message a {
                color: #006a81;
                text-decoration: none;
            }

            .container .info h1 {
                margin: 0 0 15px;
                padding: 0;
                font-size: 36px;
                font-weight: 300;
                color: #1a1a1a;
            }

            .container .info span {
                color: #4d4d4d;
                font-size: 12px;
            }

            .container .info span a {
                color: #000000;
                text-decoration: none;
            }

            body {
                background: #c7dbdf;
                font-family: "Roboto", sans-serif;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
            
            .flitter-logo {
                height: 100px;
                margin-bottom: 15px;
            }
            
            .form-title {
                font-family: "Roboto", sans-serif;
                font-size: 16pt;
                color: #006a81;
            }
body
    .login-page
        .form
            img.flitter-logo(src="/assets/flitter.png")
            p.form-title This area is off limits.
            form.login-form(method="GET" action="/" enctype="multipart/form-data")
                button Click to Continue