@import url(https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@400;500;600;700;800&family=Muli:ital,wght@0,200;0,300;0,400;1,200;1,300;1,400&display=swap);*{margin:0;padding:0}html{font-size:62.5%}.container{align-items:center;background-color:#77c987;display:flex;height:100vh;justify-content:center;width:100%}.app-wrapper{grid-gap:1rem;background-color:#2c2c2d;border-radius:.5rem;box-shadow:0 1rem 5rem rgba(0,0,0,.7);color:#eee;display:grid;grid-template-columns:minmax(38%,40rem) repeat(2,minmax(29%,29rem));grid-template-rows:repeat(10,1fr);height:80vh;max-width:150rem;width:90%}.header{align-items:center;display:flex;grid-column:1/2;grid-row:1/4;justify-content:center;text-align:center}.header h1{color:#f46036;font-family:Muli,serif;font-size:6rem;font-weight:300;letter-spacing:.2rem;text-shadow:0 .2rem .5rem rgba(0,0,0,.4);text-transform:uppercase}.balance{align-items:center;display:flex;flex-direction:column;grid-column:1/1;grid-row:3/-1;margin-top:10rem;text-align:center}.balance h2{font-size:4.5rem}.balance h2,.balance h3{font-family:Baloo Da\ 2,serif;font-weight:300;text-shadow:0 .2rem .5rem rgba(0,0,0,.4)}.balance h3{font-size:4rem}.income-expense{display:flex;font-family:Muli,serif;justify-content:space-evenly;margin-top:10rem;text-align:right;text-shadow:0 .2rem .5rem rgba(0,0,0,.4)}.minus,.plus{margin:0 2rem}.plus{color:#77c987}.minus{color:#ff716e}.income-expense h3{font-size:3.5rem;font-weight:300;margin-bottom:2rem;width:100%}.income-expense p{font-size:3rem;font-weight:700;text-align:center}.form-wrapper{display:grid;grid-column:2/-1;grid-row:2/4;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.input-group{display:flex;flex-direction:column}.income{grid-column:1/2;grid-row:1/-1}.expense{grid-column:2/-1;grid-row:1/-1}.input-group input:not([type=submit]){background:transparent;border:none;border-bottom:.2rem solid #777;color:#eee;font-family:Baloo Da\ 2,serif;font-size:1.8rem;margin-bottom:2.5rem;outline:none;padding:.5rem .5rem .5rem 0;transition:border-bottom .4s;width:30rem}.income input:not([type=submit]):focus{border-bottom:.2rem solid #77c987}.expense input:not([type=submit]):focus{border-bottom:.2rem solid #ff716e}.input-group input[type=submit]{border:none;border-radius:.7rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);color:#eee;cursor:pointer;font-family:Muli,serif;font-size:1.6rem;font-weight:700;letter-spacing:.1rem;margin-top:1rem;outline:none;padding:.7rem;text-shadow:0 .2rem .5rem rgba(0,0,0,.4);width:10rem}.input-group input[type=submit]:active{transform:translateY(.3rem)}.income input[type=submit]{background-color:#77c987}.expense input[type=submit]{background-color:#ff716e}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.transactions{margin-top:3rem}.transactions h2{font-family:Baloo da\ 2,serif;font-size:2.5rem;font-weight:300;letter-spacing:.1rem;margin-bottom:2rem}.transactions-income{grid-column:2/3;grid-row:5/-1}.transactions-expense{grid-column:3/-1;grid-row:5/-1}.transaction-list{max-height:35rem;overflow:hidden;overflow-y:auto;width:92%}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background-color:#aaa;border-radius:10px}::-webkit-scrollbar-thumb{background:#444;border-radius:10px}.transaction{border-radius:.3rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);color:#fff;display:flex;font-family:Baloo da\ 2,serif;font-size:1.8rem;justify-content:space-between;letter-spacing:.1rem;list-style:none;margin-bottom:1.5rem;padding:.4rem .4rem .4rem .7rem;width:32rem}.transactions-income .transaction{background-color:#5a9b67}.transactions-expense .transaction{background-color:#cf5856}.transaction-text{width:23rem}.transaction-amount{transform:translateX(3rem)}.delete-btn{background-color:initial;border:none;color:#d4403e;cursor:pointer;font-size:2rem;margin:0 1rem;outline:none;text-shadow:0 .2rem .5rem rgba(0,0,0,.4);transform:translateX(4rem)}@media (max-width:1500px){html{font-size:58%}.app-wrapper{height:85vh;max-width:140rem;width:95%}.balance{margin-top:6rem}.income-expense{margin-top:7rem}.transaction-list{max-height:31rem}.transaction{width:30rem}}@media (max-width:1200px){html{font-size:52%}.app-wrapper{grid-gap:0}.transaction-list{max-height:29rem}.transaction{width:28rem}}
/*# sourceMappingURL=main.8d7c9782.css.map*/