html {
    scroll-behavior: smooth;
}
@keyframes top {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes left {
    0% {
        transform: translateX(-150px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes right {
    0% {
        transform: translateX(150px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes bottom {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes Open {
    from {
        left: 49%;
        right: 49%;
        width: 2%;
        max-height: 100%;
        opacity: 0;
    }
    to {
        left: 0%;
        right: 0%;
        width: 100%;
        max-height: 100%;
        opacity: 1;
    }
}
.Animation{
    position: relative;
    opacity: 0;
}
.Animation.active{
    opacity: 1;
}
.active.Animation-Left{
    animation: left 2s ease-in-out;
}
.active.Animation-Top{
    animation: top 2s ease-in-out;
}
.active.Animation-Right{
    animation: right 2s ease-in-out;
}
.active.Animation-Bottom{
    animation: bottom 1.5s ease-in-out;
}
.active.Animation-Open{
    animation: Open 2s ease-in-out;
}