style.css

:root{--main-font-color:#363f5f;--green:#49aa26;--light-green:#3dd705;--expense:#e92929;--main-light-color:#ffffff;--table-color:#ffffff;--header-bg-color:#2d4a22;--bg-color:#f0f2f5}@media (prefers-color-scheme:dark){:root{--main-font-color:#f0f2f5;--green:#49aa26;--light-green:#555;--expense:#e92929;--main-light-color:#1f1b24;--table-color:#121212;--header-bg-color:#121212;--bg-color:#1f1b24}.card{box-shadow:0 5px 7px rgba(0,0,0,.479)}}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg-color);font-family:Poppins,Arial,Helvetica,sans-serif}html{font-size:93.75%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.container{width:min(90vw,800px);margin:auto}header{background:#121212;padding:2rem 0 10rem;text-align:center}.header-container{display:inline-block;position:relative;width:min(90vw,800px)}.theme-switcher.button{position:absolute;right:0;top:10px;color:var(--green);padding:2px 6px;border:1px solid;border-radius:.25rem;cursor:pointer}.theme-switcher.button:hover{color:#3dd705}header h1{color:var(--main-light-color);font-weight:100}#balance{margin-top:-8rem}#balance h2{color:var(--main-light-color)}h2{margin-top:3.2rem;margin-bottom:.8rem;color:var(--main-font-color);font-weight:400}.card{background:var(--main-light-color);padding:1.5rem 2rem;border-radius:.25rem;margin-bottom:2rem;color:var(--main-font-color);box-shadow: 0 5px 7px rgba(0, 0, 0, .479);}.card h3{font-weight:400;font-size:1rem;display:flex;align-items:center;justify-content:space-between}.card p{font-size:2rem;line-height:3rem;margin-top:1rem}.card:last-child{background-color:var(--green);color:var(--main-light-color)}.svg{stroke:var(--main-light-color)}a{color:var(--green);text-decoration:none;transition:color .2s}a:hover{color:var(--light-green)}.button.new{display:inline-block;margin-bottom:.8rem}button{width:100%;height:50px;border:none;color:var(--main-light-color);background:var(--green);padding:0;border-radius:.2rem;cursor:pointer;transition:.2s;font-size:1rem}button:hover{background:#3dd705}.button.cancel{color:#ffffff;border-radius:.2rem;height:50px;display:flex;align-items:center;justify-content:center;transition:.2s;background: #49aa26;}.button.cancel:hover{color:#ffffffb6}#data-table{display:block;width:100%;border-spacing:0 .5rem;color:#000000;overflow-x:auto}#data-table img{cursor:pointer}table th{background-color:var(--table-color);font-weight:400;padding:1rem 2rem;text-align:left;width:100%}table td{width:100%;background-color:var(--table-color);padding:1rem 2rem;white-space:nowrap}table tbody tr{opacity:.7;transition:opacity .2s}table tr:hover{opacity:1}table tbody tr td:first-child,table thead tr th:first-child{border-radius:.25rem 0 0 .25rem}table tbody tr td:last-child,table thead tr th:last-child{border-radius:0 .25rem .25rem 0}table img{display:block}td.description{color:var(--main-font-color)}td.income{color:#12a454}td.expense{color:var(--expense)}.modal-overlay{height:100%;width:100%;background-color:rgba(0,0,0,.7);position:fixed;top:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;z-index:100}.modal-overlay.active{opacity:1;visibility:visible}.modal{background:var(--bg-color);padding:2.4rem}.form{max-width:500px}.form h2{margin-top:0}.input-group{margin-top:.8rem}input{border:none;width:100%;font-family:Poppins,Arial,Helvetica,sans-serif;border-radius:.2rem;padding:.8rem;outline:0;transition:box-shadow .2s}input:focus,input:hover{box-shadow:inset 0 0 0 2px #12a454}.input-group small{opacity:.5;color:var(--main-font-color)}.input-group.actions{display:flex;align-items:center;justify-content:space-between}.input-group.actions .button,.input-group.actions button{width:48%}footer{text-align:center;padding:4rem 0 2rem;color:var(--main-font-color);opacity:.6;z-index:0}footer a{color:var(--main-font-color);transition:none}footer a:hover{color:var(--main-font-color);text-decoration:underline}@media only screen and (min-width:800px){html{font-size:87.5%}#balance{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}}