.fade-in-opacity-slide {
    animation-name: fade-in-opacity-slide;
    animation-duration: 1.5s;
}

@keyframes fade-in-opacity-slide {
    0% {
        opacity: 0;
        bottom: -150px;
    }

    100% {
        opacity: 1;
        bottom: 0;
    }
}

.fade-out-opacity {
    animation-name: fade-out-opacity;
    animation-duration: 0.5s;
    opacity: 0;
}

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

    100% {
        opacity: 0;
    }
}

.color-shift-emphasys {
    animation: color-shift 0.75s ease-in-out infinite alternate;
    font-weight: 1000;
}

.dark-mode-enabled .color-shift-emphasys {
    animation: color-shift-dark 0.75s ease-in-out infinite alternate;
    font-weight: 1000;
}


.color-shift-emphasys-softer {
    animation: color-shift 3s ease-in-out infinite alternate;
}

.dark-mode-enabled .color-shift-emphasys-softer {
    animation: color-shift-dark 3s ease-in-out infinite alternate;
}

@keyframes color-shift-dark {
    to {
        color: var(--poknet-primary-dark);
    }

    from {
        color: var(--poknet-text-dark);
    }
}

@keyframes color-shift {
    to {
        color: var(--poknet-primary-dark);
    }

    from {
        color: var(--poknet-text-light);
    }
}