*{padding:0;margin:0;box-sizing:border-box}body{background-color:#f5f5f5;min-height:100dvh;min-width:100dvw;margin:0;padding:0;display:flex;align-items:center;justify-content:center}.container{height:80dvh;width:95dvw;max-width:800px;background-color:#fff;padding:20px;margin:10px;border-radius:10px;box-shadow:0 4px 8px #0000001a}.container h2{text-align:center;color:#333;font-size:24px;margin-bottom:20px;border-bottom:2px solid #ccc;padding-bottom:10px}.container h2 span{color:#28a745}form{display:flex;flex-direction:column;gap:15px}input[type=text],input[type=number]{width:100%;padding:10px;border-radius:5px;border:1px solid #ccc;font-size:16px}button{background-color:#28a745;color:#fff;padding:10px;border:none;border-radius:5px;cursor:pointer;font-size:16px}button:hover{background-color:#218838}ul{list-style-type:none;padding:0;margin:20px 0;height:33%;overflow:scroll;scroll-behavior:smooth}ul::-webkit-scrollbar{display:none}ul li{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid #ccc;font-size:16px}ul li:nth-child(2n){background-color:#f9f9f9}ul li button{background-color:#dc3545;border:none;padding:5px 10px;color:#fff;border-radius:5px;cursor:pointer}ul li button:hover{background-color:#c82333}p{font-size:18px;color:#333;font-weight:700;text-align:center}button.clear-all{background-color:tomato;margin-top:10px}button.clear-all:hover{background-color:#e5533f}@media (max-width: 600px){.container{padding:15px;margin:10px;overflow:hidden}input[type=text],input[type=number],button{font-size:14px;padding:8px}h2{font-size:20px}p{font-size:16px}}.Expanse-item{display:flex;justify-content:space-between;align-items:center;padding:10px;margin:10px 0;border-radius:5px;background-color:#f8f9fa;box-shadow:0 2px 5px #0000001a}.income{border-left:5px solid #28a745}.expense{border-left:5px solid #dc3545}.Expanse-details{flex-grow:1;display:flex;justify-content:space-between;align-items:center;gap:20px}.Expanse-text{font-weight:700;flex:2}.Expanse-category{font-style:italic;color:#6c757d;flex:1}.Expanse-amount{flex:1;font-weight:700;color:#333}.income .Expanse-amount{color:#28a745}.expense .Expanse-amount{color:#dc3545}.delete-btn{background-color:#ff7675;border:none;padding:8px 12px;border-radius:3px;color:#fff;cursor:pointer}.delete-btn:hover{background-color:#e74c3c}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;min-height:100dvh;min-width:100dvw}