@media(min-width: 700px){
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body{
        background-image: linear-gradient(120deg, #f79030, #d4680e); 
        background-attachment: fixed;
        color: white;
        font-family:'Lexend Tera', sans-serif;
    }
    
    header, form{
        min-height: 20vh;
        display: flex; 
        justify-content: center;
        align-items: center;
    }

    .input{
        background-color: white;
    }
    
    form input, form button{
        padding: 0.5rem;
        font-size: 2rem;
        border: black;
        background-color: white;
        outline: none;
    }
    
    form button{ 
        color: #dd7016;
        background: white;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    form button:hover{
        background: #dd7016;
        color: white;
    }
    
    .todo-container{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .todo-list{
        min-width: 30%;
        list-style: none; 
    }
    
    .todo{
        margin: 0.5rem;
        background: white;
        color: black;
        font-size: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.5s ease;
        animation: animation1 0.5s; 
    }
    
    @keyframes animation1 {
        0%{opacity: 0%;}
        100%{opacity: 100%;}
        
    } 
    
    .todo li{
        flex: 1; 
        transition: all 0.5s ease;
    }
    
    .trash-btn, .complete-btn{
        background: #dd1616;
        color: white;
        border: none;
        padding: 1rem;
        outline: none;
        transition: all 0.5s ease;
    }
    
    .complete-btn{
        background-color: green;
        transition: all 0.5s ease;
    
    }
    
    .todo-item{
        padding-left: 0.5rem; 
        transition: all 0.5s ease;
    }
    
    .fa-trash, .fa-check, .fa-plus-square{
        pointer-events: none;
    }
    
    .completed{
        text-decoration: line-through;
        opacity: 0.5;
    }
    
    .fall{
        transform: translateY(8rem) rotate(20deg);
        opacity: 0;
    } 
    
    select{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none; 
        border: none;
        color: #dd7016;
        width: 10rem;
        cursor: pointer;
        padding: 1.2rem;
    }
    
    .select{ 
       margin: 1rem; 
       position: relative;
       overflow: hidden;
    } 
    
    .select::after{
        content: "\25BC";
        position: absolute;
        color: #dd7016;
        background-color: white;
        top: 0;
        right: 0;
        padding: 1.2rem;
        pointer-events: none; 
        transition: all 0.3s ease;
    }
    
    .select:hover::after{
        background: #dd7016;
        color: white;
    
    }
     
}
@media(max-width: 700px){
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body{
        background-image: linear-gradient(120deg, #f79030, #d4680e); 
        background-attachment: fixed;
        color: white;
        font-family:'Lexend Tera', sans-serif;
    }
    
    header{
        min-height: 20vh;
        display: flex; 
        justify-content: center;
        align-items: center;
        font-size: 3vw;
    }

    form{

    }

    .input{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .input input{
        padding: 0.5rem;
        font-size: 2rem;
        border: black;
        background-color: white;
        outline: none;
        width: 80%;
    }
    
    .input button{ 
        color: #dd7016;
        background: white;
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 0.5rem;
        font-size: 2rem;
        border: black;
        background-color: white;
        outline: none;
    }
    
    .input button:hover{
        background: #dd7016;
        color: white;
    }
    
    .todo-container{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .todo-list{
        min-width: 95%;
        list-style: none; 
    }
    
    .todo{
        margin: 0.5rem;
        background: white;
        color: black;
        font-size: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.5s ease;
        animation: animation1 0.5s; 
    }
    
    @keyframes animation1 {
        0%{opacity: 0%;}
        100%{opacity: 100%;}
        
    } 
    
    .todo li{
        flex: 1; 
        transition: all 0.5s ease;
    }
    
    .trash-btn, .complete-btn{
        background: #dd1616;
        color: white;
        border: none;
        padding: 1rem;
        outline: none;
        transition: all 0.5s ease;
    }
    
    .complete-btn{
        background-color: green;
        transition: all 0.5s ease;
    
    }
    
    .todo-item{
        padding-left: 0.5rem; 
        transition: all 0.5s ease;
    }
    
    .fa-trash, .fa-check, .fa-plus-square{
        pointer-events: none;
    }
    
    .completed{
        text-decoration: line-through;
        opacity: 0.5;
    }
    
    .fall{
        transform: translateY(8rem) rotate(20deg);
        opacity: 0;
    } 
    
    select{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none; 
        border: none; 
        color: #dd7016;
        width: 45%;
        cursor: pointer;
        padding: 1.2rem;
    }
    
    .select{ 
       margin-top: 1rem; 
       position: relative;
       overflow: hidden; 
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
    } 
    
    .select::after{
        content: "\25BC";
        position: absolute;
        color: #dd7016;
        background-color: white;
        top: 0;
        right: 27.5vw;
        padding: 1.2rem;
        pointer-events: none; 
        transition: all 0.3s ease;
    }
    
    .select:hover::after{
        background: #dd7016;
        color: white;
    
    }
     
}