@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400&display=swap');

@font-face {
    font-family: 'Font Light';
    font-style: normal;
    font-weight: normal;
    src: url("../woff/productsans-light-19.woff") format("woff");
}
@font-face {
    font-family: 'Font Thin';
    font-style: normal;
    font-weight: normal;
    src: url("../woff/productsans-thin-19.woff") format("woff");
}
@font-face {
    font-family: 'Font Medium';
    font-style: normal;
    font-weight: normal;
    src: url("../woff/productsans-medium-19.woff") format("woff");
}
@font-face {
    font-family: 'Font Regular';
    font-style: normal;
    font-weight: normal;
    src: url("../woff/productsans-regular-19.woff") format("woff");
}
@font-face {
    font-family: 'Font Bold';
    font-style: normal;
    font-weight: normal;
    src: url("../woff/productsans-bold-19.woff") format("woff");
}

:root {
    --color-base-1: #1e144b;
    --color-base-2: #3cb5a1;
    --color-card-title: var(--color-base-1);
    --color-card-text: #bcbcbc;
    --color-card-border: var(--color-base-2);
    --color-card-background: #edf8f7;
    --color-card-arrow: var(--color-base-2);
    --color-card-arrow-hover: var(--color-base-1);
    --color-card-details: var(--color-base-1);
    --color-card-cta: var(--color-base-1);

    --color-line-start: var(--color-base-1);
    --color-line-end: var(--color-base-2);

    --color-cta-text: var(--color-base-1);

    --color-back-button: var(--color-base-1);
    --color-back-button-hover: var(--color-base-2);


    --type-regular: 'Font Regular', sans-serif;
    --type-thin: 'Font Thin', sans-serif;
    --type-medium: 'Font Medium', sans-serif;
    --type-bold: 'Font Bold', sans-serif;
    --type-light: 'Font Light', sans-serif;

    --type-body: 'Nunito', sans-serif;
    --type-title: 'Nunito', sans-serif;
    --type-subtitle: var(--type-regular);
    --type-cta: var(--type-regular);
    --type-heading: var(--type-thin);

    --type-card-text: var(--type-medium);
    --type-quote-text: var(--type-thin);
    --type-quote-name: var(--type-bold);
    --type-quote-company: var(--type-regular);

    --type-img-caption: var(--type-regular);

    --type-attendee-name: var(--type-medium);
    --color-attendee-name: var(--color-base-1);

    --type-attendee-bio: var(--type-regular);
    --color-attendee-bio:var(--color-base-1);

    --type-datelocation: var(--type-thin);


}

.line-start-color:before {
    background-color: var(--color-line-start)
}

.line-end-color:after {
    background-color: var(--color-line-end)
}