/* marketplace-onboard assets */

:root {
    --background_color: rgba(39, 157, 217, 0.1);
    --background_gradient_color: rgba(0,212,255,0.6);
    --container_background_color: rgba(255, 255, 255, 1);
    --container_border_color: rgba(255, 255, 255, 0.8);
    --font_color: #333;
    --link_color: #5599bb;
    --serif_fonts: "Helvetica Neue", sans-serif;

    /* for rem units to be relative to */
    font-size: 100%;
}

body {
    background: var(--background_color);
    background: linear-gradient(90deg, var(--background_color) 0%, var(--background_gradient_color) 100%);
    color: var(--font_color);
    font-family: var(--serif_fonts);
    margin: 0;
}

    .wrap_container {
        overflow: hidden;
        position: relative;
    }

    .background_container {
        background-image: url('/public/crunchy-logo.png');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        height: 100vh;
        left: 0;
        opacity: 0.05;
        position: absolute;
        top: 0;
        width: 100vw;
    }

    .flex_container {
        display: flex;
        align-items: center;
        height: 100vh;
        justify-content: center;
        position: relative;
        width: 100vw;
    }

        .inner_container {
            background: var(--container_background_color);
            box-shadow:
                rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
                rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
            border-radius: 50px;
            display: inline-block;
            padding: 50px 120px;
            width: 650px;
        }

            .flex_split {
                display: flex;
            }

                .info {
                    flex-grow: 1;
                    flex-basis: 0;
                }

                .spacer {
                    background: var(--background_color);
                    margin: 5px 35px;
                    width: 12px;
                }

                form {
                    flex-grow: 1;
                    flex-basis: 0;
                }

                    .form_element {
                        display: flex;
                        flex-direction: column;
                        margin: 15px 0;
                    }

                        .form_element_top {
                            margin-top: 10px;
                        }

                        .sign_up {
                            margin: 25px 0;
                        }

                        label {
                            font-size: 0.7rem;
                            font-weight: 500;
                            margin: 5px 3px;
                        }

                        input[type="text"], input[type="email"], input[type="password"] {
                            border: 1px solid #999;
                            display: block;
                            font-size: 1rem;
                            padding: 12px 12px;
                        }

                        input[type="submit"] {
                            font-size: 1.1rem;
                            font-weight: bold;
                            padding: 6px 8px;
                        }

a, a:visited {
    border-bottom: 2px solid var(--link_color);
    color: var(--link_color);
    font-weight: bold;
    padding-bottom: 2px;
    text-decoration: none;
}

    a:hover {
        border-bottom: 0;
    }

h1 {
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: -1px;
}

p {
    hyphens: auto;
    line-height: 1.7;
}

ol, ul {
}

    ol, ul li {
        margin: 10px 0;
    }

:focus {
    outline-color: #000;
}

::placeholder {
    color: #aaa;
}

.error_message {
    background-color: #ff7f7f;
    box-shadow: 0 0 15px rgba(22, 31, 39, 0.32),
        0 0 5px rgba(22, 31, 39, 0.22);
    font-weight: 500;
    margin: 20px 0;
    padding: 1px 15px;
}

    .error_message p {
        line-height: 1.3;
    }

@media handheld, only screen and (max-width: 1000px), only screen and (max-device-width: 1000px), only screen and (max-height: 700px) {
    .flex_container {
        height: auto;
    }

        .inner_container {
            background: var(--container_background_color);
            border-radius: 0;
            padding: 40px 60px;
            width: auto;
        }
}

@media handheld, only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
    .flex_split {
        flex-direction: column;
    }

        .spacer {
            height: 12px;
            margin: 20px 5px;
            width: auto;
        }
    
    h1 {
        margin: 10px 0;
    }
}