body{background-color:beige;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;margin:0 auto;font-family:Arial,Helvetica,sans-serif;display:flex}.app{background-color:#deb887;border:1px solid #d3d3d3;border-radius:6px;width:300px;padding:10px 20px 20px;box-shadow:0 16px 32px #000000b3}.counter{flex-direction:row;justify-content:center;align-items:center;display:flex}h1{text-align:center;color:brown;border-bottom:2px solid brown;margin:0 0 30px;padding-bottom:10px;font-size:2rem;font-weight:300}button{color:#fff;border:none;border-radius:4px;width:40%;padding:6px 10px}.plus{background-color:#00f;margin-right:5px}.minus{background-color:red;margin-left:5px}span{color:brown;text-align:center;background-color:#fff;border:1px solid #d3d3d3;border-radius:4px;width:12%;padding:10px 12px;font-size:1.25rem;font-weight:700}.reset{text-align:center;margin:10px auto}.reset-btn{color:#fff;background-color:brown;width:100%;margin:0;padding:6px 10px}@media screen and (width>=540px){.counter,button{font-size:1.125rem}}@media screen and (width>=768px){.app{width:360px}.counter,button{font-size:1.25rem}button,.reset-btn{padding:8px 12px 10px}span{padding:16px 12px;font-size:1.875rem}}