.email-address { box-sizing: border-box; max-width: 38rem; margin: 2rem auto; padding: 1.5rem; color: #183326; background: #fff; border: 1px solid #c9d9cf; border-radius: .75rem; font: 1rem/1.5 system-ui, sans-serif; }
.email-address *, .email-address *::before, .email-address *::after { box-sizing: border-box; }
body { margin: 0; background: #eef3ef; }
.email-address h1 { font-size: 1.6rem; line-height: 1.25; }
.email-address label { display: block; margin: 1rem 0; font-weight: 600; }
.email-address input:not([type=hidden]), .email-address textarea { display: block; width: 100%; margin-top: .35rem; padding: .65rem; font: inherit; border: 1px solid #72877b; border-radius: .25rem; }
.email-address button { max-width: 100%; min-height: 2.75rem; margin: .4rem .4rem .4rem 0; padding: .6rem 1rem; font: inherit; white-space: normal; border: 1px solid #206140; border-radius: .3rem; color: #fff; background: #206140; cursor: pointer; }
.email-address button:disabled { opacity: .65; cursor: wait; }
.email-address [hidden] { display: none !important; }
.email-address #email-address-status:not(:empty) { padding: .75rem; border-left: .25rem solid #206140; background: #edf6ef; }
.email-address #email-address-proposed { overflow-wrap: anywhere; font-weight: 600; }
.email-address a { color: #175438; }
.email-address :focus-visible { outline: 3px solid #c07314; outline-offset: 3px; }
@media (max-width: 42rem) { .email-address { margin: .5rem; padding: 1rem; } }