.modal-content, .modal-body, .form {
    width: 300px;
}

.form button {
    display: flex;
    margin-top: 40px;
}

.modal-content {
    background-color: rgba(24, 33, 52, 0.8);
}

.modal-body {
    display: flex;
    text-align: center;
}

.form input {
    width: 100%;
    margin-top: 10px;
    height: 30px;
    transition: .5s;

}

.form input:hover {
    box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.4);
}

.form textarea:hover {
    box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.4);
}

.form textarea {
    margin-top: 10px;
    border-radius: 4px;
    border: 1px solid #c4c4c4;
    background-color: #f7f7f7;
    width: 100%;
}

.form textarea:focus {
    outline: none;
}

.form input:focus {
    outline: none;
}

.form {
    float: left;
}

@media (max-width: 515px) {
    .modal-content, .modal-body, .form, .form textarea, .form input {
        width: 100%;
    }
}

@media (max-width:1000px) {
    .form textarea {
        width: 100%;
    }
}