.app-loading {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 10em;
}
.app-loading p {
    display: block;
    font-size: 1.17em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal;
}


.loader{
    -webkit-perspective:700px;
    perspective: 700px;
    width: 80%;
    height: 300px;
    padding-top: 100px;
    position: relative;
    text-align: center;
    margin-top: 10%;
    margin-left: 10%;

    border:10px solid black;
    resize: both;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23a6ce39' /%3E%3Cstop offset='25%25' stop-color='%23c05c7e' /%3E%3Cstop offset='50%25' stop-color='%230073bf' /%3E%3Cstop offset='100%25' stop-color='%23ffb961' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;
}

.loader>span{
    font-size: 130px;
    font-family: "franklin gothic medium",sans-serif;
    display: inline-block;
    animation:flip 2.6s infinite linear;
    transform-origin:0 70%;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    color: #a6ce39;
}

@keyframes flip{
    35%{
        transform: rotateX(360deg);
    }
    100%{
        transform: rotatex(360deg);
    }
}


.loader>span:nth-child(even){
    color:#0073bf;
}

.loader>span:nth-child(2){
    animation-delay: 0.3s;
}

.loader>span:nth-child(3){
    animation-delay: 0.6s;
}

.loader>span:nth-child(4){
    animation-delay: 0.9s;
}

.loader>span:nth-child(5){
    animation-delay: 1.2s;
}

.loader>span:nth-child(6){
    animation-delay: 1.5s
}

.loader>span:nth-child(7){
    animation-delay: 1.8s
}