* {
    border: none;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

body {
    background-color: #05336f;
    height: 100vh;
}

main {
    height: 100vh;
    margin: auto;
    max-width: 935px;
}

a { text-decoration: none; }
h1 { margin: 20px 0; }
ul { list-style: none; }

/**
 * Flex rules
 */

    .flex {
        display: flex;
    }

    .direction-column {
        flex-direction: column;
    }

    .justify-content-center {
        justify-content: center;
    }

    .align-items-center {
        align-items: center;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .panel {
        background-color: white;
        border: 1px solid #dbdbdb;
        margin-bottom: 10px;
        padding: 10px;
    }

    #auth { max-width: 350px; }

    #mobile img {
        height: 618px;
    }

    /**
     * Login section
     */
    .login-with-fb,
    form { width: 100%; }

    .register,
    form { padding: 30px 20px; }

    .login-with-fb { padding: 30px 20px 20px 20px; }

    form .sr-only { display: none; }

    form input {
        background-color: #fafafa;
        border: 1px solid #dbdbdb;
        border-radius: 3px;
        color: #808080;
        margin-bottom: 8px;
        padding: 10px 10px;
        width: 100%;
    }

    form input::placeholder {
        color: #808080;
    }

    form input:focus {
        border: 1px solid #808080;
        outline: none;
    }

    form button {
        background-color: #0095f6;
        border-radius: 5px;
        color: #fff;
        font-weight: bold;
        height: 35px;
        margin-top: 10px;
        width: 100%;
    }

    /**
     * Separator login form from login with fb
     */
    .separator span {
        background-color: #dbdbdb;
        height: 1px;
        width: calc(100% - 10px);
    }

    .separator .or {
        color: #808080;
        font-weight: bold;
    }

    .separator { padding: 0 20px; }
    .separator span:first-child { margin-right: 10px;}
    .separator span:last-child { margin-left: 10px;}

    /**
     * Login with fb section
     */
    .login-with-fb a {
        color: #385185;
    }

    .login-with-fb > a { font-size: 12px; }
    .login-with-fb div a { font-weight: bold; }
    .login-with-fb div { margin-bottom: 15px; }

    /**
     * Register section
     */
    .register * { font-size: 14px; }
    .register a {
        color: #0095f6;
        font-weight: bold;
    }

    .register p { margin-right: 5px; }

    /**
     * App download
     */
    .app-download { padding: 15px; }
    .app-download p { padding: 10px 0; }
    .app-download img {
        height: 40px;
        margin: 0 5px;
    }

    /**
     * Footer
     */
    .foot {
        margin: 0 auto 30px auto;
        max-width: 935px;
    }
    .foot ul { margin-bottom: 20px; }
    .foot ul li { margin: 0 10px 10px; }
    .foot ul li a { color: #385185; }
    .foot .copyright { color: #808080; }
    .foot ul li a,
    .foot .copyright {
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
    }


    /**
     * Media queries
     */

    @media screen and (max-width: 767px) {
        main { margin: 30px auto 50px auto; }
        .foot .copyright,
        .foot ul li a { font-size: 13px; }
    }