* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    background-color: #0049B7;
    display: flex;
}

#form_wrapper {
    /* width: 1000px; */
    /* width: 95%; */
    /* height: 700px; */
    margin:auto;
    background-color: #fff;
    border-radius: 20px;
    display: grid;
    grid-template-columns:  1fr 1fr;
    grid-gap: 5vw;
    padding: 15px;
    padding-left: 5px;
}

#form_left {
    /* center the image */
    display: flex;
    justify-content: center;
    align-items: center;
}

#form_left img {
    width: 300px;
    height: 400px;
    border-radius: 18px;
    padding-left: -5px;
}

#form_right {
    display: grid;
    /* single column layout */
    grid-template-columns: 1fr;
    /* have some gap in between elements*/
    grid-gap: 20px;
    padding: 10% 5%;
}

.input_container {
    background-color: #D2D6D9;
    display: flex;
    align-items: center;
    padding:20px
}

.input_container:hover {
    background-color: #B2BCC0 ;
}

.input_container,
#input_submit {
    height: 60px;
    /* make the borders more round */
    border-radius: 20px;
    width: 100%;
}

.input_field {
    color: #0049B7;
    background-color: inherit;
    width: 90%;
    border: none;
    font-size: 1.3rem;
    font-weight: 400;
    padding-left: 30px;
}

.input_field:hover,
.input_field:focus {
    /* remove the outline */
    outline: none;
}

#input_submit { 
   background-color: #0049B7;
   padding-left: 0;
   font-weight: bold;
   color: white;
}


h1,
span {
    text-align: center;
}

a {
    text-decoration: none;
    color:#0049B7;
    font-weight: bold;
}


@media screen and (max-width:768px) {

    /* make the layout  a single column and add some margin to the wrapper */
    #form_wrapper {
        grid-template-columns: 1fr;
        margin-left: 10px;
        margin-right: 10px;
    }
    /* on small screen we don't display the image */
    #form_left {
        display: none;
    }
}