@keyframes b-t {
    0% {
        transform: translateY(100vh);
    }
    100%{
        transform: translateY(0);
    }
}
@keyframes b-t-x {
    0% {
        transform: translateX(-100vw);
        flex: 0.0 ;
    }
 
    100%{
        transform: translateX(0vw);
        flex: 1.0;
    }
}
@keyframes b-t-x-out {
    0% {
        transform: translateX(0vw);
        flex: 1.0 ;
        
    }
 
    100%{
        transform: translateX(-100vw);
        flex: 0.0;
        display: none;
    }
}
@keyframes animation-box-out {
    0% {
        transform: translateY(0);
    }
    100%{
        transform: translateY(100vh);
    }
}
@keyframes animation_opacity {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        display: none;
    }
} 
@keyframes animation_opacity-in {
    0%{
        opacity: 0;
    }
    
    100%{
        opacity: 1;
    }
}
@keyframes qr-out {
    0%{
        transform: translateX(0%);
    }
    40%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-100%);
    }
}
@keyframes qr-in {
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(0);
    }
}
@keyframes wellcome {
    0%{
        transform: scale(0);
        opacity: 0;
    }
    70%{
        transform: scale(1);
        opacity: 1;
    }
     100%{
        transform: scale(1);
         opacity: 1;
     }
 
} @keyframes wellcome-2 {
    0%{
        transform: scale(0);
        opacity: 0;
    }
    65%{
        transform: scale(0);
        opacity: 0;
    }
   
     100%{
        transform: scale(1);
         opacity: 1;
     }
}
@keyframes mode-l {
    0%{
       
        left: 51%;
    }
    40%{
        
        left: 51%;
    }
    100%{
        background-color: #ffbc00;
        left: 0;
    }
}
@keyframes s-mode-l {
    0%{
        background-color: #181818;
        color: white;
        
    }
    40%{
        background-color: #181818;
         
    }
    100%{
        background-color: white;
        color:black  ;
         
    }
}
@keyframes s-mode-d {
    0%{
        background-color: white;
        color: black;
        
    }
    40%{
        background-color: white;
        
    }
    100%{
        background-color: #181818;
        color:white  ;
         
    }
}
@keyframes  mode-in {
    0%{
        color: black;
    }
    40%{
        color: black;
    }
    100%{
        color: white;
    }
}
@keyframes  mode-out {
    0%{
        color: white;
    }
    40%{
        color: white;
    }
    100%{
        color: black;
    }
}
@keyframes mode-d {
    0%{
         
        color: white;
        left: 0%;
    }
    40%{
        
        color: white;
        left: 0%;
    }
    100%{
        color: white;
        
        left: 51%;
    }
}
@keyframes out-loading {
    0%{
        backdrop-filter: blur(0px);
        transform: scale(1);
        opacity: 1;
    }
    100%{
        backdrop-filter: blur(10px);
        transform: scale(3);
        opacity: 0;
    }
}
@keyframes wellcome-3 {
    0%{
        transform: translateY(100vh);
        opacity: 0.0;
    }
    20%{
        transform: translateY(110vh);
        opacity: 0.0;
    }
   
     100%{
        transform: translateY(0vh);
         opacity: 1;
     }
}
@keyframes dot-1 {
    0%{
        transform: scale(0);
    }
    70%{
        transform: scale(1);
    }
     100%{
        transform: scale(1);
     }
}
@keyframes wave {
    0%{
        transform: scale(2);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes out-page {
    0%{
        transform: scale(1);
        opacity: 1;
    }
    60%{
        transform: scale(0.8);
        opacity: 0;
    }
    100%{
        transform: scale(0.8);
        opacity: 0;
    }
}
@keyframes in-page {
    100%{
        transform: scale(1);
        opacity: 1;
    }
    60%{
        transform: scale(0.8);
        opacity: 0;
    }
    0%{
        transform: scale(0.8);
        opacity: 0;
    }
}
.btn_t_a:hover{
    color: white;
    background-color: black;
}
.animation-c-s:hover{ 
    flex: 1.05;
  }
.post-animation-z:hover {
    transform: scale(1.01);
}
.btn_list_post:hover{
    background-color: rgb(242, 242, 242) !important;
}
.btn_t:hover{
    background-color: #343a40!important;
    color:#ffc107!important ;
}

.trasition-btn{
    transition: color 0.35s ease;
}
.c-btn:hover{
    background-color: white !important;
     color: #dc3545 !important;
     border: 0.7px #dc3545 solid !important;
}
.co-btn:hover{
    background-color: white !important;
     color: #007bff !important;
     border: 0.7px #007bff solid !important;
}
.co-btn_none-border:hover{
    background-color: white !important;
     color: #007bff !important;
     
}
.animation-edit-profile:hover{
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.22);
}
.co-btn-out:hover{
    background-color: white !important;
    color: #f93535 !important;
    border: 0.7px #f93535 solid !important;
}
.animation_like:hover{
    background-color: #f93535b3;
    color: #f93535;
}