:root{--border-glow: inset 0 0 12px rgba(167, 235, 242, .35), 0 0 25px rgba(179, 218, 255, .45), 0 8px 30px rgba(0, 0, 0, .35);--colour-dark: rgb(229, 228, 228);--color-light: #38413e}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}body{min-height:100vh;margin:0;font-family:Commissioner,sans-serif;letter-spacing:.1rem}.wrapper{min-height:100vh;display:flex;flex-direction:column;flex:1;justify-content:center;align-items:center}body{background:#fff;background:radial-gradient(circle,#fff,#b1cccc);color:var(--color-light)}body.dark{background:#2a689b;background:radial-gradient(circle,#2a689b,#161e4d);color:var(--colour-dark)}header,footer{background-color:#bdd5ef}.dark header,.dark footer{background-color:#150540}.wave{fill:#bdd5ef}.dark .wave{fill:#150540}.light .svg--moon-icon{stroke:var(--color-light);background-color:#bdd5ef}.dark .svg--sun-icon{stroke:var(--colour-dark);background-color:#150540}.app{background:#a2bed1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(167,235,242,.2);box-shadow:0 20px 60px #00000073,0 0 40px #a7ebf226}.dark .app{background-color:#15185b}select,input{background-color:#c7dfe1;color:var(--color-light);border:none}.dark select,.dark input{background-color:#202d6d;color:var(--colour-dark);border:none}select:hover,input:hover,.btn:hover{box-shadow:var(--border-glow)}.dark select:focus,.dark input:focus{outline:none;border:1px solid #a7ebf2}.btn{background-color:#e9cdb1;color:var(--color-light)}.dark .btn{background-color:#514dcd;color:#fff}.budgetpost{background-color:#c7dfe1}.dark .budgetpost{background-color:#39377f}.dark .budgetpost__item{background-color:#575aa3}.budgetpost__item{background-color:#fff}.budgetpost__delete_btn{background-color:#efd2ee}.budgetpost__delete_btn:hover{box-shadow:var(--border-glow)}.dark .budgetpost__delete_btn{background-color:#69a1c9;cursor:pointer}.balance-section{background-color:#c7dfe1}.dark .balance-section{background-color:#202d6d}.app{width:100%;height:100vh;overflow-y:auto;padding:0}header{padding:.5rem}h1{padding:1rem;margin:0;text-align:center;text-transform:uppercase;font-size:1.7rem;font-weight:400;letter-spacing:.2rem}section{margin-inline:1rem;margin-bottom:3rem}@media(min-width:32em){body{display:flex;justify-content:center;align-items:center}.app{width:100%;max-width:26.25rem;height:85vh;border-radius:1.5rem;overflow-y:auto}}form{display:grid;gap:1rem}.category,.description,.amount{display:flex;flex-direction:column}.theme-toggle{width:2rem;height:2rem;border:none;position:relative}.theme-toggle .svg--sun-icon,.theme-toggle .svg--moon-icon{position:absolute;inset:0;margin:auto;transition:opacity .3s ease,transform .3s ease}.light .svg--moon-icon,.dark .svg--sun-icon{opacity:1;transform:rotate(0)}select,input,.btn{border-radius:2rem;border:none;cursor:pointer;padding:.7rem;font-weight:500;font-family:Commissioner,sans-serif;letter-spacing:.05rem}.budgetpost-list{list-style:none;padding:0;margin-top:2rem;font-weight:500;font-size:.9rem;font-family:Commissioner,sans-serif;letter-spacing:.05rem}.budgetpost-list:empty{padding:0;margin:0}.budgetpost ul{padding-left:0}.budgetpost{border-radius:1rem;padding:1rem;margin-top:.5rem}.budgetpost__item{display:flex;gap:1rem;align-items:center;padding-inline:.7rem;padding-block:.5rem;margin-block:.5rem;border-radius:.5rem}.budgetpost__description{flex:1;text-align:left}.budgetpost__amount{font-weight:700;white-space:nowrap}.budgetpost__delete_btn{margin-left:.5rem;border:none;border-radius:.25rem;padding-inline:.4rem;padding-block:.2rem}.balance{width:8rem;height:8rem;display:flex;align-items:center;justify-content:center;border-radius:50%;text-align:center;padding:.7rem;margin:2rem auto;transition:background-color .3s ease,color .3s ease;font-weight:700}footer{padding:3rem}.balance-section{padding:.5rem;border-radius:1rem;font-size:1.2rem}.balance-positive{color:#428569;box-shadow:0 0 0 4px #65928699}.dark .balance-positive{color:#00e0a4;box-shadow:0 0 0 4px #00e0a499}.balance-negative{color:#df4343;box-shadow:0 0 0 4px #ff6b6b99}.dark .balance-negative{color:#f74545;box-shadow:0 0 0 4px #fd464699}.balance-zero{color:#666;box-shadow:0 0 0 4px #76767680}.dark .balance-zero{color:#ccc;box-shadow:0 0 0 4px #c8c8c880}