@import"https://fonts.googleapis.com/css2?family=Poppins&display=swap";.App{--padding: 15px;--radius: 15px;--color: #5f5f5f;position:absolute;height:650px;width:400px;color:var(--color);top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:10px;background:#f5f5f5;padding:var(--padding);border-radius:var(--radius);border:solid 1px hsl(0,0%,50%);box-shadow:0 0 5px #535353}.App:before{content:"";background:var(--color);position:absolute;z-index:20;left:50%;transform:translate(-50%,calc(calc(-1 * var(--padding)) - 50%));height:calc(var(--padding) * 2);width:calc(var(--padding) * 5);border-radius:10px 10px 0 0}.Todos{width:100%;flex-grow:1;display:flex;overflow-y:auto;flex-direction:column;color:#000;padding-top:var(--padding);gap:5px}.Todo{display:flex;height:45px;width:100%;align-items:center;justify-content:start;gap:10px}.Todo input{height:23px;width:23px}.Todo p{background-color:#f96666e6;padding:8px;border:transparent;border-radius:10px;max-width:330px;overflow-x:auto}.Form{height:10%;width:100%;display:flex;flex-direction:row;align-items:center;gap:10px}header{background:var(--color);color:#f5f5f5;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);height:calc(var(--padding) * 2.5);width:50%;gap:20px;margin-left:auto;margin-right:auto}header button{appearance:none;padding:10px;border:solid 3px var(--color);color:var(--color);background-color:#f5f5f5;border-radius:10px;position:absolute;right:var(--padding)}header button:hover,header button:focus{cursor:pointer}main{flex:1;height:90%;display:flex;flex-direction:column;gap:10px;border-top:solid 5px var(--color)}h2{text-decoration:underline}form>*{height:90%}form input{font-family:Poppins,sans-serif;flex-grow:3;border:solid 1px black;border-radius:10px;padding:10px;font-size:15px}form button{flex-grow:1;padding:10px;border:solid 1px black;border-radius:10px;background-color:var(--color);color:#fff;font-size:16px}form button :hover,form button :focus{opacity:.5;cursor:pointer}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#f5f5f5}::-webkit-scrollbar-thumb{background:var(--color)}::-webkit-scrollbar-thumb:hover{background:#555}:root{color-scheme:light dark;color:#5f5f5f;font-size:16px;font-family:Poppins,sans-serif;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%}*,:before,:after{margin:0;padding:0;box-sizing:border-box}body{width:100%;min-height:100svh;background:conic-gradient(from 0deg,rgb(78,108,80,.9) 0 25%,rgb(249,102,102,.9) 0 50%,rgb(123,143,161,.9) 0 75%,rgba(245,245,245,.9) 0 100%)}