#contact-form>*:not(:last-child) {
    padding-bottom: 20px;
}

#contact-form .form-row {
    display: flex;
    column-gap: 40px;
    row-gap: 20px;
    flex-wrap: wrap;
}

#contact-form .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#contact-form input,
#contact-form textarea {
    font-family: SourGummy;
    border-radius: 4px;
    border: 1px solid #1e1e1e;
    padding: 6px 10px;
    /* remove the thick border when an element is focused */
    outline: 0;
}

#contact-form input[type="submit"] {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
    background: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-color) 50%, var(--second-accent-color) 50%, var(--second-accent-color) 100%);
    background-size: 200% 200%;
    background-position: left top;
    transition: background-position 250ms ease-in-out;
    color: #ffffff;
}

#contact-form input[type="submit"]:hover {
    background-position: left bottom;
}