:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;--clr-green: #2ecc71;--clr-red: #c0392b;--bg-card: #1a1a1a;--shadow: 0 4px 6px rgba(0, 0, 0, .3);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#f7f7f7;--bg-card: #ffffff;--shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)}}*{box-sizing:border-box}body{margin:0;display:flex;place-items:center;justify-content:center;min-width:320px;min-height:100vh}.container{margin:0 auto;width:100%;max-width:400px;padding:20px}h1{font-size:2em;text-align:center;margin-bottom:20px}h3{border-bottom:1px solid #777;padding-bottom:10px;margin:40px 0 10px;opacity:.8}.inc-exp-container{background-color:var(--bg-card);box-shadow:var(--shadow);padding:20px;display:flex;justify-content:space-between;margin:20px 0;border-radius:10px}.inc-exp-container>div{flex:1;text-align:center}.inc-exp-container>div:first-of-type{border-right:1px solid #777}.money{font-size:20px;letter-spacing:1px;margin:5px 0;font-weight:700}.money.plus{color:var(--clr-green)}.money.minus{color:var(--clr-red)}label{display:inline-block;margin:10px 0 5px}input[type=text],input[type=number]{border:1px solid #777;border-radius:5px;background-color:var(--bg-card);color:inherit;display:block;font-size:16px;padding:10px;width:100%}button.btn-add{cursor:pointer;background-color:#646cff;box-shadow:var(--shadow);color:#fff;border:0;display:block;font-size:16px;margin:20px 0 30px;padding:10px;width:100%;border-radius:5px;transition:background .3s}button.btn-add:hover{background-color:#535bf2}ul{list-style-type:none;padding:0;margin-bottom:40px}ul li{background-color:var(--bg-card);box-shadow:var(--shadow);display:flex;justify-content:space-between;position:relative;padding:10px;margin:10px 0;border-radius:5px}ul li.plus{border-right:5px solid var(--clr-green)}ul li.minus{border-right:5px solid var(--clr-red)}.delete-btn{cursor:pointer;background-color:var(--clr-red);border:0;color:#fff;font-size:20px;line-height:20px;padding:2px 8px;position:absolute;top:50%;left:0;transform:translate(-120%,-50%);border-radius:3px;opacity:0;transition:all .3s}ul li:hover .delete-btn{opacity:1}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}