: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);
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

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

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

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

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

substrate-button button {
        transition: all 0.3s ease;
    }

:is(substrate-button button):hover {
            box-shadow: 0 4px 12px #00000026;
            transform: translateY(-2px);
        }

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

substrate-button.substrate-loading button {
            color: transparent;
            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
        }

/* Disable animations and transitions for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
            substrate-button.substrate-loading button {
                transition: none;
            }

                :is(substrate-button.substrate-loading button)::after {
                    animation: none;
                    /* Show a static indicator instead of spinning */
                    border: 2px solid black;
                    opacity: 0.5;
                }
            button.substrate-button:not([disabled]):active {
                animation: none;
            }
}

:root {
    --default-color: #36393d;
}

button.substrate-button {
    border: 1px solid black;
    color: var(--default-color);
    padding: 0.5em 1em;
    position: relative;
    background-color: var(--substrate-button-background, transparent);
    appearance: none;
    outline: 2px solid transparent;
}

button.substrate-button:disabled {
        pointer-events: none;
        opacity: 0.4;
    }

/* Enhanced focus visibility */

button.substrate-button:focus,button.substrate-button:focus-visible {
        outline: 2px solid var(--default-color);
    }

button.substrate-button:focus:not(:focus-visible) {
        outline-color: transparent;
    }

