.todo {
    height: 100vh;
    background: #22C1C3;
    background: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(217, 163, 48, 1) 100%);
}

.tasks {
    max-height: 320px;
}

@media screen and (max-width:768px) {
    .inputs {
        flex-direction: column;
    }

    .inputs input {
        margin: 12px 0 !important;
        width: 90% !important;
    }

    .inputs button {
        width: 25%;
        justify-content: end;
    }

    .inputSec {
        width: 90% !important;
    }

    .tasks {
        max-height: 40vh;
    }
}

@media screen and (min-width:769px) and (max-width:992px) {
    .tasks {
        max-height: 50vh;
    }

    .inputs {
        flex-direction: column;
    }

    .inputs input {
        margin: 12px 0 !important;
        width: 90% !important;
    }

    .inputs button {
        width: 25%;
        justify-content: end;
    }

    .inputSec {
        width: 90% !important;
    }
}