*{
    box-sizing: border-box;
}

body {
  background: #363062;
    min-height: 100vh;
    padding: 0 10px;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    background-attachment: fixed;
    
}
.bg-catgory-container-t1{
    background-color: #BEADFA;
}
.bg-catgory-t1{
background-color: #4D4C7d;
}
.bg-li-t1{
background-color: #F99417;
}
/* width */
::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: rgb(22, 18, 18);
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #a11f1f;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  * {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
  }
  .animation-fade-out{
    animation: fade 1s linear 200ms infinite;
  }
  .animation-fade-in{
    animation: fade 1s linear 0s 1 reverse;
  }
  .animation-go-in{
    animation: goIn 2s linear 10ms 1;
  }
  .animation-back-in{
    animation: backIn 2s linear 100ms 1;
  }
@keyframes fade {
  0%{
opacity: 100%;
  }
  100%{
opacity: 0%;
  }
}
@keyframes show {
  0%{
opacity: 0;
  }
  30%{opacity: 0;}
  100%{
opacity: 1;
  }
}
@keyframes backIn {
   0%{
    transform: translateY(-1530px);
      scale: .2;
    opacity: 0;}
  
  60% {transform: translateY(300px);
       scale: .4;}
  100%{opacity: 1;
       scale: 1;}
} 
@keyframes goIn {
  0%{
    opacity: 1;
    scale: 1;}
  
  60% {transform: translateY(300px);
       scale: .4;}
  100%{  transform: translateY(-1530px);
    scale: .2;
  opacity: 0;}
}