.contact {
    margin: auto;
    max-width: 900px;
    padding: 32px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
}

#contact-form-message {
    resize: vertical;
    min-height: 160px;
}

.form-label {
    font-weight: 600;
}

.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-op-2);
}

.form-control.is-error {
    border-color: var(--error);
}


.sendmessage-btn {
    border: none;
    padding: 8px 64px;
    border-radius: 8px;
    color: white;
    background: var(--primary-linear);
    background-size: 200% auto;
    box-shadow: 0 4px 12px 0 var(--primary-op-5);
    transition: all 0.2s ease;
}

.sendmessage-btn:hover {
    background-size: 100%;
}

.follow-btn ~ .follow-btn {
    margin-left: 16px;
}

.follow-btn {
    width: 44px;
    height: 44px;
    padding: 8px;
    border-radius: 50%;
    color: var(--primary);
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0 0px var(--primary-op-2);
    transition: all 0.2s ease;
}

.follow-btn svg {
    font-size: 24px;
    transition: all 0.2s ease;
}

.follow-btn:hover { 
    background-color: var(--primary);
    color: white;
    box-shadow: 0 0 0 8px var(--primary-op-2);
}

#contact-form .error-message:not(:empty) {
    font-size: 14px;
    display: inline-block;
    margin-top: 8px;
    padding: 0 8px;
    color: var(--error);
}