@import"https://fonts.googleapis.com/css?family=Lato&display=swap";body{background-color:#f7f7f7;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;margin:0;font-family:Lato,sans-serif}.container{margin:30px auto;width:350px}h1{letter-spacing:1px;margin:0}h3{border-bottom:1px solid #bbb;padding-bottom:10px;margin:40px 0 10px}h4{margin:0;text-transform:uppercase}@media (max-width: 320px){.container{width:300px}}.balance-container{background-color:#f4f4f4;padding:20px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px;box-shadow:0 4px 6px #0000001a;text-align:center;margin-bottom:20px}.balance-title{color:#555;font-size:1.2rem;margin-bottom:10px}.balance-container .money{font-size:2rem;font-weight:700;margin:0}.money .positive{color:#2ecc71}.money .negative{color:#e74c3c}.header-title{text-align:center;color:#333;margin-top:20px;margin-bottom:20px;font-size:2rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;background-color:#f8f9fa;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;transition:all .3s ease}.header-title:hover{background-color:#e9ecef;transform:translateY(-2px);box-shadow:0 4px 8px #0003}.inc-exp-container{background-color:#fff;box-shadow:var(--box-shadow);border-radius:8px;padding:20px;display:flex;justify-content:space-between;margin:20px 0;transition:all .3s ease}.inc-exp-container:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003}.inc-exp-container>div{flex:1;text-align:center;transition:all .3s ease}.inc-exp-container>div:hover{transform:scale(1.05)}.inc-exp-container>div:first-of-type{border-right:1px solid #dedede}.money{font-size:20px;letter-spacing:1px;margin:5px 0;transition:all .3s ease}.money.plus{color:#2ecc71}.money.minus{color:#c0392b}.add-transaction-container{background-color:#f9f9f9;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-bottom:20px}.add-transaction-container h3{font-size:1.5rem;color:#333;margin-bottom:10px;text-align:center}.add-transaction-container .form-control{margin-bottom:20px}.add-transaction-container label{display:block;margin-bottom:5px;font-weight:700;color:#555}.add-transaction-container input[type=text],.add-transaction-container input[type=number]{width:100%;padding:10px;font-size:16px;border:1px solid #ddd;border-radius:5px}.add-transaction-container button.btn{display:block;width:100%;padding:10px;font-size:16px;background-color:#6c5ce7;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.add-transaction-container button.btn:hover{background-color:#4834d4}.list{list-style-type:none;padding:0;margin-bottom:40px}.list li{background-color:#fff;box-shadow:var(--box-shadow);color:#333;display:flex;justify-content:space-between;align-items:center;position:relative;padding:10px;margin:10px 0;border-radius:5px;transition:box-shadow .3s ease}.list li:hover{box-shadow:0 4px 8px #0003}.list li.plus{border-right:5px solid #2ecc71}.list li.minus{border-right:5px solid #c0392b}.list li span{font-weight:700}.btn{cursor:pointer;background-color:#9c88ff;box-shadow:var(--box-shadow);color:#fff;border:0;display:block;font-size:16px;margin:10px 0 30px;padding:10px;width:100%}.list li .delete-btn{cursor:pointer;background-color:#e74c3c;border:none;color:#fff;font-size:20px;line-height:20px;padding:5px 10px;position:absolute;border-radius:5px;top:50%;right:100%;opacity:0;transition:opacity .3s ease;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.list li:hover .delete-btn{opacity:1}:root{--box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)}*{box-sizing:border-box}