/*=============== THEME ===============*/
/*========== Variables Dark theme ==========*/
body.dark-theme{
    --first-color: hsl(31, 76%, 74%);
    --button-color: hsl(0, 0%, 24%);
    --button-color-alt: hsl(0, 0%, 28%);
    --title-color: hsl(0, 0%, 95%);
    --text-color: hsl(0, 0%, 75%);
    --body-color: hsl(0, 0%, 12%);
    --container-color: hsl(0, 0%, 16%);
    --border-color: hsl(0, 0%, 20%);
}

/*========== Button Dark/Light ==========*/
.change-theme {
    color: var(--title-color);
    font-size: 1.25rem;
    cursor: pointer;
}

/*========== 
    Color changes in some parts of 
    the website, in dark theme 
==========*/

.dark-theme .change-theme,
.dark-theme .nav__toggle,
.dark-theme .nav__shop,
.dark-theme .button--gray{
    color: hsl(0, 0%, 15%);
}

.dark-theme .scroll-header{
    box-shadow: 0 1px 4px hsla(0, 0%, 4%, .3);
}

.scroll-header .change-theme,
.scroll-header .nav__toggle,
.scroll-header .nav__shop{
    color: var(--title-color);
}

.dark-theme::-webkit-scrollbar{
    background: hsl(0, 0%, 30%)
}