/*=============== THEME ===============*/

/*========== Variables Dark theme ==========*/
body.dark-theme{
   --title-color: hsl(230, 48%, 85%);
   --text-color: hsl(230, 16%, 70%);
   --border-color: hsl(230, 12%, 18%);
   --body-color: hsl(230, 12%, 8%);
   --container-color: hsl(230, 12%, 12%);
}

/*========== 
	Color changes in some parts of 
	the website, in dark theme
==========*/
.dark-theme .shadow-header{
	box-shadow: 0 2px 16px hsla(0, 0%, 0%, .4);
}

.dark-theme .nav__menu{
	box-shadow: 0 -8px 32px hsla(0, 0%, 0%, .4);
}

.dark-theme .scrollup{
	box-shadow: 0 2px 8px hsla(0, 0%, 0%, .4);
}

.dark-theme .search,
.dark-theme .login{
	background-color: hsla(230, 12, 8, .6);
}

.dark-theme::-webkit-scrollbar{
	background-color: hsl(230, 16%, 15%);
	
	&-thumb{
		 background-color: hsl(230, 16%, 25%);
		 
		 &:hover{
			  background-color: hsl(230, 16%, 35%);
		 }
	}
}