@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&display=swap');
:root{
--orange: #ff7800;
--black: #27272f;
--light-color: #666;
--box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
--border: .2rem solid rgba(0,0,0,.1);
--outline: .1rem solid rgba(0,0,0,.1);
--outline-hover: 1rem solid var(--black);
}
html{
scroll-behavior: smooth;
scroll-padding-top:  7rem;
}
body, nav{
font-family: marcellus sc,serif;
background-color: var(--black);
}

#sidebar{
width: 30%;
padding: 20px;
float: left;
position: sticky;
top: 0;
}

#products{
width: 70%;
padding: 10px;
margin: 0;
float: right;
}
/*.card{
width: 255px;
height: 300px;
border: none;
margin-bottom: 1rem;
}
.card-img-top{
width: 255px;
height: 200px;
border-radius: 10px;
}*/
/*    #orange,select{
color: lightgray;
}*/
/*.thbg:hover{
-webkit-box-shadow: 1px 1px 25px 8px #000000;
box-shadow: 1px 1px 25px 8px #000000;
border-radius: 5px;
}*/
.remove{
cursor: pointer;
}
.remove:hover{
color: ghostwhite;
}
.form-group>label:hover{
color: ghostwhite;
cursor: pointer;
}
.form-check>label:hover{
color: ghostwhite;
cursor: pointer;
}
/******************************************/
.clearfilter:hover{
    color: orange !important;
}
/******************************************/

.backg {

  background-color: initial;
  background-image: linear-gradient(#464d55, #25292e);
  border-radius: 8px;
  border-width: 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1),0 3px 6px rgba(0, 0, 0, .05);
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  
  font-family: expo-brand-demi,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 16px;
  word-wrap: break-word;
  justify-content: center;
  line-height: 1;
  margin: 0;
  outline: none;
  overflow: hidden;
  
  text-align: center;
  text-decoration: none;
  transform: translate3d(0, 0, 0);
  transition: all 150ms;
  vertical-align: baseline;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.backg:hover {
  box-shadow: rgba(0, 1, 0, .2) 0 2px 8px;
  opacity: .85;
}

.backg:active {
  outline: 0;
}

.backg:focus {
  box-shadow: rgba(0, 0, 0, .5) 0 0 0 3px;
}


/******************************************/
@media(min-width:992px) and (max-width:1199px){
#search{
width: 300px;
padding: 5px;
padding-left: 20px;
}
.search-nav-item{
margin-left: 200px;
width: 350px;
}
.fa-user-o{
margin-left: 160px;
}
.text{
display: none;
}
#sidebar{
width: 30%;
padding: 20px;
float: left;
}
#products{
width: 70%;
padding: 10px;
margin: 0;
float: right;
}
.card{
width: 200px;
height: 330px;
border: none;
}
.card-img-top{
width: 200px;
height: 200px;
border-radius: 10px;
}
.fa-plus,.fa-minus{
font-size: 12px;
}
.sign{
height: 25px;
}
.price{
width: 99px;
}
.filter,#mobile-filter{
display: none;
}
}
/****************/

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #626266; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: crimson; 
}
/******************/



/******************/
@media(min-width:768px) and (max-width:991px){
#search{
width: 300px;
padding: 5px;
padding-left: 20px;
}
.search-nav-item{
margin-left: 60px;
width: 350px;
}
.fa-user-o{
margin-left: 80px;
}
.text{
display: none;
}
#sidebar{
width: 35%;
padding: 20px;
float: left;
}
#products{
width: 65%;
padding: 10px;
margin: 0;
float: right;
}
.card{
border: none;
}
.filter,#mobile-filter{
display: none;
}
}
@media(min-width:576px) and (max-width:767px){
.text{
display: none;
}
.search-nav-item{
margin-left: 35px;
width: 270px;
}
#search{
width: 240px;
padding: 5px;
padding-left: 20px;
}
.fa-search{
padding: 3px;
font-size: 18px;
}
#sidebar{
width: 40%;
padding: 20px;
float: left;
}
#products{
width: 60%;
padding: 10px;
margin: 0;
float: right;
}
.card{
border: none;
}
#off{
padding-left: 2px;
}
#sorting span,#res{
font-size: 14px;
}
.filter,#mobile-filter{
display: none;
}
}
@media(max-width:575px){
.search-nav-item{
margin: 0;
width: 100%;
margin-top: 10px;
}
#search{
width: 80%;
padding-left: 10px;
margin-top: 10px;
padding-right: 10px;
}
.fa-search{
padding: 10px;
font-size: 18px;
}
#sidebar{
display: none;
}
.filter{
margin-left: 70%;
margin-top: 2%;
}
#sorting,#res{
font-size: 12px;
margin-top: 2%;
}
}