* {
    box-sizing: border-box;
    /* outline: 1px solid red; */
}

:root {
    /* Background Color */
    --body-bg-color: rgb(255, 255, 255);


    /* Navbar ------------------------------------------------- */
    --navbar-bg-color: white;
    --nav-shadow: rgba(0, 0, 0, 0.214);
    --nav-hover-bg-color: white;
    --nav-hover-text-color: black;

    /* Hover settings */
    --hover-text-color: rgb(0, 0, 0);
    --hover-bg-color: rgb(255, 255, 255);

    /*Nav link border color */
    --nav-border-color: 2px solid light-grey;

    /* Toggler icon */
    --nav-toggler-icon: brightness(-9) contrast(0) saturate(0);


    /* Dropdown +++++++++++++++++++++++++++++++++++++++ */
    --nav-dropdown-menu-bg: white;
    --nav-dropdown-menu-text-color: black;
    --nav-dropdown-menu-shadow: rgba(0, 0, 0, 0.339);
    /* Dropdown hover  */
    --nav-dropdown-menu-hover-txt: rgba(106, 106, 106, 0.813);



    /* Theme swither */
    /* Slider */
    --navbar-theme-bg-sli-color: light-grey;
    --navbar-theme-bd-sli-color: #414141;
    /* Slider Before */
    --navbar-theme-sli-bf-color: rgb(255, 255, 255);
    --navbar-theme-bg-sli-bf: rgb(0, 0, 0);
    /* Slider checked */
    --navbar-theme-sli-boxshadow: rgba(0, 0, 0, 0.593);
    --navbar-theme-sli-bd: #000000;

   
    
    /* ACTIVATE NOTIFICATIONS SLIDER */
    --cnt-slide-off-background: rgb(41, 41, 41);
    --cnt-slide-off-element:    white;
    --cnt-slide-on-background: white;
    --cnt-slide-on-element:    rgb(3, 3, 3);
    



    /* OFFCANVAS ------------navbar-------- --------------------------------*/
    --ofc-text-color: black;
    /* Header text */
    --ofc-text-color-header: rgba(23, 23, 23, 0.788);


    /* buttons */
    --ofc-btns-color: black;
    

    /* Buttons hover */
    --ofc-btns-hover-color: black;
    --ofc-btns-hover-shadow: rgba(126, 126, 126, 0.8);

    /* Menu Shadows */
    --ofc-menu-shadows: rgba(255, 255, 255, 0.233);
    --ofc-menu-shadows-glow: rgba(62, 62, 62, 0.482);


    /* Menu borders */
    --ofc-menu-border: 4px solid #565653;
    
    /* navlink  */
    --ofc-nlink-bg-color: rgba(255, 255, 255, 0.277);
    --ofc-nlink-text: black;
    --ofc-nlink-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);


    /* Navlink hover */
    --ofc-nlink-shadow-hover: 0px 2px 5px rgba(37, 37, 37, 0.62);
    --ofc-nlink-outline: 2px solid rgba(0, 0, 0, 0.108);



    /* Navlink active */
    --ofc-nlink-active-color: black;
    --ofc-nlink-active-shadow: rgba(255, 255, 255, 0.8);



    /* Offcanvas-header */
    --ofc-header-bg: white;
    --ofc-header-shadow: rgba(255, 255, 255, 0.5);


    /* Background */
    --ofc-bg-color: rgba(255, 255, 255, 0.481);

    /* Border */
    --ofc-border-color: black;



    /* Container -------------------------------------------------------------- */
    --cnt-text-color: black;

    /* border color */
    --cnt-border-color: black;

    /* Profile picture */
    --cnt-propic-shadow: rgba(0, 0, 0, 0.5);





    /* Table-elements  +++++++++++++++++++++++++++++++++++++++++++++++++  */
    --cnt-tabelements-shadow: rgba(0, 0, 0, 0.5);
    --cnt-tabelements-td-border: rgb(239, 239, 239);
    --cnt-background-color-thead: rgba(248, 245, 245, 0.110);

    
    /* tbody tr even background */
    --cnt-tabelements-even: #e7e7e7a5;
    
    /* tbody tr odd background */
    --cnt-tabelements-odd: rgba(195, 195, 195, 0.656);
    
    /* tbody tr hover background */
    --cnt-tabelements-hover: rgb(168, 168, 168);
    
    /* Compression Set */
    --cnt-compression-color: rgb(255, 255, 255);
    --cnt-compression-bg: rgb(0, 0, 0);


    /* Catalogue cards */
    --cnt-image-gradient: rgba(255, 255, 255, 0.588);
    --cnt-information-date-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --cnt-information-date-shadow-mobile: 0 8px 16px -8px rgba(0, 0, 0, 0.15);

    --cnt-information-date-shadow-hover: 0 8px 18px rgba(0, 0, 0, 0.2);

    }



