:root {
    /* same as --color-red at 50% */
    --focus-box-shadow: 0 0 0 2px #fff,0 0 0 4px rgba(137,0,0,.5),0 0 #0000;
    --unfocus-box-shadow: 0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(0,0,0,.05);
    --hover-background-color: #e7cccc; /* lighter version of --color-red */
}

.ft-form {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    padding: 0 10%;
}
.ft-form *,
.ft-form ::after,
.ft-form ::before {
    box-sizing: border-box
}
.ft-form input,
.ft-form textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}
.ft-form [type=submit] {
    -webkit-appearance: button
}
.ft-form fieldset {
    margin: 0;
    padding: 0
}
.ft-form *,
.ft-form ::after,
.ft-form ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}
.ft-form textarea {
    resize: vertical
}
.ft-form input,
.ft-form textarea {
    padding: 0;
    line-height: inherit;
}
.ft-form [type=email],
.ft-form [type=text],
.ft-form textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0;
    padding-top: .5rem;
    padding-right: .75rem;
    padding-bottom: .5rem;
    padding-left: .75rem;
    font-size: 1rem;
    line-height: 1.5rem
}
.ft-form [type=email]:focus,
.ft-form [type=text]:focus,
.ft-form textarea:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--focus-box-shadow);
    border-color: #2563eb
}
.ft-form fieldset {
    font-size: 100%;
    margin-top: 3rem;
    margin-bottom: 1.5rem
}
.ft-form fieldset:first-child {
    margin-top: 0
}
.ft-form fieldset > * {
    display: block;
    margin-bottom: 1.5rem
}
.ft-form fieldset > :last-child {
    margin-bottom: 0
}
.ft-form fieldset > p {
    margin: 0
}
.ft-form [type=email],
.ft-form [type=text],
.ft-form textarea {
    border-radius: .375rem;
    margin-top: .25rem;
    box-shadow: var(--unfocus-box-shadow);
    border-color: #bbb;
    width: 100%
}
.ft-form [type=email]:focus,
.ft-form [type=text]:focus,
.ft-form textarea:focus {
    border-color: #bbb;
    box-shadow: var(--focus-box-shadow);
}
.ft-form .btns {
    text-align: right;
    margin-top: 3rem
}
.ft-form .btns > input[type=submit] {
    display: inline-block;
    box-shadow: var(--unfocus-box-shadow);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: .6rem;
    padding-bottom: .6rem;
    line-height: 1.25rem;
    border-width: 1px;
    border-radius: .375rem;
    border-color: #bbb;
    background-color: #fff;
    cursor: pointer;
    margin-left: .5rem;
    margin-bottom: 1rem;
    font-weight: 700
}
.ft-form .btns > input[type=submit]:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #bbb;
    box-shadow: var(--focus-box-shadow);
}
.ft-form .btns > input[type=submit] {
    background-color: #f3f4f5;
    transition: background-color .1s
}
.ft-form .btns > input[type=submit]:hover {
    background-color: var(--hover-background-color);
}