.loader{
    background-color: white;
    position: fixed;
    top:-1px;
    left:0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 25px;

    animation: closeUp;
    animation-fill-mode: forwards;
    animation-duration: 0.75s;
    animation-delay: 0.75s;
    transform-origin: top center;
    z-index: 100;
    
}



.loader img{
    width: 80%;
    animation: fadeIn;
    opacity:0;
    animation-fill-mode: forwards;
    animation-duration: 1.5s;
    filter: brightness(1);
}

.main-container{
    opacity: 0;
    animation: containerShow;
    animation-delay: 1.3s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    filter: brightness(1);

    }
    50%{
        width: 80%;
        opacity: 1;
        transform: translateY(-30px);
    filter: brightness(1);

    }
    80%{
        width: 180px;
        transform: translateY(-1px);
        filter:brightness(0) invert(1)
        
    }
    100% {
        width: 180px;
        opacity: 1;
        filter:brightness(0) invert(1)
     }
}

@keyframes closeUp {
    0% {
        background-color: white;
        height: 100%;
        
    }
    80%{
        background-color: var(--bg-blue);
    }
    100% {
        background-color: var(--bg-blue);
        height: 100px;
     }
} 

@keyframes containerShow {
    0% {
        opacity: 0;
        
    }
    100% {
        opacity: 1;
     }
}