form.css

/*Author: Gali Kechichian*/
/*Contact page */
.form-container{
    max-width:500px;
    height: 500px;
    margin-top:25px;
    margin-bottom: 80px;
    margin-left: auto;
    margin-right:auto;
}

.form-title{
    font-family:'Philosopher', serif;
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom:15px;
    color:rgb(132, 76, 88);
}
form{
    display:flex;
    flex-direction: column;
    width: 80%
}
form input, form textarea{
    border:0;
    margin: 16px 0;
    padding:20px 10px;
    outline:none;
    font-size:16px;
    color:dimgrey;
    border-radius: 7px;
}

#button{
    margin: 13px 0;
    padding: 20px 10px;
    background:rgb(195, 131, 145);
    color: #fff;
    border:none;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-radius: 7px;
}

#button:hover{
    background:rgb(132, 76, 88);
    cursor:pointer;
}

#button.submitted{
    display:none;
}

form input.invalid, 
form textarea.invalid {
    outline:1px solid rgb(219, 7, 7);
}

form input.invalid::placeholder,
form textarea.invalid::placeholder {
    color:rgb(230, 126, 126);
}

form p{
    display:none;
}
form p.invalid{
    display: block;
    margin:-8px 0;
    font-size: 13px;
    color:rgb(219, 7, 7);
}

#thankyou-msg{
    color: rgb(132, 76, 88);
    display:none;
}

#thankyou-msg.submitted{
    display:block;
}

@media screen and (max-width: 760px) {
    .form-container{
        max-width: 90%;
        height: auto;
    }
}