@media (max-width: 516px) {
    body{
        padding: 20px;
    }

    button:hover {
        background-color: #fff;
    }
    
    button:hover > i {
        color: #102f5e;
    }

    .todo-container {
        margin: 0;
        background-color: #fdfdfd;
        padding: 10px 10px 18px 10px;
        border-radius: 10px;
        max-width: 100%;
    }

    .empty-todos h5{
        margin-top: 18px;
    }
}

@media (max-width: 425px) {

    #todo-form .form-control{
        display: flex;
        flex-wrap: wrap;
    }

    #todo-form .form-control input{
        flex: 1 1 50%;
        margin-right: 0;
        height: 32.59px;
    }
    
    #todo-form .form-control button:not(:nth-of-type(1)){
        flex: 1;
        margin-left: 8px;
    }

    #todo-form .form-control button:nth-of-type(1){
        order: 1;
        flex: 1 1 100%;
        margin-top: 8px;
    }

    #todo-form .form-control #clear-button{
        position: static;
        background-color: #102f5e;
    }

    #todo-form .form-control #clear-button:hover > i{
        animation: unset;
    }

    #todo-form .form-control #clear-button > i{
        color: #fff;
    }

    #todo-form,
    #edit-form, .todo {
        padding: 0.8rem;
    }

    .todo h3 {
        font-size: 0.8rem;
    }
}

@media (max-width: 375px) {
    #todo-form .form-control input{
        flex: 1 1 100%;
        margin-right: 0;
        height: 32.59px;
    }
        
    #todo-form .form-control button:not(:nth-of-type(1)){
        flex: 1 1 48%;
        margin-left: 0;
        margin-right: 8px;
        margin-top: 8px;
    }

    #todo-form .form-control button:nth-of-type(1){
        flex: 1 1 48%;
    }
    .todo button {
        margin-left: unset;
        transform: scale(.85);
    }

    .todo h3{
        max-height: 32px;
        overflow-y: scroll;
    }
}