/*animations*/
@keyframes turn {
    25% {filter: blur(0.75px);stroke-dasharray: 40%;}
    50% {filter: blur(0px); stroke:var(--d-green);}
    100% {transform: rotate(360deg); }
}

@keyframes button-slide-up{
    0% {transform: translateY(0);
        opacity: 0.5}
    }

@keyframes slide-down{
    0% {transform: translateY(-3rem);
        opacity: 0.5}
    }

@keyframes slide-down-s{
    0% {transform: translateY(-1rem);
        opacity: 0.2}
    }

@keyframes slide-up-origin{
    0% {transform: translateY(3rem);
        opacity: 0}
    }

@keyframes box-shadow{
    0% {box-shadow: none;}
}

@keyframes slide-down-origin{
    0% {transform: translateY(-3rem);
        opacity: 0}
    }

@keyframes slide-up{
    0% {transform: translateY(3rem);
        opacity: 0.5}
    }

@keyframes show{
        0% {opacity: 0;}
    }

@keyframes fade{
        100% {opacity: 0;}
    }

@keyframes slide-left{
    0% {transform: translateX(-1.5rem);
        opacity: 0}
    }

@keyframes slide-right{
    0% {transform: translateX(1.5rem);
        opacity: 0}
    }

@keyframes drop{
    0% {transform: rotate(1deg) translateY(3rem);
        opacity: 0}
    }

@keyframes show-icon{
    0% {opacity: 0;
        width: 1rem;}
    }

@keyframes expand{
    0% {transform: translateY(-1.5rem);}
    }

@keyframes blue-in{
    0%{background-color: var(--l-blue);
    }
}

@keyframes bounce{

    17%{transform: translateY(0.5rem);
    }

    67%{transform: translateY(-0.25rem);
    }
}

/*@keyframes violent-strobing{
    70% {opacity: 0.7;}
    }*/


.animated {
    animation-duration: 0.2s;
}

.slide-d{
 animation-name: slide-down;
}

.slide-u{
animation-name: slide-up;
}

.slide-d-o{
 animation-name: slide-down-origin;
}

.slide-u-o{
animation-name: slide-up-origin;
}
.slide-l{
 animation-name: slide-left;
}

.slide-r{
animation-name: slide-right;
}

.drop{
animation-name: drop;
}
.show{
    animation-name: show;
}

/*timing*/

.delay1{
    animation-delay: 0.1s;
    animation-fill-mode: backwards;
}

.delay2{
    animation-delay: 0.2s;
    animation-fill-mode: backwards;
}

.delay3{
    animation-delay: 0.3s;
    animation-fill-mode: backwards;
}

.delay4{
    animation-delay: 0.4s;
    animation-fill-mode: backwards;
}