/*-- GLOBAL SETUP ------------------*/
* {
  font-family: 'Amazon Ember', sans-serif;
  font-weight: 300;
  font-size: 12px;
  padding: 0;
  margin: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/*------------------------------------------------------------------------------*/
/*-- GENERAL EFFECTS TO REUSE part 1 ------------------*/
.boldFont{
    font-weight: 700;
}

.regFont{
    font-weight: 400;
}

.fontSize10{
    font-size: 10px;
}

.fontSize13{
    font-size: 13px;
}

.fontSize14{
    font-size: 14px;
}

.fontSize16{
    font-size: 16px;
}


.fontSize18{
    font-size: 18px;
}

.fontSize20{
    font-size: 20px;
}

.fontSize24{
    font-size: 24px;
}

.fontSize28{
    font-size: 28px;
}

.centerAlignment{
    align-self: center;
}

/*------------------------------------------------------------------------------*/

.SearchBox{
    flex: 3 0 80%;
    font-weight: 400;
    font-size: 15px;
}

.department_bttn{
    flex: 1 0 0;
    border: none;
    padding: 8px;
    border-radius: 3px 0 0 3px;
}

.YLW_SRH_BTN{
    background-color:#febd69 ;
    padding: 0px 10px;
    border: none;
    border-radius: 0 3px 3px 0;
    flex: 1 0 0;
}

.YLW_SRH_BTN:hover{
    background-color:#f3a847 ;
}

.searchForm{
    height: 40px;
    display: flex;
}

.Language{
     align-self: center;
}

.cartCounter{
    color: #f3a847;
    font-weight: bold;
    font-size: 200%;
    position: relative;
    Left:25%;
    bottom:40%;

}

.SearchBox{
    padding-left: 10px;
    /*these two below removes the focus effect on searchbox*/
    outline: none;
    border: none;
    
}

.SearchBox::placeholder{
/*mimics that text style in amazon*/
  color: rgb(17, 17, 17);
  font-weight: 400;
  opacity: 0.6;
  font-size: 15px;
}

.searchForm:focus-within {
  border-color: #ff9900; 
  box-shadow: 0 0 2px 5px #ff9900;
  border-radius: 5px;
}

/* -ICONS---- */
.Logo-icon {
    zoom: 50%;
}

.GPS-icon{
    zoom: 50%;
}

.Search-icon{
    zoom: 100%;
}

.FlagEmoji{
    zoom: 150%;
}

.Cart-icon{
    zoom: 75%;
    position: relative;
    Right:15%;
}

.Ham-icon{
    zoom: 50%;
}

.downTextColor_DARK{
    color: #666666;
}

.downTextColor_GREY{
    color: #a7acb2;
}

/* -SMALL ANNOYING ADJUSTMENTS/BAND AID FIXES---- */
.moveCounteryAbit{
    position: relative;
    left: 25%;
}

.moveGPSDownAbit{
    position: relative;
    Top: 35%;
    right: 2%;
}

.moveCartTextAbit{
    position: relative;
    Right:10%;
}

/*------------------------------------------------------------------------------*/
/*-- TAGS ------------------*/
/*-- HEADER ------------*/
header{
    display: flex;
    gap: 20px;
    font-size: 12px;
    padding: 5px 20PX;
    justify-content: space-around;
    /* align-items:center; */
    background-color: #131921;
    color: #ffffff;
}

/*color: rgb(17, 17, 17); 15px*/

header .searchForm{
    flex: 3 0 ;
    display: flex;
}

header a{
    text-decoration: none;
    color: #ffffff;
    padding: 5px;
}

header a:hover{
    /* this fixes the jumpy or jittery moves when ever i hove over them */
    /* border: 1px solid white; */
    box-shadow: inset 0 0 0 1px white;
}

/*-- NAV ------------------*/
nav, nav ul{
    display: flex;
    background-color: #232f3e;
    color: #ffffff;
}

nav ul{
    list-style-type: none;
}

nav ul a{
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
}

nav ul li{
    padding: 10px 5px;
    margin: 0 10px;
}

nav ul li:hover{
    /* border: 1px solid white; */
    box-shadow: inset 0 0 0 1px white;
}

a{
    text-decoration: none;
    color: #2162a1;
}

button{
    border-radius: 20px;
    border: transparent;
    padding: 10px;
}

/*-- Footer ------------------*/
footer{
    display: flex;
    padding: 5px 20PX;
    justify-content: space-around;
    background-color: #131921;
    color: #ffffff;
}