@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

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

    50% {
        opacity: 0.3;
    }
}

@keyframes scale {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes pulse-color {
    0% {
        color: var(--color-accent);
    }

    50% {
        color: var(--color-accent-dark);
    }

    100% {
        color: var(--color-accent);
    }
}

.fade {
    opacity: 0;
    transition: var(--default-transition);
}

.fade.show {
    opacity: 1;
}



.show {
    visibility: visible !important;
}