@import url("https://use.typekit.net/ylq7zlt.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Monda:wght@700&display=swap");

/*
green #aad920
off white #FAFFED
blue #218FCC
pink #F52570
black #000000
*/

:root {
    --brand-color-1: #f4426c;
    --brand-color-2: #f9b96c;
    --brand-color-3: #f9b96c;
    --brand-color-4: #7bc4d6;
    --brand-color-5-rgb: 87, 59, 143;
    --brand-color-5: rgba(var(--brand-color-5-rgb), 1);
    --brand-color-6: #1e8691;
    --brand-color-8: #1d759b;
    --brand-color-9: #6c6c8c;
    --brand-color-10: #412e6d;
    --brand-color-11: #412e6d;
    --brand-color-12: #ffffff;
    --brand-color-13: #effbff;
    --brand-color-14: #cef2ff;
    --brand-color-15: #82d5f3;
    --brand-color-17: #a7e3f9;
    --brand-color-18: #fff2de;
    --brand-color-19: #020a0a;
    --brand-color-20: #936096;

    --brand-gradient-1: #2c1d51;
    --brand-gradient-2: #7257a7;

    --popup-overlay-color-1: #0d4c6b80;
    --popup-overlay-color-2: #2191a580;

    --card-overlay-background-color: 114, 87, 167;
    --background-color: #1e8691;

    --shadow-color-rgb: 0, 0, 0;
    --shadow-color: rgb(var(--shadow-color-rgb));
    --shadow-color-light: rgba(var(--shadow-color-rgb), 0.3);
    --shadow-color-dark: rgba(var(--shadow-color-rgb), 0.7);

    --brand-danger-color: var(--brand-color-1);
    --brand-alert-color: #f52570;

    --text-color: var(--brand-color-10);
    --text-color-contrast: var(--brand-color-12);

    --header-font-family: "nagel-variable", sans-serif;
    --body-font-family: "din-2014", sans-serif;

    --header-font-weight: 500;
    --font-weight-bold: 500;

    --button-font-family: var(--header-font-family);
    --button-font-weight: 500;
    --button-font-size: 1.125rem;
    --font-offset-top: 0px;

    --button-color: var(--brand-color-12);
    --button-border-color: transparent;
    --button-background-color: var(--brand-color-5);
    --button-hover-border-color: var(--brand-color-5);

    --button-alt-color: var(--brand-color-10);
    --button-alt-border-color: transparent;
    --button-alt-background-color: var(--brand-color-12);
    --button-alt-hover-border-color: var(--brand-color-12);

    --button-background-color-alt: var(--brand-color-12);

    --button-background-color-danger: var(--brand-danger-color);
    --button-background-color-alert: var(--brand-alert-color);

    --link-color: var(--brand-color-8);
    --link-color--alt: var(--brand-color-17);
    --link-font-size: 1rem;

    --input-background-color: var(--brand-color-18);

    --nav-icon-background-color: var(--brand-color-5);

    --dropdown-background-color: var(--brand-color-12);
    --dropdown-text-color: var(--text-color);
    --dropdown-link-text-color: var(--text-color);
    --dropdown-button-text-color: var(--text-color);

    --dropdown-alt-background-color: var(--brand-color-5);
    --dropdown-alt-text-color: var(--text-color-contrast);
    --dropdown-alt-link-text-color: var(--text-color-contrast);
    --dropdown-alt-button-text-color: var(--text-color-contrast);

    --page-background-color: var(--brand-color-13);
    --page-background-gradient: linear-gradient(
        180deg,
        var(--brand-gradient-1) 0%,
        var(--brand-gradient-2) 100%
    );
    --page-padding: 1rem;
    --page-padding-desktop: 3rem;

    --box-background-color: var(--brand-color-12);
    --box-background-color-alt: var(--brand-color-8);
    --box-padding-small-topbottom: 1.25rem;
    --box-padding-small-leftright: 1.25rem;
    --box-padding-large-topbottom: 1.85rem;
    --box-padding-large-leftright: 1.5625rem;
    --box-item-margin: 1rem;
    --box-border-radius: 10px;
    --box-margin-bottom: 5px;

    --box-shadow-color: rgb(0, 37, 64);
    --box-shadow-opacity: 0.15;
    --box-shadow-horizontal-length: 0;
    --box-shadow-vertical-length: 5px;
    --box-shadow-blur: 0;

    --card-ratio-portrait: (89/63.5);
    --card-ratio-landscape: (63.5/89);
    --card-gap: 1rem;
    --card-width: 300px;
    --card-height: 420px;

    --deck-width-small: 230px;
    --deck-width-large: 300px;
    --deck-border-radius: 10px;

    --element-edit-background-color: var(--brand-color-13);

    --divider-color: var(--brand-color-14);

    --category-cover-title-color: var(--brand-color-5);

    --add-category-cover-background-color: rgba(41, 171, 186, 0.5);

    --header-z-index: 999;

    --base-max-width: 1000px;
    --form-max-width: var(--base-max-width);
    --form-small-width: 700px;
    --categories-max-width: var(--base-max-width);
    --quests-max-width: var(--base-max-width);
    --box-max-width: var(--base-max-width);

    --quest-progress-background: var(--brand-color-2);

    --plyr-color-main: var(--brand-color-5);
    --plyr-font-family: var(--body-font-family);

    --hc-fold-title-color: #000000;
}