*{margin:0;padding:0;box-sizing:border-box}body{font-family:sans-serif;background-color:var(--alabaster)}:root{--grey-50: #f0f4f8;--grey-100: #d9e2ec;--grey-200: #bcccdc;--grey-300: #9fb3c8;--grey-400: #829ab1;--grey-500: #627d98;--grey-600: #486581;--grey-700: #334e68;--grey-800: #243b53;--grey-900: #102a43;--ash-gray: #b4b8ab;--dark-blue: #153243;--dark-blue-opacity: #1532433f;--light-coral: rgb(229, 215, 209);--dark-coral: rgb(222, 206, 199);--mint: #bae1db;--dark-mint: #c1e5e0;--alabaster: #eef0eb;--dark-alabaster: #e4e8e0;--white: #ffffff}.app{width:100vw;min-height:100vh;display:flex;flex-direction:column;align-items:center;background-color:var(--alabaster);padding-bottom:4em}.heading{font-size:2rem;margin:.7em 0;color:var(--dark-blue);text-align:center}@media screen and (min-width: 750px){.heading{font-size:2.5rem}}.input{display:flex;flex-direction:column;width:75%;max-width:1000px}.input__wrapper{display:flex;align-items:center;position:relative}.input__field{width:100%;border-radius:3px;padding:.85em 1em;font-size:1rem;border:none;outline:none;position:relative;z-index:2}.input__field::placeholder{color:var(--ash-gray)}.input:focus-within:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--dark-blue-opacity);z-index:1}.input__btn{position:absolute;background-color:var(--alabaster);right:0;margin-right:.85em;padding:.5em 1.6em;text-align:center;color:var(--dark-blue);text-transform:uppercase;border:none;border-radius:3px;transform-origin:center;z-index:2;transition:all .2s ease}.input__btn:hover{background-color:var(--dark-alabaster);box-shadow:0 .2px .4px #00000002,0 .5px .9px #00000003,0 .9px 1.8px #00000004,0 1.6px 3.1px #00000005,0 2.9px 5.8px #00000006,0 7px 14px #00000008}.input__btn:active{transform:scale(.95)}.input__toggle-desc{position:absolute;right:9em;background-color:var(--alabaster);border:none;border-radius:3px;color:var(--dark-blue);font-size:.8rem;cursor:pointer;padding:.5em 1em;white-space:nowrap;text-transform:uppercase;transform-origin:center;z-index:2;transition:all .2s ease}.input__toggle-desc:hover{background-color:var(--dark-alabaster);box-shadow:0 .2px .4px #00000002,0 .5px .9px #00000003,0 .9px 1.8px #00000004,0 1.6px 3.1px #00000005,0 2.9px 5.8px #00000006,0 7px 14px #00000008}.input__toggle-desc:active{transform:scale(.95)}.input__description{width:100%;border-radius:3px;padding:.7em 1em;font-size:.9rem;font-family:inherit;border:none;outline:none;resize:vertical;position:relative;z-index:2;margin-top:1em}.input__description::placeholder{color:var(--ash-gray)}.tasks{display:flex;justify-content:space-evenly;flex-wrap:wrap;width:75%;max-width:1000px;margin-top:2em;padding:2em 1em;border-radius:3px;background-color:var(--mint)}.container{display:flex;flex-direction:column;align-items:center;width:100%}.allTask__heading{text-transform:uppercase;font-size:1.3rem;color:var(--white)}.completed{background-color:var(--light-coral)}@media screen and (min-width: 750px){.container{flex-direction:row;gap:1.5em;justify-content:space-between;align-items:flex-start;width:75%;max-width:1000px}.tasks{width:50%}}.single__task{display:flex;flex-wrap:wrap;align-items:center;width:100%;padding:.8em 1.2em;margin-top:1em;border-bottom:1px solid var(--alabaster)}.single__task--text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:none;font-size:1rem;color:var(--dark-blue)}.single__task--text:focus{outline:none}.icon{color:var(--dark-blue);margin-left:.5em;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;transition:color .2s ease}.icon:hover{color:var(--grey-400)}.icons{display:flex;align-items:center}.edit__input{border-radius:3px;padding:.4em .5em;width:70%}.single__task--content{flex:1;display:flex;flex-direction:column;min-width:0}.single__task--title-row{display:flex;align-items:center;gap:.3em}.single__task--description{font-size:.85rem;color:var(--grey-500);margin-top:.6em;white-space:pre-wrap;flex-basis:100%}.desc-toggle{display:inline-flex;align-items:center;cursor:pointer;transition:transform .1s ease;flex-shrink:0;width:1.2rem;height:1.2rem}.desc-toggle.rotated{transform:rotate(180deg)}.edit__description{flex-basis:100%;border-radius:3px;padding:.4em .5em;font-size:.85rem;font-family:inherit;border:1px solid var(--grey-200);outline:none;resize:none;overflow:hidden;margin-top:.4em;color:var(--dark-blue)}.edit__description::placeholder{color:var(--ash-gray)}.drag__active{background-color:var(--dark-mint)}.drag__complete{background-color:var(--dark-coral)}