.form-block {
    max-width: 500px;
}

form .grid {
    --gutter: .8rem;
}

.form-block-field {
    position: relative;
}

.form-block-field>label {
    display: block;
    padding-bottom: .3rem;
    
}

.form-block-field-input input,
.form-block-field-textarea textarea,
.form-block-field-select select {
    line-height: 2rem;
    padding: 0 .5rem;
    box-sizing: border-box;
    font-size: 1rem;
    width: 100%;
    border: .1em solid;
    border-radius: 5px;
}

.form-block-field-textarea textarea {
    font-size: .85rem;
    width: 100%;
    margin-bottom: 15px;
    line-height: 40px;
    padding: 5px;
}
.form-block-field-text-area {
width: 100%;
}

.form-block-field-select select {
    height: 2.2rem;
}


.form-block input[type="checkbox"],
.form-block input[type="radio"] {
    appearance: none;
    position: relative;
    margin-right: .3rem;
    margin-top: .2rem;
    font: inherit;
    width: 1.15em;
    height: 1.15em;
    border: 0.1em solid var(--color-black);
    display: inline-grid;
    place-content: center;
}

.form-block input[type="radio"],
.form-block input[type="radio"]::before {
    border-radius: 50%;
}


.form-block input[type="checkbox"]::before,
.form-block input[type="radio"]::before {

    content: "";
    width: 0.65em;
    height: 0.65em;
    opacity: 0;
    transition: opacity .2s;
    box-shadow: inset 1em 1em var(--color-black);
    
}

.form-block input[type="checkbox"]:checked::before,
.form-block input[type="radio"]:checked::before {
    opacity: 1;
}

.form-block-button>input {
    display: block;
    margin-left: auto;
    padding: 0.5rem 2.5rem;
    background: none;
    border: 1px solid var(--color-black);
    font: inherit;
    font-weight: var(--font-weight-md);
    border-radius: 40em;
}

.form-block-field-textarea textarea {
    font-family: inherit;
    font-size: inherit;
    resize: none;

}

.form-block-field-invalid,
.form-block-invalid {
    display: table;
    width: auto;
    margin-top: 0.5rem;
    padding: 0.3rem 0.5rem;
    font-size: .5em;
    background-color: var(--color-code-red);
    color: var(--color-white);
    font-weight: 500;
    letter-spacing: var(--letter-spacing);
}

.form-block-field-invalid {
    position: absolute;
    top: -4%;
    right: 0;
    transform: translateY(-50%);
}

.form-block-invalid {
    margin-top: 1em;
    font-weight: var(--font-weight-bold);
}
.form-block-invalid p {
    color: var(--color-white);
    font-size: 1rem;
    padding:0;
}
.form-block-field-invalid:after {
    content: "";
    position: absolute;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-top: 0.5rem solid var(--color-code-red);
    bottom: -0.5rem;
    left: 0.5rem;
}

.form-block-fatal,
.form-block-success {
    display: inline-block;
    padding: .5rem 1rem;
    color: var(--color-white);
}

.form-block-fatal {
    background-color: var(--color-code-red);
}

.form-block-success {
    background-color: var(--color-code-green);
}

.form-block-success p {
    font-size: 3em;
    text-align: left;
}