:root{
    /*No dia em que precisar mudar algum tom de cor - vai refletir em todos os cantos*/
    --color-dark: rgb(14, 14, 14);
    --color-dark2: rgb(28, 28, 29);
    --color-dark3: rgb(95, 93, 93);
    --color-white: #fff;
    --color-green: rgb(103, 195, 80);
    --color-green2: rgb(51, 149, 26);
    --color-blue: rgba(13, 29, 248, 0.596);
    --color-blue2: rgba(23, 207, 240, 0.658);
    --purple:purple
}
body{
   
    font-family: 'Lato';
    background-image: url(asserts/images/magic-cube.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 4rem;
    
    
    
  
}
main{
    background-color: var(--color-blue);
    backdrop-filter: inherit;
    width: 50%;
    display: flex;
    flex-direction: column;
    margin: auto;
    border-radius: 10px;
    padding: 10px;
    backdrop-filter: blur(5px);
   
}


.content--add-item{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    flex-wrap: wrap;
}
#input-new-task,#btn-new-task{
    border: none;
    font-size: 1rem;
    outline: none;
    padding: 1rem;
}

#input-new-task{
    width: 20rem;
    border-radius: 1rem;
}
#btn-new-task{
    background-color: var(--color-dark2);
    color: var(--color-white);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: .4s;
}

#btn-new-task:hover{
background-color: var(--color-dark3);
}

#to-do-list{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    margin: auto;
    width: 60%;
    
    
    
   
}
#to-do-list li{
    list-style-type: none;
    font-size: 1.4rem;
    text-transform: capitalize;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: .4s ease-in-out;

   word-break: break-all ; /*Quebra linha quando ultrapassa a largura máxima*/
   
   
}
#to-do-list li:hover{
background-color: var(--color-blue2);
transition: .4s ease-in-out;
border-radius: 1rem;
 padding-left: 1rem;
}

#btn-ok{
    background-color: var(--color-green);
    border: none;
    color: var(--color-white);
    padding: .4rem .8rem;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .4s;
}
#btn-ok:hover{
    background-color: var(--color-green2);
}


.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4rem;
    
    
}
@media screen and (max-width:900px){
    main{
        width: 90%;
    }
   
}
@media screen and (max-width:600px){
    
    #to-do-list{
        width: 90%;
    }
}