@charset "UTF-8";

@media screen and (min-width:375px) and (max-width:625px){
    body.light-mode header {
        background: url("../images/bg-desktop-light.jpg") center top no-repeat;
        background-size: cover;
    }

    body.dark-mode header {
        background: url("../images/bg-desktop-dark.jpg") center top no-repeat;
        background-size: cover;
    }

    nav {
        width: 22rem;
    }

    header h1 {
        margin-right: 9.4rem;
    }
    
    form input {
        width: 22rem;
        font-size: 1.1rem;
    }

    div.check_box {
        width: 22rem;
    }

    ul.list {
        width: 104%;
    }

    ul li {
        text-indent: 2rem;
    }

    ul #btn-check {
        width: 1.2rem;
        height: 1.2rem;
        right: 94%;
        bottom: 18%;
    }

    ul #btn-checked {
        width: 1.2rem;
        height: 1.2rem;
        right: 94%;
        bottom: 18%;
    }

    ul #btn-del {
        left: 95%;
    }

    div.menu {
        width: 22rem;
    }
    
    div.menu p {
        left: 2%;
    }
    
    div.menu button {
        right: 2%;
    }
    
    div.menu-bottom {
        width: 22rem;
    }

}

@media screen and (min-width:625px) and (max-width:1023px){
    body.light-mode header {
        background: url("../images/bg-desktop-light.jpg") left top no-repeat;
        background-size: cover;
    }

    body.dark-mode header {
        background: url("../images/bg-desktop-dark.jpg") left top no-repeat;
        background-size: cover;
    }
    nav {
        width: 34rem;
    }

    header h1 {
        margin-right: 21.4rem;
    }
    
    form input {
        width: 34rem;
        font-size: 1.2rem;
        padding: 1rem;
    }

    div.check_box {
        width: 34rem;
    }

    ul.list {
        width: 103%;
        max-height: 60vh;
    }

    ul li {
        padding: 0.5rem;
        text-indent: 1.6rem;
    }

    ul #btn-check { 
        width: 1.2rem;
        height: 1.2rem;
        right: 96%;
        bottom: 26%;
    }

    ul #btn-checked {
        width: 1.2rem;
        height: 1.2rem;
        right: 96%;
        bottom: 26%;
    }

    ul #btn-del {
        height: 2rem;
        left: 96%;
    }

    div.menu {
        width: 34rem;
    }
    
    div.menu p {
        left: 2%;
    }
    
    div.menu button {
        right: 2%;
    }
    
    div.menu-bottom {
        width: 34rem;
    }
    
}

@media screen and (min-width:1023px) {    
    body.light-mode header {
        background: url("../images/bg-desktop-light.jpg") center top no-repeat;
        background-size: cover;
        height: 21rem;
    }

    body.dark-mode header {
        background: url("../images/bg-desktop-dark.jpg") center top no-repeat;
        background-size: cover;
        height: 21rem;
    }

    nav {
        width: 34rem;
        padding-top: 5rem ;
    }

    header h1 {
        font-size: 2.8rem;
        margin-right: 19.4rem;
    }

    header img {
        width: 1.8rem;
    }

    form input {
        width: 34rem;
        font-size: 1.2rem;
        padding: 1rem;
    }

    section {
        margin-top: -12.2rem;
    }

    div.check_box {
        width: 34rem;
    }

    ul.list {
        width: 103%;
        max-height: 61vh;
    }

    ul li {
        padding: 0.5rem;
        text-indent: 1.8rem;
        font-size: 1.5rem;
    }

    ul #btn-check { 
        width: 1.4rem;
        height: 1.4rem;
        right: 95%;
        bottom: 27%;
    }

    ul #btn-checked {
        width: 1.4rem;
        height: 1.4rem;
        right: 95%;
        bottom: 27%;
    }

    ul #btn-del {
        width: 1.6rem;
        height: 2.4rem;
        left: 95%;
        bottom: 2%;
    }

    div.menu {
        width: 34rem;
        height: 2.8rem;
    }
    
    div.menu p {
        left: 2%;
    }
    
    div.menu button {
        right: 2%;
    }
    
    div.menu-bottom {
        width: 34rem;
        display: none;
    }

    div.menu {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
    }

    div.menu button#iall, div.menu button#iactive, div.menu button#icompleted {
        display: block;
        top: -16%;
    }

    div.menu button#iall, div.menu button#iactive {
        margin-right: 1rem;
    }

    #icompleted {
        position: relative; /* Evita sobrepor outros elementos */    
    }

    #iactive {
        position: relative; /* Evita sobrepor outros elementos */
    }

    #iall {
        position: relative; /* Evita sobrepor outros elementos */
    }   
}