button.substrate-button:not([disabled]):active {
            animation-duration: .2s;
            animation-name: substrate-button-activate;
            transition-timing-function: ease;
        }
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSTtRQUNJLHVCQUF1QjtJQUMzQjs7SUFFQTtRQUNJLHlCQUF5QjtJQUM3QjtBQUNKOztBQUVBO0lBQ0ksSUFBSSx5QkFBeUIsQ0FBQztBQUNsQzs7QUFFQTtJQUNJO1FBQ0ksbUJBQW1CO0lBQ3ZCOztJQUVBO1FBQ0ksc0JBQXNCO0lBQzFCOztJQUVBO1FBQ0ksbUJBQW1CO0lBQ3ZCO0FBQ0o7O0FBRUEsc0NBQXNDO0FBQ3RDO0lBQ0k7UUFDSTtZQUNJLHVCQUF1QjtRQUMzQjs7UUFFQTtZQUNJLHVCQUF1QjtRQUMzQjtJQUNKOztJQUVBO1FBQ0ksSUFBSSx1QkFBdUIsQ0FBQztJQUNoQzs7SUFFQTtRQUNJO1lBQ0ksbUJBQW1CO1FBQ3ZCO0lBQ0o7QUFDSjs7QUFFQTtJQUNJLHFCQUFxQjtJQUNyQixpQkFBaUI7SUFDakIsZUFBZTtJQUNmLG9CQUFvQjtBQWdEeEI7O0FBOUNJO1FBQ0kseUJBQXlCO0lBTTdCOztBQUpJO1lBQ0ksZ0NBQWdDO1lBQ2hDLDJCQUEyQjtRQUMvQjs7QUFHSjtRQUNJLG9CQUFvQjtJQXlCeEI7O0FBdkJJO1lBQ0ksa0JBQWtCO1lBQ2xCLG9CQUFvQjtRQW9CeEI7O0FBbEJJO2dCQUNJLGtCQUFrQjtZQUN0Qjs7QUFFQTtnQkFDSSxXQUFXO2dCQUNYLHVCQUF1QjtnQkFDdkIsc0JBQXNCO2dCQUN0QixrQkFBa0I7Z0JBQ2xCLFdBQVc7Z0JBQ1gsWUFBWTtnQkFDWixRQUFRO2dCQUNSLFlBQVk7Z0JBQ1osa0JBQWtCO2dCQUNsQiwyQkFBMkI7Z0JBQzNCLG1DQUFtQztnQkFDbkMsdUNBQXVDO1lBQzNDOztBQUlQO1FBQ0csaUJBQWlCO1FBQ2pCLDZCQUE2QjtJQU1qQzs7QUFKSTtZQUNJLGlCQUFpQjtZQUNqQjtRQUNKOztBQUlSLDJFQUEyRTtBQUMzRTtZQUdZO2dCQUNJLGdCQUFnQjtZQVFwQjs7Z0JBTkk7b0JBQ0ksZUFBZTtvQkFDZixnREFBZ0Q7b0JBQ2hELHVCQUF1QjtvQkFDdkIsWUFBWTtnQkFDaEI7WUFPSjtnQkFDSSxlQUFlO1lBQ25CO0FBR1o7O0FBRUE7SUFDSSx3QkFBd0I7QUFDNUI7O0FBRUE7SUFDSSx1QkFBdUI7SUFDdkIsMkJBQTJCO0lBQzNCLGtCQUFrQjtJQUNsQixrQkFBa0I7SUFDbEIsaUVBQWlFO0lBQ2pFLGdCQUFnQjtJQUNoQiw4QkFBOEI7QUF1QmxDOztBQXJCSTtRQUNJLG9CQUFvQjtRQUNwQixZQUFZO0lBQ2hCOztBQUVBLDhCQUE4Qjs7QUFDOUI7UUFDSSx1Q0FBdUM7SUFDM0M7O0FBRUE7UUFDSSwwQkFBMEI7SUFDOUI7O0FBR0k7WUFDSSx1QkFBdUI7WUFDdkIseUNBQXlDO1lBQ3pDLGdDQUFnQztRQUNwQyIsImZpbGUiOiJpbmRleC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAa2V5ZnJhbWVzIHNwaW4ge1xuICAgIGZyb20ge1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgICB9XG5cbiAgICB0byB7XG4gICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gICAgfVxufVxuXG5Aa2V5ZnJhbWVzIHNwaW5uZXIge1xuICAgIHRvIHt0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO31cbn1cblxuQGtleWZyYW1lcyBzdWJzdHJhdGUtYnV0dG9uLWFjdGl2YXRlIHtcbiAgICAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgfVxuXG4gICAgNTAlIHtcbiAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgwLjk1KTtcbiAgICB9XG5cbiAgICAxMDAlIHtcbiAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbiAgICB9XG59XG5cbi8qIFJlc3BlY3QgdXNlcidzIG1vdGlvbiBwcmVmZXJlbmNlcyAqL1xuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgICBAa2V5ZnJhbWVzIHNwaW4ge1xuICAgICAgICBmcm9tIHtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICAgICAgICB9XG5cbiAgICAgICAgdG8ge1xuICAgICAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBAa2V5ZnJhbWVzIHNwaW5uZXIge1xuICAgICAgICB0byB7dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7fVxuICAgIH1cblxuICAgIEBrZXlmcmFtZXMgc3Vic3RyYXRlLWJ1dHRvbi1hY3RpdmF0ZSB7XG4gICAgICAgIDAlLCA1MCUsIDEwMCUge1xuICAgICAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbiAgICAgICAgfVxuICAgIH1cbn1cblxuc3Vic3RyYXRlLWJ1dHRvbiB7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIHVzZXItc2VsZWN0OiBub25lO1xuICAgIG1pbi13aWR0aDogOHJlbTtcbiAgICB0cmFuc2l0aW9uOiBhbGwgMC4zcztcblxuICAgICYgYnV0dG9uIHtcbiAgICAgICAgdHJhbnNpdGlvbjogYWxsIDAuM3MgZWFzZTtcblxuICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICAgIGJveC1zaGFkb3c6IDAgNHB4IDEycHggIzAwMDAwMDI2O1xuICAgICAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0ycHgpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgJi5zdWJzdHJhdGUtbG9hZGluZyB7XG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgICAgICYgYnV0dG9uIHtcbiAgICAgICAgICAgIGNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICAgICAgICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgICAgIHdpZHRoOiAxNnB4O1xuICAgICAgICAgICAgICAgIGhlaWdodDogMTZweDtcbiAgICAgICAgICAgICAgICBpbnNldDogMDtcbiAgICAgICAgICAgICAgICBtYXJnaW46IGF1dG87XG4gICAgICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICAgICAgICAgIGJvcmRlci10b3A6IDJweCBzb2xpZCBibGFjaztcbiAgICAgICAgICAgICAgICBib3JkZXItcmlnaHQ6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcbiAgICAgICAgICAgICAgICBhbmltYXRpb246IHNwaW5uZXIgMC42cyBsaW5lYXIgaW5maW5pdGU7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAgJlthcmlhLWRpc2FibGVkPVwidHJ1ZVwiXSB7XG4gICAgICAgIHVzZXItc2VsZWN0OiBub25lO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblxuICAgICAgICAmIGJ1dHRvbiB7XG4gICAgICAgICAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50XG4gICAgICAgIH1cbiAgICB9XG59XG5cbi8qIERpc2FibGUgYW5pbWF0aW9ucyBhbmQgdHJhbnNpdGlvbnMgZm9yIHVzZXJzIHdobyBwcmVmZXIgcmVkdWNlZCBtb3Rpb24gKi9cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gICAgc3Vic3RyYXRlLWJ1dHRvbiB7XG4gICAgICAgICYuc3Vic3RyYXRlLWxvYWRpbmcge1xuICAgICAgICAgICAgJiBidXR0b24ge1xuICAgICAgICAgICAgICAgIHRyYW5zaXRpb246IG5vbmU7XG5cbiAgICAgICAgICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgICAgICAgICAgIGFuaW1hdGlvbjogbm9uZTtcbiAgICAgICAgICAgICAgICAgICAgLyogU2hvdyBhIHN0YXRpYyBpbmRpY2F0b3IgaW5zdGVhZCBvZiBzcGlubmluZyAqL1xuICAgICAgICAgICAgICAgICAgICBib3JkZXI6IDJweCBzb2xpZCBibGFjaztcbiAgICAgICAgICAgICAgICAgICAgb3BhY2l0eTogMC41O1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgIGJ1dHRvbi5zdWJzdHJhdGUtYnV0dG9uIHtcbiAgICAgICAgJjpub3QoW2Rpc2FibGVkXSkge1xuICAgICAgICAgICAgJjphY3RpdmUge1xuICAgICAgICAgICAgICAgIGFuaW1hdGlvbjogbm9uZTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cbn1cblxuOnJvb3Qge1xuICAgIC0tZGVmYXVsdC1jb2xvcjogIzM2MzkzZDtcbn1cblxuYnV0dG9uLnN1YnN0cmF0ZS1idXR0b24ge1xuICAgIGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrO1xuICAgIGNvbG9yOiB2YXIoLS1kZWZhdWx0LWNvbG9yKTtcbiAgICBwYWRkaW5nOiAwLjVlbSAxZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN1YnN0cmF0ZS1idXR0b24tYmFja2dyb3VuZCwgdHJhbnNwYXJlbnQpO1xuICAgIGFwcGVhcmFuY2U6IG5vbmU7XG4gICAgb3V0bGluZTogMnB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXG4gICAgJjpkaXNhYmxlZCB7XG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgICAgICBvcGFjaXR5OiAwLjQ7XG4gICAgfVxuXG4gICAgLyogRW5oYW5jZWQgZm9jdXMgdmlzaWJpbGl0eSAqL1xuICAgICY6Zm9jdXMsICY6Zm9jdXMtdmlzaWJsZSB7XG4gICAgICAgIG91dGxpbmU6IDJweCBzb2xpZCB2YXIoLS1kZWZhdWx0LWNvbG9yKTtcbiAgICB9XG5cbiAgICAmOmZvY3VzOm5vdCg6Zm9jdXMtdmlzaWJsZSkge1xuICAgICAgICBvdXRsaW5lLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICB9XG5cbiAgICAmOm5vdChbZGlzYWJsZWRdKSB7XG4gICAgICAgICY6YWN0aXZlIHtcbiAgICAgICAgICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogLjJzO1xuICAgICAgICAgICAgYW5pbWF0aW9uLW5hbWU6IHN1YnN0cmF0ZS1idXR0b24tYWN0aXZhdGU7XG4gICAgICAgICAgICB0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZTtcbiAgICAgICAgfVxuICAgIH1cbn0iXX0= */