div.loader{
    background: var(--clr2_1);
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 200;
}
div.loader .line{
    position: absolute;
    background: #dddddd01;
    left:calc(50% - 230px);
    width: 460px;
    height: 460px;
    bottom: calc(50% - 230px);
    transition: all 0.9s ease-in-out;
    transform-origin: 50% 50%;
    transform: rotate(45deg) perspective(100px) translateZ(0px);
    border: 1px solid rgba(221, 221, 221, 0.47);
    animation: line_opacity 1.6s ease-in-out infinite;
}
div.loader .line::after{
    content: '';
    position: absolute;
    background: #dddddd01;
    left: 30px;
    width: 400px;
    height: 400px;
    bottom: 30px;
    transition: all 0.9s ease-in-out;
    transform-origin: 50% 50%;
    transform: rotate(-15deg) perspective(100px) translateZ(0px);
    border: 1px solid rgba(150, 150, 150, 0.47);
    opacity: 0;
}
@keyframes line_opacity {
    0% {
        opacity: 1;

    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;

    }
}

div.loader img{
    position: absolute;
    width: 150px;
    left: calc(50vw - 75px);
    top:50%;
    transition: all 1s cubic-bezier(0, -0.33, 0, 0.39);
    transform-origin:50% 50%;
    transform: perspective(100px) translateZ(0px);
}
div.loader.loading img{
    transform: perspective(100px) translateZ(120px);
    opacity: 0;
}
div.loader.loading .line{
    border: 30px solid rgba(221, 221, 221, 0.47);
    transform: rotate(127deg) perspective(100px) translateZ(100px);
}
div.loader.loading .line::after{
    border: 30px solid rgba(42, 42, 42, 0.78);
    transform: rotate(-127deg) perspective(100px) translateZ(100px);
    opacity: 1;
}