@keyframes slide-up{
    0%{
        opacity: 0;
        margin-top: 200px;
    }
    25%{
        opacity: 100%;
        margin-top: 0;
    }
    75%{
        opacity: 100%;
        margin-top: 0;
    }
}

@keyframes circle-in{
    0%{
        width: 0;
        height: 0;
        border-radius: 50%;
    }
    49%{
        border-radius: 20%;
    }
    50%{
        width: 10000px;
        height: 10000px;
        border-radius: 0%;
    }
}

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

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

@keyframes fade-out-zap{
    0%{
        opacity: 100%;
    }
    99%{
        display: flex;
    }
    100%{
        opacity: 0;
        display: none;
        z-index: -999;
    }
}

@keyframes overflow-scroll{
    0%{
        overflow-y: hidden;
    }
    99%{
        overflow-y: hidden;
    }
    100%{
        overflow-y: scroll;
    }
}

@keyframes fade-in-40{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 40%;
    }
}
@keyframes fade-out-40{
    0%{
        opacity: 40%;
    }
    100%{
        opacity: 0;
    }
}

@keyframes nav-open{
    0%{
        height: 0;
    }
    100%{
        height: 400px;
    }
}

@keyframes slide-left{
    0%{
        opacity: 0;
        left: 200px;
    }
    100%{
        left: 0;
        opacity: 100%;
    }
}

@keyframes slide-right{
    0%{
        opacity: 0;
        left: -200px;
    }
    100%{
        left: 0;
        opacity: 100%;
    }
}

@keyframes slide-top{
    0%{
        opacity: 0;
        top: 200px;
    }
    100%{
        top: 0;
        opacity: 100%;
    }
}

@keyframes slide-downleft{
    0%{
        top: 0;
    }
    100%{
        top: 650px;
    }
}


@keyframes popup-down{
    0%{
        top: -300px;
    }
    100%{
        top: 100px;
    }
}

@keyframes slide-upright{
    0%{
        top: 0;
    }
    100%{
        top: -650px;
    }
}

@keyframes shrink-splash{
    from{
        --splash-height: 600px;
    }
    to{
        --splash-height: 300px;
    }
}


/*properties*/

@property --splash-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 600px;
}