.sendMail {
    width: 85%;
    margin-left: 15%;
}
form {
    display: flex;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    width: 30%;
    height: 60%;
    background-color: rgb(234, 231, 231);
    border-radius: 2rem;
    
}
form input, textarea, button {
    margin-left: 15%;
    width: 70%;
    height: 7%;
    margin-top: 2rem;
}
.intro {
    text-align: center;
    font-size: 3rem;
    margin-top: 3rem;
    
}
input {
    margin-top: 10%;
    padding: 1rem;
}
textarea {
    height: 40%;
    padding: 1rem;
}
button {
    background-color: black;
    color: white;
    cursor: pointer;
}

@media only screen and (min-width:1800px) and (max-width:2000px){
form {
    width: 35%;
}

}
@media only screen and (min-width:1401px) and (max-width:1800px){
    form {
        width: 40%;
        height: 50%;
    }
}
@media only screen and (min-width: 1201px) and (max-width: 1400px){
    form {
        width: 45%;
        height: 55%;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1200px){
    form {
        width: 50%;
        height: 40%;
    }
    form input, textarea, button {
        margin-left: 10%;
        width: 80%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    form {
        width: 60%;
        height: 40%;
    }
    textarea {
        height: 50%;
        padding: 1rem;
    }
    form input, textarea, button {
        margin-left: 10%;
        width: 80%;
    }
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
    form {
        width: 70%;
        height: 40%;
    }
    textarea {
        height: 50%;
        padding: 1rem;
    }
    form input, textarea, button {
        margin-left: 10%;
        width: 80%;
    }
}
@media only screen and (max-width: 480px) {
    form {
        width: 85%;
        height: 40%;
    }
    form input, textarea, button {
        margin-left: 10%;
        width: 80%;
    }
    textarea {
        height: 50%;
        padding: 1rem;
    }
    input, button {
        height: 10%;
    }
    
}
@media only screen and (max-width: 400px) {
    form {
        width: 85%;
    }
    .intro {
        font-size: 5rem;
    }
    form input, textarea, button {
        margin-left: 10%;
        width: 80%;
    }
    textarea {
        height: 50%;
        padding: 1rem;
    }
    input, button {
        height: 10%;
    }
    
}
@media only screen and (max-width: 350px) {
    form {
        width: 85%;
    }
    input, button {
        height: 10%;
    }
    
}
@media only screen and (max-width: 278px)  {
    form {
        width: 85%;
    }
    form input, textarea, button {
        margin-left: 10%;
        width: 80%;
    }
    textarea {
        height: 50%;
        padding: 1rem;
    }
    input, button {
        height: 10%;
    }
    
}