@media (min-width: 1650px) {
    /* .content {
        margin: 140px auto;
    } */
}

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

    .divider {
        display: none;
    }

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

    h1 {
        text-align: center;
    }
}

@media (max-width: 900px) {
  footer{
    padding-bottom: 100px;
  }

  .content {
    margin: 60px;
  }
}


@media (max-width: 500px) {
    .content {
        margin: 20px;
    }
}

@media (max-width: 350px){
    .content {
        margin: 4px;
    }
}

@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;
    }
}