@keyframes complete {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        color: green;
    }
}

.complete {
    animation: complete 1000ms;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes in_danger {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        color: yellow;
    }
}

.in_danger {
    animation: in_danger 1000ms;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes in_progress {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        color: orange;
    }
}

.in_progress {
    animation: in_progress 1000ms;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes not_started {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        color: rgb(0, 4, 255);
    }
}

.not_started {
    animation: not_started 1000ms;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

[data-md-color-scheme="slate"] {
    --md-accent-fg-color: #e01a33;
    --md-accent-fg-color--transparent: rgba(224, 26, 51, 0.1);
}