body{height:100vh;margin:0;font-family:Verdana,Geneva,Tahoma,sans-serif}input{font-family:Verdana,Geneva,Tahoma,sans-serif}#root{place-items:center;height:100vh;display:grid}.app{place-items:center;display:grid}.counter{background-color:#fcfc8c;border:4px solid orange;border-radius:15px;grid-template-columns:repeat(5,1fr);gap:10px;margin:30px;padding:15px;display:grid;box-shadow:5px 5px 5px 5px #f17a2b33,inset 0 0 7px 6px #ffa500b3}.counter>span{text-align:center;color:green;background-color:#90ee90;border:2px solid green;border-radius:15px;grid-column:1/5 span;grid-template-columns:40px 1fr 40px;align-items:center;padding:5px;font-size:30px;display:grid;box-shadow:inset -2px -2px 7px 3px #2f79354d}.counter>span>span,.counter>span>input{grid-column:2}.counter>span>input{text-align:center;color:green;background:0 0;border:none;outline:none;width:250px;margin:0;padding:0;font-size:30px}button{cursor:pointer;background-color:#afdbf7;border:2px solid #2a2a9c;border-radius:100px;outline:none;font-size:20px;box-shadow:2px 2px 2px 2px #2a2a9c33}button:hover{background-color:#fff}button:active{color:#fff;box-shadow:none;background-color:red;border-color:red}.app>button{font-size:30px;font-weight:500}.counter>span>button{box-shadow:none;color:#90ee90;background:0 0;border:none}.counter>span>button:hover{color:#000;cursor:pointer;background-color:#afdbf7;border:2px solid #2a2a9c;border-radius:100px;outline:none;font-size:20px;box-shadow:2px 2px 2px 2px #2a2a9c33}.counter>span>button:active{color:#fff;box-shadow:none;background-color:red;border-color:red}.all{font-size:35px;position:absolute;top:10px;right:10px}footer{font-size:12px;position:absolute;bottom:10px;left:10px}