@import"https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap";*{margin:0;padding:0;box-sizing:border-box;list-style:none}body{width:100vw;height:100dvh;display:flex;justify-content:center;align-items:center;font-family:Manrope,sans-serif}.todo{max-width:40rem;width:100%;padding:2.5rem 2rem;background-color:#ebf66b;display:flex;flex-direction:column;align-items:center;border-radius:10px}.todo>*:nth-child(1){margin-bottom:2rem;width:15rem;height:5rem;display:flex;justify-content:center;align-items:center;border-radius:20px;border:5px solid #e4e761;cursor:pointer}.todo>*:nth-child(1):hover>*{color:#b9a836}.todo>*:nth-child(1)>*{font-size:2.5rem;color:#f0d53f;font-weight:bolder;transition:.3s all linear}.todo>*:nth-child(2){display:flex;align-items:center;gap:1rem}.todo>*:nth-child(2)>.todo-form{background-color:#f06262;padding:.5rem 1rem;border-radius:10px;display:flex;width:20rem}.todo>*:nth-child(2)>.todo-form *:first-child{font-size:1.5rem;outline:none;border:none;width:100%;background-color:transparent;color:#ffffffc6;font-weight:bolder}.todo>*:nth-child(2)>.todo-form *:first-child::placeholder{color:#ffffff41}.todo>*:nth-child(2)>.todo-form *:last-child{border:0;outline:0;background-color:transparent;font-size:3rem;opacity:100%;color:#5dcc53}.todo>*:nth-child(2)>.select{position:relative;display:flex;align-items:center}.todo>*:nth-child(2) .select:after{content:"▼";position:absolute;top:0;right:0;padding:.57em;background-color:#e461cf;pointer-events:none;color:#ebf66b;border-radius:0 9px 9px 0}.todo>*:nth-child(2)>.select>*{display:flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;height:2.5rem;font-size:1.2rem;padding:.5rem 3rem .5rem 1rem;border-radius:10px;background-color:#174cb5;color:#fff;font-weight:bolder}.todo>*:nth-child(3)>ul.todo-list{display:flex;flex-direction:column;margin-top:2.5rem;min-width:25rem}.todo>*:nth-child(3)>ul.todo-list>*{display:flex;margin-bottom:2rem;height:2rem;align-items:center;justify-content:center;padding:0 .5rem}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(4),.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(3){outline:none;border:none;width:3rem;height:3rem;font-size:1.5rem}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(1){background-color:#b2d9d6;width:3rem;height:3rem;display:flex;justify-content:center;align-items:center}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(1)>*{font-size:1.5rem;font-weight:bolder;color:#747474}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(2){background-color:#efd7bb;width:15rem;height:3rem;padding:.5rem 1rem;overflow:scroll;overflow-y:hidden;white-space:nowrap}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(2)>*{font-weight:bolder;font-size:1.4rem;letter-spacing:.1rem}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(2)::-webkit-scrollbar{height:3px;background-color:transparent}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(2)::-webkit-scrollbar-thumb{background-color:#0000003b;width:1px}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(3){background-color:#5cd225}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(3)>*{color:#7fff33}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(4){background-color:#f14444}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(4)>*{color:#c00}@media screen and (max-width: 625px){body{align-items:flex-start;margin-top:3rem}.todo{width:90vw}.todo>*:nth-child(2){flex-direction:column}.todo>*:nth-child(2)>.todo-form{width:70vw}.todo>*:nth-child(3)>ul.todo-list>*{margin-bottom:1rem}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(3),.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(4){font-size:1rem}.todo>*:nth-child(3)>ul.todo-list>*>*:first-child,.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(3),.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(4){width:10vw;height:2rem}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(2){width:40vw;height:2rem}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(2)>*{font-size:.8rem}.todo>*:nth-child(3)>ul.todo-list>*>*:nth-child(1)>*{font-size:1rem}}