:root {
    --substrate-focus: #09f;
    --error: red;
}

button {
    transition: all 0.2s;
    cursor: pointer;
    outline: 2px solid transparent;
}

button:focus,button:hover {
        outline-color: black;
    }

main {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    max-width: 30rem;
    margin: 2rem auto;
}

form > * {
        margin-bottom: 1rem;
    }

#controls {
    text-align: right;
}

substrate-email input.substrate-input {
        outline: 2px solid transparent;
        transition: all 0.2s;
        border-bottom: 2px solid;
    }

:is(substrate-email input.substrate-input):focus:not(.error) {
            outline: 2px solid var(--substrate-focus);
            border-color: var(--substrate-focus);
        }

substrate-email.error input.substrate-input {
            border-bottom-color: var(--error);
        }
substrate-email {
    display: block;
}
:is(substrate-email label) .label.error {
            display: flex;
            justify-content: space-between;
        }
:is(substrate-email label) span.errormsg {
            text-decoration: underline var(--error, red);
        }
substrate-email input {
        width: 100%;
        padding: 0.4em;
        font-size: 1rem;
        border-radius: 0;
        border: 1px solid;
    }
/*
see https://www.joshwcomeau.com/css/custom-css-reset/
*/

/* 1. Box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* 3. Enable keyword animations */
    interpolate-size: allow-keywords;
}


* {
    /* 2. Remove default margin */
    margin: 0;

    /*
        3. Add accessible line-height 
        see https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/
    */
    line-height: calc(2px + 2ex + 2px);
}

body {
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
    font: inherit;
}

/* 7. Avoid text overflows */
p {
    text-wrap: pretty;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* 8. Improve line wrapping */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    overflow-wrap: break-word;
}


/*
  9. Create a root stacking context

  __OPTIONAL__

  see https://www.joshwcomeau.com/css/custom-css-reset/#nine-root-stacking-context-10
  see https://www.joshwcomeau.com/css/stacking-contexts/
*/
#root {
    isolation: isolate;
}

/* see https://gomakethings.com/how-to-animate-scrolling-to-anchor-links-with-one-line-of-css/#accessibility-concerns */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    to {transform: rotate(360deg);}
}

