@keyframes slideAndFade {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    10% {
        transform: translateY(0);
        opacity: 1;
    }

    80% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        visibility: hidden;
        opacity: 0;
    }
}

@media (max-width: 1000px) {
    .task {
        flex-direction: column;
    }

    .divider {
        display: none;
    }

    .task-right-side {
        margin-top: 8px;
    }

    h1 {
        text-align: center;
    }

}

@media (max-width: 650px) {
    footer {
        flex-direction: column;
        align-items: center;
    }

    footer p {
        padding-bottom: 24px;
    }
}