/* All delay classes will take 2x longer to start */
:root {
    --animate-delay: 1s;
  }

/* All delay classes will take half the time to start */
:root {
    --animate-delay: 0.5s;
  }

html, body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;background: rgb(244,169,225);
    background: linear-gradient(90deg, rgba(244,169,225,1) 0%, rgba(241,191,217,0.9051995798319328) 45%, rgba(255,0,146,1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
 p{
     margin: 0;
 }

 .todoListContainer{
    width: auto; 
    min-width: 368px;
    border-radius:10px;
    background-color: #fff;
    padding: 20px 0 20px 0;
 }

 .header-todo{
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding: 12px 20px 15px 20px;
 }

 .header-todo h1{
     font-size: 2em;
     display: block;
     margin: 0;
 }

 .header-todo i{
     font-size: 2em;
 }

 .form-search, .form-add{
     margin: 20px 15px;
 }

 .form-search input, .form-add input{
     border-radius: 25px;
 }

 .list-group{
     border-radius: 0;
 }

 .list-group-item{
     border-radius: 0;
     border: solid 1px #ccc;
     transition: .5s;
     margin: 0 10px;
 }

 .list-group-item:hover{
    transform: scale(1.1);
    background-color: rgba(244,169,225,1);
    color: #fff;
    font-weight: bold;
 }

 .list-group-item i{
     cursor: pointer;
 }

 .hidden{
     display: none;
 }