body{font-family:Poppins,sans-serif;padding:0;margin:0;display:flex;height:100vh;width:100vw;background:var(--bg-color);box-sizing:border-box}:root{--bg-color: #1E201E;--text-color: #ECDFCC;--primary-color: #697565;--secondary-color: #3C3D37}[data-theme=dark]{--bg-color: #1E201E;--text-color: #ECDFCC;--primary-color: #697565;--secondary-color: #3C3D37;--spinner-color: #EFF3EA}[data-theme=dark] .svg1,[data-theme=dark] .svg2,[data-theme=dark] .svg3{filter:invert(85%) sepia(10%) saturate(120%) hue-rotate(20deg)}[data-theme=light]{--bg-color: #ced3be;--text-color: #070707;--primary-color: #EFF3EA;--secondary-color: #e0ddc5;--spinner-color: #3C3D37}[data-theme=light] .svg1,[data-theme=light] .svg2,[data-theme=light] .svg3{filter:invert(10%) sepia(20%) saturate(200%) hue-rotate(350deg)}.rightsection{transition:.4s,margin-left .3s ease-in-out;background-image:url(/beach.webp);width:calc(100% - 300px);max-width:100%;height:100vh;background-position:center;background-size:cover;background-repeat:no-repeat;position:absolute;right:0}.leftsection.open~.rightsection{width:100%}.controls{height:13%;width:100%;display:flex;align-items:center;justify-content:center;color:var(--text-color);opacity:.9}.controls div{position:relative;left:auto;display:flex;justify-content:space-evenly;align-items:center;background:var(--secondary-color);transition:background .3s,color .3s;height:2.5rem;width:15%;min-width:150px;max-width:250px;border-radius:30px;box-shadow:4px 4px 5px #0000004d}.controls div button{border-color:transparent;background:transparent;font-size:1.2rem}.controls .svg1{height:1.5rem;cursor:pointer}.controls .svg2{height:1.6rem;cursor:pointer}.controls .svg3{height:1.85rem;cursor:pointer}.content{width:850px;height:87%;min-width:70%;max-width:90%;display:flex;align-items:center;justify-content:center;color:var(--text-color);transition:opacity .3s;opacity:0}.content.show{opacity:1}.content.hide{opacity:0}.content div{width:80%;height:90%;display:flex;justify-content:space-evenly;flex-direction:column;align-items:start;transition:margin-left .3s,width .3s}.content div header{opacity:.9;display:flex;justify-content:center;align-items:center;background:var(--secondary-color);transition:background .3s,color .3s;height:2.5rem;width:30%;min-width:180px;border-radius:30px;cursor:default;box-shadow:4px 4px 5px #0000004d}.content div textarea{opacity:.9;height:80%;width:100%;box-sizing:border-box;padding:18px;font-size:1rem;background:var(--secondary-color);transition:background .3s,color .3s;color:var(--text-color);border:transparent;resize:none;border-radius:30px;box-shadow:4px 4px 5px #0000004d}.leftsection.open~.rightsection .content div{margin-left:50px;width:85%}.description:focus{opacity:.95;outline:transparent}@media (max-width: 768px){.rightsection{width:100%}.leftsection.open~.rightsection{width:100%}.controls{height:9%;justify-content:end}.controls div{margin:10px 8px 0 0;width:30%;max-width:none}}.leftsection{width:60%;max-width:300px;min-width:225px;height:100vh;background-color:var(--bg-color);transition:background .3s,color .3s,transform .3s ease-in-out;color:var(--text-color);box-sizing:border-box;display:flex;flex-direction:column;position:fixed;left:0;transform:translate(0);z-index:100}.leftsection.open{transform:translate(-100%)}.leftsection .title{display:flex;width:80%;justify-content:end;align-items:center;padding:1.5rem 0 1rem;font-size:2rem;letter-spacing:1.5px;font-weight:600;cursor:default}.spinner{background-image:linear-gradient(var(--primary-color) 35%,var(--spinner-color));width:3.2rem;height:3.2rem;animation:spinning 1.7s linear infinite;text-align:center;border:transparent;border-radius:50px;filter:blur(1px);box-shadow:0 -5px 20px 0 var(--primary-color),0 5px 20px 0 var(--spinner-color);cursor:pointer;position:fixed;top:15px;left:20px;z-index:1100}.spinnerin{background-color:var(--bg-color);transition:background .3s,color .3s;width:50px;height:50px;border-radius:50px;filter:blur(10px)}.leftsection form{height:20%;display:flex;justify-content:space-evenly;align-items:center;flex-direction:column}.inputfield{color:var(--text-color);background:var(--primary-color);transition:background .3s,color .3s;height:2rem;font-size:1rem;width:80%;padding:2px 5px;border-radius:30px;border-color:transparent;box-shadow:4px 4px 5px #0000004d}.inputfield:focus{outline:2px solid var(--secondary-color)}.addbutton{color:var(--text-color);background:var(--secondary-color);transition:background .3s,color .3s;height:2.5rem;border-radius:30px;width:85%;font-weight:600;cursor:pointer;border-color:transparent;box-shadow:4px 4px 5px #0000004d}.addbutton span{font-size:1rem}.tasklist{display:flex;align-items:center;flex-direction:column;flex-grow:1;padding:1rem 0;gap:10px;height:300px;width:100%;overflow-y:auto;overflow-x:hidden;border-radius:20px}.taskitem{display:flex;justify-content:space-between;align-items:center;min-height:2rem;width:80%;border-radius:30px;background-color:var(--primary-color);color:var(--text-color);box-shadow:4px 4px 5px #0000004d;padding:5px 10px;opacity:0;cursor:pointer;transition:opacity .4s ease-in-out,transform .3s ease;transform:scale(.9)}.taskitem.added{opacity:1;transform:scale(1)}.taskitem.removed{opacity:0;transform:scale(.9)}.taskitem .textarea{margin-left:10px}.taskitem .itembtn{transition:.3s ease;height:1.6rem;width:1.6rem;background-color:var(--secondary-color);color:var(--text-color);box-shadow:1px 2px 2px #0000004d;border-color:transparent;margin-right:10px;border-radius:50%;cursor:pointer}.itembtn:hover{background-color:var(--primary-color);transform:scale(1.1)}@keyframes spinning{to{transform:rotate(360deg)}}@media (max-width: 768px){.leftsection form{height:17%}.spinner{left:1rem}.tasklist{height:400px}}