body {
    background: #f5f5f5;
    color: #2d2d2d;
}
body * {
    box-sizing: border-box;
}

.contact-cover {
    background: #fefefe;
    padding: 20px;
}
.contact-cover main form > * {
    margin: 20px 5px;
}
.contact-cover input, .contact-cover textarea {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid gray;
}
.contact-cover input:focus, .contact-cover textarea:focus {
    outline: none;
}
.contact-cover input {
    padding: 8px;
}
.contact-cover textarea {
    min-height: 40px;
    resize: vertical;
}

.contact-cover button {
    background: #5a5a5a;
    color: #fefefe;
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    cursor: pointer;
}
.contact-cover button:hover {
    background: #bfbfbf;
    color: #2d2d2d;
}
.contact-cover button:active {
    transform: scale(0.95);
    background: #16005e;
    color: #fff;
}



@media screen and (min-width: 680px) {
    .contact-cover {
        height: 500px;
        width: 100%;
        max-width: 600px;
        margin: 20px auto 40px;
        border-radius: 8px;
        padding: 20px 35px;
    }

    .contact-cover main form > * {
        margin: 35px 5px;
    }

    .contact-cover textarea {
        min-height: 80px;
    }
}