.app-loader:empty {
    background-color: red;

}

.ap-logo-loader-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    z-index: 9999;
    
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;

    overflow: hidden;

    background: linear-gradient(to bottom,  #1B1B1B, #1d1d1d);
    background-size: 100% 200%;
    animation: backgroundShift 10s infinite alternate;
}

@keyframes backgroundShift {
    0% {
        background-position: top;
    }
    100% {
        background-position: bottom;
    }
}





.fap-logo-loader-container {
    filter: invert(59%) sepia(100%) saturate(4736%) hue-rotate(181deg) brightness(109%) contrast(104%);
}
.ap-logo-loader-container h3 {
    margin: 50px;
    font-weight: bolder;

    transition: transform 5s ease-in-out;
    animation: fade-in 6s ease-in-out;

    color: white;

    font-family: 'Inter', sans-serif;

    font-style: italic;

}

.ap-logo-loader {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    
    width: 100vw;
    height: 100vh;
    max-width: 300px;
    max-height: 300px;

    margin-top: 100px;

    transition: transform 5s;
}

.ap-logo-loader img {
    user-drag: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    pointer-events: none;

    position: absolute;
    width: 100%;
    height: 100%;
}


.ap-logo-loader-a-text {
    transition: transform 5s ease-in-out;
    animation: ap-loader-logo-rotate 10s linear infinite, fade-in 5s ease-in-out, ap-bonce 0.5s ease-in-out;
}

.ap-logo-loader-icon {
    margin-top: -14px;
    transition: transform 5s ease-in-out;
    animation: fade-in 5s ease-in-out, breathe 5s ease-in-out infinite, ap-bonce 1s ease-in-out;
}


@keyframes ap-loader-logo-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes ap-loader-logo-rotate-breathe {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }
}

@keyframes ap-bonce{
    from {
        transform: scale(0.8);          
    }

    to {
        transform: scale(1);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}