main{
    padding-top:2rem;
}


.signup-title{
    text-align: center;
    font-size: 1.8rem;
    color:#ff5454;
}


.signup-form label,
.signup-form input,
.signup-form select{
    display:block;
    
    width:100%;
}

/* .signup-form input[type="checkbox"] */

.signup-form input[id*="terms"],
.signup-form input[id*="terms"] + label{
    display:inline-block;
    width:auto;
    vertical-align:bottom;
}

.signup-form button[type="submit"]{
    display:block;
    
}

.signup-form{
    padding:1rem;
    display:grid;
    grid-auto-rows:2rem;
    grid-gap:0.5rem;
}

.signup-form label{
    font-weight:bold;
}


.signup-form input[type="checkbox"]{
    border: 1px solid #ccc;
    background:white;
    width: 1rem;
    height: 1rem;
}

.signup-form input:not([type="checkbox"]),
.signup-form select{
    border:1px solid #ccc;
    padding: 0.2rem 0.5rem;
    font:inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance:none;
}


.signup-form input[type="checkbox"]:checked{
    background:#d8f3df;
    border: #2ddf5c;
}
.signup-form input:not([type="checkbox"]):focus,
.signup-form select:focus{
    outline:none;
    background: #d8f3df;
    border-color:#2ddf5c;
}


.signup-form input.invalid,
.signup-form select.invalid,
.signup-form.needs-validation :invalid {
    border: 1px solid red !important;
    background: #faacac;
}




@media(min-width: 40rem){
    .signup-form{
        margin:auto;
        width:30rem;
        grid-template-columns: 10rem auto;
        grid-gap:1rem;
    }

    .signup-form [id="title"]{
        grid-column:span 2
    }

    .signup-form__checkbox{
        grid-column: span 2;
    }
}