.overlay {
    /* absolute w-full h-screen cursor-pointer */
    position: absolute;
    width: 100%;
    height: 100vh;
    cursor: pointer;
    /* transition: all 0.3s ease-in-out; */
    animation: fade 1s forwards;
}

.slide {
    position: absolute;
    /* left: -100%; */
    /* -webkit-animation: slide 0.5s forwards;
    animation: slide 0.5s forwards; */
}

.slideLeft {
    left: -100%;
    -webkit-animation: slide 0.5s forwards;
    animation: slide 0.5s forwards;
}

.slideRight {
    right: -100%;
    -webkit-animation: slideRight 0.5s forwards;
    animation: slideRight 0.5s forwards;
}

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

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

@-webkit-keyframes slideRight {
    100% { right: 0; }
}

@keyframes slideRight {
    100% { right: 0%; }
}