body.dark {
    /* Background Color */
    /* #2b2a27 ++ chiaro */
    /* #565653 + chiaro */
    /* #100f0c + scuro */
    --body-bg-color: black;
    /* --body-bg-color: #100f0c; */
 



    /* Navbar ------------------------------------------------- */
    --nav-bg-color: rgba(0, 0, 0, 0.525);
    --nav-shadow: rgba(255, 255, 255, 0.441);
    --nav-text-color: rgb(255, 255, 255);

    /* Hover settings */
    --nav-hover-text-color: rgb(255, 255, 255);
    --nav-hover-bg-color: rgb(0, 0, 0);

    /*Nav link border color */
    --nav-border-color: 2px solid rgba(0, 0, 0, 0.589);

    /* Toggler icon */
    --nav-toggler-icon: brightness(9) contrast(1.2) saturate(1.5);



    /* Dropdown +++++++++++++++++++++++++++++++++++++++ */
    --nav-dropdown-menu-bg: rgb(0, 0, 0);
    --nav-dropdown-menu-text-color: rgb(255, 255, 255);
    --nav-dropdown-menu-shadow: rgba(255, 255, 255, 0.339);
    /* Dropdown hover  */
    --nav-dropdown-menu-hover-txt: rgba(171, 171, 171, 0.773);




    /* Theme swither */
    /* Slider */
    --navbar-theme-bg-sli-color: light-grey;
    --navbar-theme-bd-sli-color: #ffffff;
    /* Slider Before */
    --navbar-theme-sli-bf-color: rgb(0, 0, 0);
    --navbar-theme-bg-sli-bf: rgb(255, 255, 255);
    /* Slider checked */
    --navbar-theme-sli-boxshadow: rgba(255, 255, 255, 0.8);
    --navbar-theme-sli-bd: #a2a2a2;
    

    /* ACTIVATE NOTIFICATIONS SLIDER */
    --cnt-slide-off-background: white;
    --cnt-slide-off-element:    rgba(15, 15, 15, 0.768);
    --cnt-slide-on-background: rgb(15, 15, 15);
    --cnt-slide-on-element:    white;

    

    /* OFFCANVAS ------------navbar-------- --------------------------------*/
    --ofc-text-color: rgb(255, 255, 255);
    /* Header text */
    --ofc-text-color-header: rgba(181, 180, 180, 0.591);


    /* buttons */
    --ofc-btns-color: rgb(255, 255, 255);

    /* Buttons hover */
    --ofc-btns-hover-color: rgb(255, 255, 255);
    --ofc-btns-hover-shadow: rgba(0, 0, 0, 0.8);

    /* Menu Shadows */
    --ofc-menu-shadows: rgba(0, 0, 0, 0.600);
    --ofc-menu-shadows-glow: rgba(141, 139, 139, 0.5);


    /* Menu borders */
    --ofc-menu-border: 4px solid #565653;



    /* navlink  */
    --ofc-nlink-bg-color: rgba(0, 0, 0, 0.402);
    --ofc-nlink-text: rgb(255, 255, 255);
    --ofc-nlink-shadow: 0px 1px 3px rgba(26, 25, 25, 0.532);


    /* Navlink hover */
    /* --ofc-nlink-shadow-hover:0px 2px 5px rgba(255, 255, 255, 0.8); */

    --ofc-nlink-outline: 2px solid rgba(65, 65, 65, 0.121);



    /* Navlink active */
    --ofc-nlink-active-color: rgb(255, 255, 255);
    --ofc-nlink-active-shadow: rgba(0, 0, 0, 0.8);

    /* Offcanvas-header */
    --ofc-header-bg: rgb(0, 0, 0);
    --ofc-header-shadow: rgba(255, 255, 255, 0.5);

    /* Offcanvas-header h5 */

    /* Background */
    --ofc-bg-color: rgba(0, 0, 0, 0.481);

    /* Border */
    --ofc-border-color: rgb(255, 255, 255);



    /* Container -------------------------------------------------------------- */
    --cnt-text-color: rgb(255, 255, 255);

    /* border color */
    --cnt-border-color: rgb(255, 255, 255);

    /* Profile picture */
    --cnt-propic-shadow: #ffffff42;





    /* Table-elements  +++++++++++++++++++++++++++++++++++++++++++++++++  */
    --cnt-tabelements-shadow: rgba(255, 255, 255, 0.5);
    --cnt-tabelements-td-border: rgb(0, 0, 0);
    --cnt-background-color-thead: rgba(0, 0, 0, 0.110);


    
    /* tbody tr even background */
    --cnt-tabelements-even: rgba(52, 51, 51, 0.824);
    
    /* tbody tr odd background */
    --cnt-tabelements-odd: rgba(31, 31, 31, 0.824);
    
    /* tbody tr hover background */
    --cnt-tabelements-hover: rgb(126, 126, 126);
    
    /* Compression Set */
    --cnt-compression-color: rgb(0, 0, 0);
    --cnt-compression-bg: rgb(255, 255, 255);

    /* Homepage elements */
    --cnt-hp-image-gradient: rgba(255, 255, 255, 0.588);    
    --cnt-hp-information-date-shadow: 0 4px 12px rgba(246, 242, 242, 0.016);
    

    /* Catalogue cards */
    --cnt-image-gradient: rgba(255, 255, 255, 0.588);    
    --cnt-information-date-shadow: 0 4px 12px rgba(246, 242, 242, 0.016);
    --cnt-information-date-shadow-mobile: 0 4px 12px rgba(163, 159, 159, 0.292);
    --cnt-information-date-shadow-hover: 0 8px 18px rgba(250, 246, 246, 0.043);


}


main {

    flex-grow: 1;

}