@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: "Nunito";
    src: url("../Nunito-Regular.ttf");
}

/* @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); */

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.fadeX-enter-active,
.fadeX-leave-active {
    transform: translateX(0);
    transition: all .3s linear;
}

.fadeX-enter,
.fadeX-leave-to {
    transform: translateX(100%);
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
    transition: all 0.2s;
}

.slide-left-enter {
    opacity: 0;
    transform: translate(50px, 0);
}

.slide-left-leave-to {
    opacity: 0;
    transform: translate(-50px, 0);
}

.slide-right-enter {
    opacity: 0;
    transform: translate(-50px, 0);
}

.slide-right-leave-to {
    opacity: 0;
    transform: translate(50px, 0);
}