*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;text-rendering:optimizeLegibility;font-size:1.2rem;display:grid;place-items:center;height:100vh;width:100%;background:linear-gradient(to bottom,#01f,#660080)}#root{margin:0 auto;border:2px solid red;text-align:center;background:linear-gradient(to right,red,#ff0,green);width:1300px;height:650px;border-radius:15px}h1{color:#1807b6;text-transform:uppercase;margin:50px 30px;font-size:3rem}#root div{display:inline-block;border:2px solid rgb(0,0,0);margin:20px;padding:10px 20px;border-radius:10px;background-color:#f0f8ff}h2{color:#033544;margin:25px 10px;padding:10px;font-size:3rem;text-transform:capitalize}h4{color:#9904df;margin:25px 10px;padding:10px;font-size:2rem;text-transform:capitalize}button{width:50px;height:50px;border-radius:50%;margin:5px 5px 20px;border:2px solid black;font-size:25px;font-weight:500;line-height:1;cursor:pointer;box-shadow:0 3px 10px #0407b3fb;transition:background-color .3s,box-shadow .3s,transform .2s}.increment{background-color:green}.decrement{background-color:red}.increment:hover{background-color:#013001;color:#fff}.decrement:hover{background-color:#830404;color:#fff}button:active{transform:translateY(2px)}@media(max-width:768px){body{font-size:1rem}#root{width:95%;height:auto;min-height:80vh;margin:20px auto}h1{margin:30px 10px;font-size:2rem}#root div{display:block;width:calc(100% - 40px);margin:15px auto;padding:10px}h2{font-size:2rem;margin:15px 5px;padding:5px}h4{font-size:1.5rem;margin:15px 5px;padding:5px}button{width:45px;height:45px;font-size:20px;margin:5px 5px 10px;box-shadow:0 2px 5px #0407b3fb}}