@import"https://fonts.googleapis.com/css2?family=Concert+One&display=swap";.container{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:100%}.form{grid-row:1/2;grid-column:1/2;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.list{grid-row:1/2;grid-column:2/3;padding:10px}.container-span-loading{margin-top:50px;display:flex;width:100%;flex-direction:row;justify-content:center}.span-loading{font-size:17px;color:#a7bea9}.button{background-color:#52796f;box-shadow:0 0 6px #a7bea9;border:none;border-radius:50%;cursor:pointer;font-size:50px;position:fixed;bottom:24px;left:24px;font-weight:700;color:#fafafa;display:flex;justify-content:center;align-items:center;height:64px;width:64px;z-index:1;transform:rotate(0);transition:.3s ease}.button:hover{transform:rotate(224deg)}.title{font-size:55px;text-align:center;margin:0;padding:55px;color:#f4f6f3}.title-span{color:#cad2c5;font-size:25px;font-weight:400}.item{background-color:#a7bea9;position:relative;display:flex;justify-content:center;align-items:center;margin:35px 40px 0 30px;border-radius:10px}.item-p{margin:24px 0 24px 24px;width:calc(100% - 120px);font-size:22px;line-height:24px;color:#16191b}.item-p--complete{text-decoration:line-through}.Icon{cursor:pointer;display:flex;justify-content:center;align-items:center;height:48px;width:48px;font-size:24px;font-weight:700}.Icon-check{position:absolute;left:12px}.Icon-check--active{color:#4caf50}.Icon-delete{position:absolute;top:1px;right:0}.Icon-delete:hover{color:red}ul{margin:0;padding:5px 0;list-style:none}.container-items{margin-top:10px;width:100%;height:420px;overflow-y:scroll}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#101618;border-radius:50px}::-webkit-scrollbar-thumb{background:#52796f;border-radius:50px}::-webkit-scrollbar-thumb:hover{background:#419390}.container-search{width:100%;display:flex;flex-direction:row;align-content:center;justify-content:center}.search{background:#f4f6f3;border-radius:5px;border:2px solid #202329;margin:0 5px;height:40px;width:calc(100% - 400px);font-size:24px;text-align:center;font-weight:400;color:#1e1e1f;box-shadow:0 5px 50px #20232940;border-style:none;transition:all .3s ease-in-out;padding:5px 3px}.search:focus{transform:scale(1.1);font-size:25px}.search::placeholder{color:#a5a5a5;font-weight:400}.search:focus{outline-color:#84a98c}.formTask{position:absolute;width:400px;height:600px;border-radius:50px;background-color:#101618;display:flex;flex-direction:column;top:80px;box-shadow:#0000004d 0 19px 38px,#00000038 0 15px 12px}.formTask-top{height:200px;width:100%}.formTask-title{font-size:45px;text-align:center;color:#f4f6f3;margin-top:70px}.formTask-input{width:200px;align-self:center;height:40px;border-radius:20px;text-align:center;background-color:#313131;color:#e9e9e9;border-style:none;font-size:15px;transition:all .3s ease-in-out}.formTask-input:focus{transform:scale(1.03);outline:2px solid #84a98c;font-size:18px}.formTask-input:hover{transform:scale(1.02);outline:2px solid #84a98c;font-size:18px}.formTask-textarea{margin-top:30px;align-self:center;width:320px;border-radius:10px;text-align:center;background-color:#313131;color:#e9e9e9;border-style:none;padding:15px;height:130px}.formTask-textarea:focus{transform:scale(1.03);outline:2px solid #84a98c;font-size:16px}.formTask-textarea:hover{transform:scale(1.02);outline:2px solid #84a98c;font-size:16px}.formTask-button{width:100px;height:35px;margin-top:30px;border-radius:5px;align-self:center;background-color:#313131;color:#e9e9e9;border-style:none;transition:all .3s ease-in-out}.formTask-button:hover{background-color:#84a98c;color:#f4f6f3;transform:scale(1.1)}.formTask>img{margin-top:30px;width:250px;height:250px;align-self:center;transition:transform .8s ease-in-out;animation:floating 6s ease-in-out infinite}.formTask>img:hover{transform:scale(1.05) rotate(1deg)}@keyframes floating{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.modal-background{background-color:#0d0d0ee6;position:fixed;top:-10px;left:-10px;right:-10px;bottom:-10px;display:flex;align-items:center;justify-content:center}.card-container{width:440px;height:590px;position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:50px 260px 100px 100px 80px;transition:transform .8s ease-in-out}.card-background{grid-row:2/6;grid-column:1/2;background-color:#f4f6f3;border-radius:20px;transition:transform .8s ease-in-out}.card-img{grid-row:1/3;grid-column:1/2;position:relative;transition:transform .8s ease-in-out}.card-img>img{width:300px;height:310px;position:absolute;top:0;left:70px;border-radius:20px;box-shadow:#0000008f 0 22px 70px 4px;transition:transform .8s ease-in-out}.card-img>img:hover{transform:scale(1.01)}.card-title{grid-row:3/4;grid-column:1/2;display:block;transition:transform 1.5s ease-in-out}.card-title>h1{color:#31474b;font-size:40px;margin-top:10px;text-align:center;top:0;transition:transform .8s ease-in-out}.card-title>h1:hover{transform:scale(1.01)}.card-title>p{color:#171826;text-align:center;font-size:18px;justify-self:center}.card-title>p:hover{transform:scale(1.01)}.card-add{grid-row:4/5;grid-column:1/2;display:flex;justify-content:space-around}.card-add>a{margin-top:10px}.card-add>a>img{height:50px;width:50px}.card-add>a>img:hover{transform:scale(1.08)}.card-button{grid-row:5/6;grid-column:1/2;display:flex;justify-content:center;align-items:center}.card-button>button{width:130px;height:45px;border-style:none;background-color:#f4f6f3;border-radius:10px;color:#171826;font-size:20px;background-color:#31474b;color:#f4f6f3;border:#31474B solid;transform:scale(1.1)}.card-button>button:hover{background-color:#31474b;color:#f4f6f3;border:#31474B solid;transform:scale(1.1)}*{padding:0;margin:0;font-family:Concert One,cursive}body{background-image:linear-gradient(to left bottom,#29363d,#2c3c43,#2f4248,#32494d,#354f52);height:100vh}