#statLineShopping {
  display: flex;

}

#shoppingStats {
  flex-direction: column;
  background-color: var(--borderColor); 
  border-radius:15px;

  margin-inline: 3% auto;
  display: inline-block;
  margin-top: 50px;
  padding: 0.7em;
 
}

.StatDiv{
  font-size: 1.3em;
   color: var(--fontColorLight);
}
.stats {
  color: var(--fontColorLight);
}

#refreshBtn {
  background-color: var(--borderColor);
  align-self:self-end;
  padding: 1em;
  border-radius: 50px;
  border: none;
  margin-right: 5%;
  margin-top: 5%;
}

.refreshBtn { 
  position: relative;
  animation: refreshBtnMove 2s forwards;
  border-style: none;
}

@keyframes refreshBtnMove {
  0%   {transform:rotate(0deg) }

  100% { transform:rotate(-180deg)  }
}



#shoppingcartSvgBtn {
 padding-top: 7px;
 padding-left: 1em;
 background-color: transparent;
 border-style: none;
 display: flex;
 align-items: flex-end;
 /*change size of svg in html*/
 margin-bottom: -1px;
}

.shoppingcartSvgBtn { 
  position: relative;
  animation: cartMovingStart 3s forwards;
  border-style: none;
}

@keyframes cartMovingStart {
  0%   { left:0px; }
  20%  { left:-2.5%;  transform: rotate(0deg); }
  50%  { left:110%; transform: rotate(-30deg); opacity: 100;  }
  55%  { left:110%; transform: rotate(0deg);  opacity: 0;  }
  56%  { left:-20%; opacity: 0; animation-duration: 3s; }
  57%  { left: -20%; opacity: 0; animation-duration: 3s;}
  96% { left:-1px; opacity: 100; transform: rotate(5deg); }
  98% {left:-1px; opacity: 100;   }
  100% { left:0px; opacity: 100; }
}

/*........ Desktops ............*/
@media (min-width: 1025px) {

  .StatDiv{
    font-size: 1.5em;
  }

  #shoppingStats {
    margin-inline: 25% auto;
    margin-top: 20px;
    padding: 1em;
  }
  #refreshBtn {

    padding: 1.5em;


    margin-right: 25%;
    
  }
}