:root {
    /** Colors **/
    --black: 0 0 0;
    --valid: 75 225 144;
    --invalid: 255 75 35;
    --white: 255 255 255;
    /* Typography */
    --line-scale: 0.1;
    --letter-scale: 0.01rem;
    --base-line-height: 1.5;
    --base-letter-spacing: 0rem;
    --font-family: dm sans;
}

@media (max-width: 479px) {
    :root {
        --font-scale: 1.25;
        --spacing: 7vw;
    }
}

@media (min-width: 480px) {
    :root {
        --font-scale: 1.5;
        --spacing: calc(7.5vw + 0.8rem);
    }
}

@media (max-width: 1440px) {
    :root {
        --base-font-size: 1.6rem;
    }
}

@media (min-width: 1441px) {
    :root {
        --base-font-size: 1.8rem;
    }
}

@media (min-width: 1601px) {
    :root {
        --base-font-size: 2.0rem;
    }
}

@media (min-width: 1761px) {
    :root {
        --base-font-size: 2.2rem;
    }
}

@media (min-width: 1921px) {
    :root {
        --base-font-size: 2.4rem;
    }
}

@font-face {
    font-family: dm sans;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/font-400.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: dm sans;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/font-700.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    margin: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html {
    font-size: 62.5%;
}

body {
    font-weight: 400;
    color: rgb(var(--black));
    font-size: var(--base-font-size);
    line-height: calc(var(--base-line-height));
    font-family: var(--font-family), sans-serif;
}

h3 {
    font-size: calc(var(--base-font-size) * var(--font-scale));
    line-height: calc(var(--base-line-height) - var(--line-scale));
    letter-spacing: calc(var(--base-letter-spacing) - var(--letter-scale));
}

h2 {
    font-size: calc(var(--base-font-size) * var(--font-scale) * var(--font-scale));
    line-height: calc(var(--base-line-height) - var(--line-scale) - var(--line-scale));
    letter-spacing: calc(var(--base-letter-spacing) - var(--letter-scale) - var(--letter-scale));
}

h1 {
    font-size: calc(var(--base-font-size) * var(--font-scale) * var(--font-scale) * var(--font-scale));
    line-height: calc(var(--base-line-height) - var(--line-scale) - var(--line-scale) - var(--line-scale));
    letter-spacing: calc(var(--base-letter-spacing) - var(--letter-scale) - var(--letter-scale) - var(--letter-scale));
}

a {
    color: inherit;
    text-underline-position: under;
    text-decoration-thickness: 0.2rem;
}

a:hover {
    text-decoration-thickness: 0.3rem;
}

img {
    display: block;
}

form {
    text-align: left;
}

input,
button {
    font-size: inherit;
    font-family: inherit;
}

button:not(:disabled) {
    cursor: pointer;
}

[type=email],
[type=submit] {
    width: 100% !important;
}

[type=email] {
    color: inherit;
    height: 7.2rem;
    padding: 0 3.1rem;
    transition: 300ms;
    border-radius: 1.8rem;
    border: 0.1rem solid rgb(var(--black));
}

[type=email]:focus-within {
    border-left-width: 2rem;
}

[type=email]:valid:not(:Placeholder-shown) {
    caret-color: rgb(var(--valid));
    border-color: rgb(var(--valid));
}

[type=email]:invalid:not(:Placeholder-shown) {
    caret-color: rgb(var(--invalid));
    border-color: rgb(var(--invalid));
}

.button {
    height: 7.2rem;
    padding: 0 3.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--white));
    background: rgb(var(--black));
    font-weight: 700;
    letter-spacing: 0.1rem;
    text-decoration: none;
    position: relative;
    transition: 300ms;
    transform: translate3d(0, 0, 0);
    border: 0.1rem solid rgb(var(--black));
}

.button:not(:disabled):before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border: 0.1rem solid rgb(var(--black));
    transition: 300ms;
}

.button:not(:disabled):hover:before {
    top: 0.6rem;
    left: -0.6rem;
    right: 0.6rem;
    bottom: -0.6rem;
}

.button-invert {
    filter: invert(100%);
}

label + input {
    margin: 0.9rem auto 0;
}

input + button {
    margin: 1.6rem auto 0 !important;
}