*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
          


html{
    font-size: 61%;
    font-weight: 400;
}
  body{
    background-color:hsl(235, 21%, 11%) ;
      position: relative;
    font-size: 2.5rem;
    font-family: 'Josefin Sans', sans-serif;
     font-family: 'Poppins', sans-serif;
     font-family: 'Roboto', sans-serif;    
  } 
  

  .container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 2s, visibility 2s ease-out; /* this is relative to the .container--hidden*/
  }

  .container--hidden{
    opacity: 0;
    visibility: hidden;
  }
     

   .container::after{
    content: "";
    width: 60px;
    height: 60px;
    border: 11px solid;
    border-radius: 50%;
    border-top-color: green;
    animation: loading .7s ease infinite;
   }  

  


  @keyframes loading {
from{
    transform: rotate(0deg);
    
}
 to{
    transform: rotate(360deg);
 }
    
  }





    .white{
      background-color:hsl(0, 0%, 98%) ;
    }
   

.header-dark{
    height:100%;
    background-image: url(images/bg-desktop-dark.jpg);
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    
    
    
}

#header1{
  font-size: 4rem;
  font-weight: 900;
  color:white;
  animation: animate 1.5s ease-in infinite;
  
}

  
 
@keyframes animate {
  0%{
    transform: scale(1.5,1.5);
    color:#01fe87
  }
100%{
    transform: scale(0,0);
    color:white;
  }
  
}


     
.header-light{
    height:100%;
    background-image: url(images/bg-desktop-light.jpg);
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
}
    
     
     
    
.div-header{
    width:50%;
    
        display: flex;
        justify-content: center;
        align-items: center;
        gap:4rem;
        margin: auto;
        padding-top: 4rem;
        gap:35rem;
        padding-bottom: 13rem;
}


.div2{
    width:48%;
    margin: auto;
    margin-top: -10.5rem;
    
}
      .info{
        display: flex;
        justify-content: space-between;
        color: hsl(234, 11%, 52%);
        width:100%;
        cursor:pointer;
        padding-right: 0.9rem;
        padding-left: .9rem;
        padding-top: 1.2rem;
        padding-bottom: 1.5rem;
        background-color: hsl(235, 24%, 19%) ;
        border-bottom-left-radius: .3rem;
        border-bottom-right-radius:.3rem ;
        font-size: 2.2rem;
   
      }

     .valida{
        display:flex;
        gap:0.7rem;
        font-size: 2.2rem;
     }
     

     form{
        padding: 1rem;
        background-color:hsl(235, 24%, 19%);
        padding-left: 2rem;
        display: flex;
        gap:1.5rem;
        
     }
     .circle{
        border:.1rem solid hsl(235, 19%, 35%);
        border-radius: 50%;
        width:2rem;
        height: 2rem;;
     }
     .input-1{
        background-color:hsl(235, 24%, 19%) ;
        border: none;
        width:100%;
        outline: none;
        color:#ffff

     }

        input::placeholder{
            color:#fff;
            letter-spacing: 0.2rem;
            opacity: 0.5;
            transition: all 0.1s ease;
        }
       .input-1:focus{/*style this */
        border: none;
       }

      .list{
       
        background-color: hsl(235, 24%, 19%) ;
        margin-top: 1.5rem;
        width:100%; 
        border-radius: 0.2rem; 
      }

      .todo-li{
        display: flex;
        gap:1rem;
        margin-top: 1.2rem;
        border-bottom: .01rem solid hsl(234, 39%, 85%) ;
        width:100%;
        padding-left: 2rem ;
        padding-right: 0.5rem;
        padding-bottom: .5rem;
      }
      

      .todo-li:nth-child(1){
        padding-top:1.2rem ;

      }

       .todo-li p{
        width:85%;
        color:#fff;

       }

       .todo-li .check{
        width:2rem;
        height: 2rem;
        border-radius: 50%;
        border: .1rem solid hsl(235, 19%, 35%);
        display: grid;
        cursor: pointer;
        place-content: center;
        
       }

       .todo-li .check img{
        transform: scale(0);
        transition: all .2s ease;
       }

           /*add with js when click event is called*/
      .mark-check{
        background-image: linear-gradient(hsl(192, 100%, 67%), hsl(280, 87%, 65%));
          }
      .mark-check img{
        transform: scale(1) !important;
         }

         .line-through{
            opacity: 0.3;
            text-decoration: line-through;
          }
    
 
        
    .todo-li .cancel{
        background: transparent;
        border: none;
        outline: none;
        opacity: 0;
        transition: all .3s ease;
        font-size: .1rem;
    }

    .todo-li:hover .cancel{
        opacity: 1;

    }
    .attribution{
      font-size: 1.6rem;
      color:white;
      width:40%;
      margin-top: 20rem;
      margin-left: 34rem;
   
    }
    .atrriBlack{
      color:black;
    }
    
      
    @media(max-width : 576px) {
      

      .header-dark{
        height: 230px;
        
      }
      .div-header{
        gap:13rem;
        text-align: center;
        
         
      }

         .div2{
          width:360px;
          margin-left:2.6rem;
         }
         .info{
          position: relative;
         }

         .valida{
          position: absolute;
          top: 7.5rem;
          right:0.01rem;
          width:360px;
          background-color: hsl(235, 24%, 19%) ;
          justify-content: space-evenly;
          padding: 1.2rem 2rem;
          border-radius: 2px;
         }

         .container{
          display:none;
          
         }

         .attribution{
          display:none;
          
       
        }
       }