@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

/*
#F14093 > button / alert
#7036D8 > main colour
#430B6C
#F6C124
#84EC02
#04D7E6
#FFFFFF
#FFFDEB
*/

:root {
    --brand-color-1: #f14093;
    --brand-color-2: #f6c124;
    --brand-color-3: #84ec02;
    --brand-color-4: #04d7e6;
    --brand-color-5-rgb: 112, 54, 216;
    --brand-color-5: rgba(var(--brand-color-5-rgb), 1);
    --brand-color-6: #430b6c;
    --brand-color-8: #7036d8;
    --brand-color-9: #430b6c;
    --brand-color-10: #000000;
    --brand-color-11: #430b6c;
    --brand-color-12: #ffffff;
    --brand-color-13: #fffdeb;
    --brand-color-14: #f14093;
    --brand-color-15: #7036d8;
    --brand-color-17: #ffffff;
    --brand-color-18: #fffdeb;
    --brand-color-19: #000000;
    --brand-color-20: #f14093;

    --brand-gradient-1: #430b6c;
    --brand-gradient-2: #7036d8;

    --popup-overlay-color-1: #430b6c80;
    --popup-overlay-color-2: #7036d880;

    --card-overlay-background-color: 112, 54, 216;
    --background-color: #fffdeb;

    --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: #f14093;

    --text-color: #000000;
    --text-color-contrast: var(--brand-color-12);

    --header-font-family: "Bitter", sans-serif;
    --body-font-family: "Noto Sans", sans-serif;

    --header-font-weight: 700;
    --font-weight-bold: 700;

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

    --button-color: #ffffff;
    --button-border-color: transparent;
    --button-background-color: #f14093;
    --button-hover-border-color: #f14093;

    --button-alt-color: #ffffff;
    --button-alt-border-color: transparent;
    --button-alt-background-color: #f14093;
    --button-alt-hover-border-color: #f14093;

    --button-background-color-alt: #f14093;

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

    --link-color: #7036d8;
    --link-color--alt: #f14093;
    --link-font-size: 1rem;

    --input-background-color: #fffdeb;

    --nav-icon-background-color: #7036d8;

    --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: #7036d8;
    --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: #fffdeb;
    --page-background-gradient: linear-gradient(
        180deg,
        #430b6c 0%,
        #7036d8 100%
    );
    --page-padding: 1rem;
    --page-padding-desktop: 3rem;

    --box-background-color: var(--brand-color-12);
    --box-background-color-alt: #7036d8;
    --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(67, 11, 108);
    --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: #fffdeb;

    --divider-color: #f14093;

    --category-cover-title-color: #7036d8;

    --add-category-cover-background-color: rgba(112, 54, 216, 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: #f6c124;

    --plyr-color-main: #7036d8;
    --plyr-font-family: var(--body-font-family);

    --hc-fold-title-color: #ffffff;
    --header-line-height: 1.3;
}