@keyframes substrate-button-activate {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

substrate-button {
    display: inline-block;
    user-select: none;
    min-width: 8rem;
}

substrate-button.substrate-loading {
        pointer-events: none;
    }

substrate-button.substrate-loading button {
            color: transparent;
            transition: all 0.3s ease;
            pointer-events: none;
        }

:is(substrate-button.substrate-loading button):hover {
                color: transparent;
            }

:is(substrate-button.substrate-loading button)::after {
                content: "";
                background: transparent;
                box-sizing: border-box;
                position: absolute;
                width: 16px;
                height: 16px;
                inset: 0;
                margin: auto;
                border-radius: 50%;
                border-top: 2px solid black;
                border-right: 2px solid transparent;
                animation: spinner 0.6s linear infinite;
            }

substrate-button[aria-disabled="true"] {
        user-select: none;
        background-color: transparent;
    }

substrate-button[aria-disabled="true"] button {
            user-select: none;
            background-color: transparent
        }
  
button.substrate-button {
    border: 1px solid black;
    color: var(--substrate-button-text, var(--substrate-primary, #36393d));
    font-family: var(--substrate-font, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif);
    padding: 0.5em 1em;
    position: relative;
    background-color: var(--substrate-button-background, transparent);
    appearance: none;
}
  
button.substrate-button:active {
        color: var(--substrate-medium, #999da0);
        background-color: var(--substrate-button-background-disabled, #f7f7f5);
    }
  
button.substrate-button:disabled {
        pointer-events: none;
        opacity: 0.4;
    }
  
button.substrate-button:not([disabled]):active {
            animation-duration: .2s;
            animation-name: substrate-button-activate;
            transition-timing-function: ease;
        }
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSTtRQUNJLHVCQUF1QjtJQUMzQjs7SUFFQTtRQUNJLHlCQUF5QjtJQUM3QjtBQUNKOztBQUVBO0lBQ0ksSUFBSSx5QkFBeUIsQ0FBQztBQUNsQzs7QUFFQTtJQUNJO1FBQ0ksbUJBQW1CO0lBQ3ZCOztJQUVBO1FBQ0ksc0JBQXNCO0lBQzFCOztJQUVBO1FBQ0ksbUJBQW1CO0lBQ3ZCO0FBQ0o7O0FBRUE7SUFDSSxxQkFBcUI7SUFDckIsaUJBQWlCO0lBQ2pCLGVBQWU7QUF3Q25COztBQXRDSTtRQUNJLG9CQUFvQjtJQTBCeEI7O0FBeEJJO1lBQ0ksa0JBQWtCO1lBQ2xCLHlCQUF5QjtZQUN6QixvQkFBb0I7UUFvQnhCOztBQWxCSTtnQkFDSSxrQkFBa0I7WUFDdEI7O0FBRUE7Z0JBQ0ksV0FBVztnQkFDWCx1QkFBdUI7Z0JBQ3ZCLHNCQUFzQjtnQkFDdEIsa0JBQWtCO2dCQUNsQixXQUFXO2dCQUNYLFlBQVk7Z0JBQ1osUUFBUTtnQkFDUixZQUFZO2dCQUNaLGtCQUFrQjtnQkFDbEIsMkJBQTJCO2dCQUMzQixtQ0FBbUM7Z0JBQ25DLHVDQUF1QztZQUMzQzs7QUFJUDtRQUNHLGlCQUFpQjtRQUNqQiw2QkFBNkI7SUFNakM7O0FBSkk7WUFDSSxpQkFBaUI7WUFDakI7UUFDSjs7QUFJUjtJQUNJLHVCQUF1QjtJQUN2QixzRUFBc0U7SUFDdEUsb0dBQW9HO0lBQ3BHLGtCQUFrQjtJQUNsQixrQkFBa0I7SUFDbEIsaUVBQWlFO0lBQ2pFLGdCQUFnQjtBQW1CcEI7O0FBakJJO1FBQ0ksdUNBQXVDO1FBQ3ZDLHNFQUFzRTtJQUMxRTs7QUFFQTtRQUNJLG9CQUFvQjtRQUNwQixZQUFZO0lBQ2hCOztBQUdJO1lBQ0ksdUJBQXVCO1lBQ3ZCLHlDQUF5QztZQUN6QyxnQ0FBZ0M7UUFDcEMiLCJmaWxlIjoiaW5kZXguY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGtleWZyYW1lcyBzcGluIHtcbiAgICBmcm9tIHtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gICAgfVxuXG4gICAgdG8ge1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbn1cblxuQGtleWZyYW1lcyBzcGlubmVyIHtcbiAgICB0byB7dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTt9XG59XG5cbkBrZXlmcmFtZXMgc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZSB7XG4gICAgMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgIH1cblxuICAgIDUwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC45NSk7XG4gICAgfVxuXG4gICAgMTAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgfVxufVxuXG5zdWJzdHJhdGUtYnV0dG9uIHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgbWluLXdpZHRoOiA4cmVtO1xuXG4gICAgJi5zdWJzdHJhdGUtbG9hZGluZyB7XG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgIGNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7XG4gICAgICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICAgICAgY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgICAgICB3aWR0aDogMTZweDtcbiAgICAgICAgICAgICAgICBoZWlnaHQ6IDE2cHg7XG4gICAgICAgICAgICAgICAgaW5zZXQ6IDA7XG4gICAgICAgICAgICAgICAgbWFyZ2luOiBhdXRvO1xuICAgICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgICAgICAgICAgICBib3JkZXItdG9wOiAycHggc29saWQgYmxhY2s7XG4gICAgICAgICAgICAgICAgYm9yZGVyLXJpZ2h0OiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGlubmVyIDAuNnMgbGluZWFyIGluZmluaXRlO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgICZbYXJpYS1kaXNhYmxlZD1cInRydWVcIl0ge1xuICAgICAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cbiAgICAgICAgJiBidXR0b24ge1xuICAgICAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudFxuICAgICAgICB9XG4gICAgfVxufVxuICBcbmJ1dHRvbi5zdWJzdHJhdGUtYnV0dG9uIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCBibGFjaztcbiAgICBjb2xvcjogdmFyKC0tc3Vic3RyYXRlLWJ1dHRvbi10ZXh0LCB2YXIoLS1zdWJzdHJhdGUtcHJpbWFyeSwgIzM2MzkzZCkpO1xuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1zdWJzdHJhdGUtZm9udCwgJ0dpbGwgU2FucycsICdHaWxsIFNhbnMgTVQnLCBDYWxpYnJpLCAnVHJlYnVjaGV0IE1TJywgc2Fucy1zZXJpZik7XG4gICAgcGFkZGluZzogMC41ZW0gMWVtO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdWJzdHJhdGUtYnV0dG9uLWJhY2tncm91bmQsIHRyYW5zcGFyZW50KTtcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuXG4gICAgJjphY3RpdmUge1xuICAgICAgICBjb2xvcjogdmFyKC0tc3Vic3RyYXRlLW1lZGl1bSwgIzk5OWRhMCk7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tYmFja2dyb3VuZC1kaXNhYmxlZCwgI2Y3ZjdmNSk7XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCB7XG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgICAgICBvcGFjaXR5OiAwLjQ7XG4gICAgfVxuXG4gICAgJjpub3QoW2Rpc2FibGVkXSkge1xuICAgICAgICAmOmFjdGl2ZSB7XG4gICAgICAgICAgICBhbmltYXRpb24tZHVyYXRpb246IC4ycztcbiAgICAgICAgICAgIGFuaW1hdGlvbi1uYW1lOiBzdWJzdHJhdGUtYnV0dG9uLWFjdGl2YXRlO1xuICAgICAgICAgICAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2U7XG4gICAgICAgIH1cbiAgICB9XG59Il19 */