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

:root {
   --white: #fafafb;
   --purple:#2E4053;
   --blue-light:#04d4c3;
   --blue-dark:#424949;
   --green: #424949;
   

}

body {
    background: linear-gradient(to bottom,var(--purple),var(--blue-light));
    height: 100vh;   
    font-family: 'Prompt', sans-serif;
}

.container {
    max-width: 80%;
    width: 400px;
    height: 600px;
    margin: 0 auto;
}

/*PERFIL*/

#lista{
    height: 11rem;
    overflow: auto;
}

.perfil h1 {
    color: var(--white);
}

.perfil span {
    color: var(--white);
    letter-spacing: 1px;
}

#fecha {
    color: var(--white);
    padding: 50px 0 5px 0px;

}




/*AGREGAR TAREA*/

.agregar-tarea {
    background-color: var(--white) ;
    border-radius: 15px;
    height: 70px;
    display: flex;
    align-items: center;
    gap: 70px;
    padding: 10px;
    margin: 40px 0;
}

.agregar-tarea input {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: none;
    background-color: var(--white);
    padding-left: 10px;

}



.agregar-tarea input::placeholder {
    font-size: 1.1rem;
   color: var(--purple);
}

.agregar-tarea i{
    font-size: 50px;
    color: var(--purple);

}
.agregar-tarea i:hover {
    transform: scale(1.1);
    cursor: pointer;
}



/*SECCION DE TAREA */




.seccion-tarea h3 {
    color: var(--white);
    margin-bottom: 20px;
}

.seccion-tarea li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom,var(--blue-dark),var(--green));
    border-radius: 15px;
    padding: 10px;
    color: var(--white);
    margin: 5px 0;
    
    
}
.seccion-tarea i {
    font-size: 25px;
}

.seccion-tarea > ul p {
    font-size: 1.2rem;
    
}


.seccion-tarea i:hover {
    color: var(--blue-light);
    cursor: pointer;
}

.line-through{
    text-decoration: line-through;
    color : var(--blue-light);
} 
#contadores{
    flex-wrap: wrap-reverse;
    justify-content: center;
    background-color: #18181b;
    HEIGHT: 34%;
    display: flex;
    align-content: center;

}
#boton-total {
    border-radius:0.5rem;
    background-color: blueviolet;
    color: white;
    text-align: center;
    font-size: 71%;
    margin-right: 8px;
    width: 26%;
    padding: 0rem;
    height: 26px;
    
    }
    #boton-completadas{
      border-radius:0.5rem;
      background-color: rgb(43, 226, 58);
      color: white;
      text-align: center;
      font-size: 71;
      width: 26%;
      padding: 0rem;
      height: 26px;
    }
    #boton-incompletas{
      border-radius:0.5rem;
      background-color: rgb(226, 43, 52);
      color: white;
      text-align: center;
      font-size: 71%;
      margin-left: 8px;
      width: 26%;
      padding: 0rem;
      height: 26px;
}