@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap");
/** This file is just a placeholder **/

/*
#411056;
#FF83FF;
#FFCFDD;
#FFFF00;

#F3EAF5;
#A92DFF;
#FE9A9C;
#80DCE8;
*/

:root {
    --brand-color-1: #fa5b7b;
    --brand-color-2: #ffff00;
    --brand-color-3: #fdc77a;
    --brand-color-4: #00baa9;
    --brand-color-5-rgb: 41, 171, 186;
    --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: #411056;
    --brand-color-11: #06284d;
    --brand-color-12: #ffffff;
    --brand-color-13: #effbff;
    --brand-color-14: #cef2ff;
    --brand-color-15: #82d5f3;
    --brand-color-17: #a7e3f9;
    --brand-color-18: #d9f4ff;
    --brand-color-19: #031931;
    --brand-color-20: #936096;

    --brand-gradient-1: #0d4c6b;
    --brand-gradient-2: #2191a5;

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

    --card-overlay-background-color: 45, 125, 184;
    --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: var(--brand-color-2);

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

    --header-font-family: "Onest", sans-serif;
    --body-font-family: "Onest", sans-serif;

    --body-font-weight: 200;
    --header-font-weight: 800;
    --font-weight-bold: 700;

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

    --button-color: var(--text-color);
    --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 gradient background */
    --color-bg1: rgb(169, 45, 255);
    --color-bg2: rgb(65, 16, 86);
    --color1: 255, 131, 255;
    --color2: 254, 154, 156;
    --color3: 128, 220, 232;
    --color4: 128, 220, 232;
    --color5: 169, 45, 255;
    --color-interactive: 128, 220, 232;
    --circle-size: 110%;
    --blending: hard-light;

    /* --color-1: rgb(65, 16, 86);
    --color-2: rgb(255, 131, 255);
    --color-3: rgb(255, 207, 221);
    --color-4: rgb(255, 255, 0);
    --color-5: rgb(243, 234, 245);
    --color-6: rgb(169, 45, 255);
    --color-7: rgb(254, 154, 156);
    --color-8: rgb(128, 220, 232); */
}