html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px; /* use this for rem responsive calc, while body tag for default size */
    }
}

html {
    position: relative;
    min-height: 100%;
}

/*CSS global variables*/
:root {
    --font-family-poppins: 'Poppins', sans-serif;
    --font-family-default: var(--font-family-poppins);
    /*font sizes*/
    --font-size-medium: 14px;
    --font-size-small: 12px;
    --font-size-smaller: 11px;
    --font-size-large: 16px;
    /*line heights*/
    --line-height-default: 20px;
    --line-height-small: 16px;
    --line-height-large: 24px;
    /*font weights*/
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    /*colors*/
    --crimson-blaze: #EF3340;
    --crimson-blaze-hover: #dc2f3b;
    --black: #212121;
    --black-hover: #373737;
    --black-rgba-80: rgba(33, 33, 33, 0.80);
    --white: #FFFFFF;
    --subdued: #717171;
    --grey-medium: #CECECE;
    --grey-light: #EBEBEB;
    --cotton-cloud: #F8F5F5;
    --whispering-blush: #FFF0F0;
    --whispering-blush-hover: #f5e6e6;
    --cotton-ball: #F0F3FF;
    --red-bud: #AB2E56;
    --red-bud-hover: #b44367;
    --crown-jewels: #966BAA;
    --tanzine: #7580E0;
    --magenta-crayon: #FF55A3;
    --jade-green: #75AEA0;
    --green-tea: #92AA6B;
    --sea-serpant: #4CC5CD;
    --exotic-intense: #B87171;
    --buttery-salmon: #FFAF9E;
    --chanterelles: #FFC56F;
    --queen-blue: #436995;
    --ayame-iris: #763A6C;
    --magenta-crayon-v2: #FF77B5;
    --sea-serpant-v2: #67CED5;
    --chanterelles-v2: #FFD18C;
    --avatar-basic: #F0F3FF;
    --border-dark: #717171;
    --border-medium: #CECECE;
    --border-light: #EBEBEB;
    --rgba-hover-light: rgba(0, 0, 0, 0.08);
    --rgba-hover-lighter: rgba(0, 0, 0, 0.04);
    --rgb-white: 255, 255, 255;
    --rgb-whispering-blush: 255, 240, 240;
    --rgb-grey-light: 235, 235, 235;
    --rgb-cotton-ball: 240, 242, 253;
    /*borders*/
    --border-radius-default: 8px;
    --border-radius-small: 4px;
    --border-radius-smaller: 2px;
    --border-radius-round: 80px;
    /*shadows*/
    --shadow-button: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
    --shadow-button-hover: 0px 2px 16px 0px rgba(33, 43, 54, 0.08), 0px 0px 0px 1px rgba(6, 44, 82, 0.10);
    --shadow-button-pressed: 0px 2px 0px 0px rgba(0, 0, 0, 0.05) inset;
    --shadow-dropdown: 0px 0px 1px 0px rgba(0, 0, 0, 0.20), 0px 26px 80px 0px rgba(0, 0, 0, 0.20);
    --shadow-modal: 0px 0px 1px 0px rgba(0, 0, 0, 0.20), 0px 26px 80px 0px rgba(0, 0, 0, 0.20);
    --shadow-stage-header: 0px 0px 1px 0px rgba(0, 0, 0, 0.25), 0px 2px 1px 0px rgba(0, 0, 0, 0.05);
    /*spacing*/
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    /*others*/
    --breakpoint-md: 768px;
    --animation-spring-gentle: cubic-bezier(0.47, 0, 0.23, 1.38);
    --animation-spring-gentler: cubic-bezier(0.47, 0, 0.33, 1.22);
}

@media (max-width: 768px) {
    :root {
        /*font sizes*/
        --font-size-medium: 12px;
        --font-size-small: 11px;
        --font-size-smaller: 10px;
        --font-size-large: 14px;
        /*line heights*/
        --line-height-default: 16px;
        --line-height-small: 14px;
        --line-height-large: 20px;
    }
}

/*Fonts*/
/*@font-face{
    font-family: Poppins;
    src: url(../fonts/poppins/Poppins-Light.ttf);
    font-weight: 300;
}
@font-face {
    font-family: Poppins;
    src: url(../fonts/poppins/Poppins-Regular.ttf);
    font-weight: 400;
}
@font-face {
    font-family: Poppins;
    src: url(../fonts/poppins/Poppins-Medium.ttf);
    font-weight: 500;
}
@font-face {
    font-family: Poppins;
    src: url(../fonts/poppins/Poppins-SemiBold.ttf);
    font-weight: 600;
}*/

/*These are default typography and color properties*/
body {
    font-family: var(--font-family-default);
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
    color: var(--black);
    background-color: var(--cotton-cloud);
    margin: 0;
    --sidebar-width: 231px;
    --topnav-minheight: 56px;
    --topnav-sidebar-space: 16px;
}



/* Media query for responsive design */
@media (max-width: 768px) {
    .sidebar-main {
        width: 100px; /* Width for smaller screens */
    }

        .sidebar-main.minimized {
            width: 50px; /* Minimized width for smaller screens */
        }

    .search-filter-collapse-icon {
        padding: 5px; /* Adjust padding for smaller screens */
    }

    .nav-link span {
        font-size: 12px; /* Adjust font size for nav links */
    }
}



/*EXPERIMENT*/