#contactContainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 1rem;
    margin-bottom: 1rem;
    /* background-color: var(--valentino); */
    background: #D1A3CF;
    background: linear-gradient(27deg, rgba(209, 163, 207, 1) 0%, rgba(148, 0, 211, 1) 19%, rgba(29, 11, 49, 1) 100%);
    /* background: #D1A3CF;
    background: radial-gradient(circle, rgba(209, 163, 207, 1) 0%, rgba(148, 0, 211, 1) 31%, rgba(29, 11, 49, 1) 100%); */
}
#contactForm{
    grid-column: 1/-1;
    width: 100%;
    padding: 1rem;
}
.formItem{
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
    justify-items:space-between;
    gap: 10px;
}
.formItem input{
    width: 100%;
    height: 40px;
    border-radius: 5px;
    
}
.formItem textarea{
    height: 100px;
    border-radius: 5px;
    
}
.formItem button{
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border: 1px solid white;
    color: white;
    background-color: var(--darkViolet);
    transition: 0.30s ease-in-out;
}
.formItem button:hover, button:focus{
    background-color: var(--valentino);
    border: none;
}
/* .formItem input:focus, textarea:focus{
    border: 1px solid white;
    background-color: wheat;
    transition: 0.30s ease;
} */
/* Form validation style */
.formItem .error{
    border: 2px solid red;
    background-color: white;
    transition: 0.30s ease;
}
.formItem .valid{
    border: 2px solid green;
    background-color: white;
    transition: 0.30s ease;
}
@media screen and (min-width:1000px) {
    #contactContainer{
        grid-template-columns: 1fr 800px 1fr;
    }
    #contactForm{
        grid-column: 2/3;
        padding: 1rem;
    }
}