.counter-container{display:flex;align-items:center;justify-content:center;gap:.5em}.increment{font-family:inherit;font-size:inherit;padding:.5em;background-color:#565c8f;border-radius:.6rem;border:2px solid hsl(234,25%,45%,0);color:#fff;outline:none;font-variant-numeric:tabular-nums}.increment:hover{background-color:#565c8fb3;cursor:pointer}.increment:focus{outline:2px solid hsl(234,25%,80%)}.increment:active{background-color:#446b9e33}.card-container,.add-card-container{width:70vw;display:grid;place-items:center;grid-template-columns:auto auto auto auto 1fr;gap:1em;border-radius:.75rem;background-color:#565c8f33;padding:1rem}input{background-color:#565c8f;border:none;border-radius:.6rem;padding:.75rem;color:#fff;box-sizing:border-box;font-family:Nunito;font-size:1.25rem}input:focus,.submit-button:focus{outline:2px solid hsl(234,25%,80%)}::placeholder{opacity:1;color:#bfc2d980}.submit-button{padding:1rem;font-size:1.25rem;border-radius:.6rem;border:none;background-color:#565c8f;color:#c3d350;justify-self:end}.submit-button:hover{background-color:#565c8fb3;cursor:pointer}.submit-button:active{background-color:#446b9e33}.card-name{border-radius:.6rem;padding:1rem;color:#565c8f;font-weight:600;grid-column:1 / span 2}@media screen and (max-width: 1080px){h1{font-size:3rem}.card-container,.add-card-container{width:80vw}.add-card-container{grid-template-rows:1fr 1fr;grid-template-columns:auto auto auto 1fr}input{width:100%;grid-column:1 / span 5}}@media screen and (max-width: 560px){input{grid-column:1 / span 3}.card-container{justify-items:left;grid-template-rows:1fr 1fr;grid-template-columns:auto auto auto}.card-container .submit-button{width:100%;grid-column:1 / span 3}.card-name{grid-column:1 / span 1}.owes{grid-column:1 / span 3}.kebab{grid-column:2 / span 2}.add-card-container{grid-template-rows:1fr .5fr 1fr 1fr;grid-template-columns:auto auto 1fr;justify-items:left}.add-card-container .submit-button{width:100%;grid-column:1 / span 3}}.container{display:flex;flex-direction:column;align-items:center;gap:1rem}