:root {
    --primary: hsla(218, 13.9%, 15.5%); /* #22262d */
    --primary-soften: hsla(218, 13.9%, 15.5%, .8);
}

.contact-form-container {
    display: flex;
    justify-content: center;
}

.contact-form {
    width: 100%;
}

.contact-form .form-message {
    margin-bottom: 10px;
}

.contact-form .form-group {
    margin-bottom: 10px;
}

.contact-form label {
    font-weight: bold;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 5px 10px;
    border-radius: 5px;
    color: var(--primary);
    border: 1px solid lightgrey;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border: 1px solid var(--primary);
}

.contact-form .form-submit {
    text-align: center;
}

.contact-form input[type="submit"] {
    padding: 10px;
    width: 50%;
    background: var(--primary);
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.contact-form input[type="submit"]:hover {
    background: var(--primary-soften);
}

@media (min-width: 1024px) {
    .contact-form {
        width: 50%;
    }

    .contact-form input[type="submit"] {
        width: 25%;
    }
}