body{display:flex;flex-direction:column;align-items:center;background-color:#f2f2f2;margin:0;padding:0}.stopwatch{display:flex;flex-direction:column;align-items:center;border:5px solid;border-radius:50px;padding:30px;background-color:#fff;box-shadow:0 0 10px #0003;margin-top:50px}.display{font-size:5rem;font-family:monospace;font-weight:700;color:#4d4d4d;text-shadow:2px 2px 2px hsla(0,0%,0%,.75);margin-bottom:25px}.controls{display:flex;flex-wrap:wrap;justify-content:center}.controls button{font-size:1.5rem;font-weight:700;padding:10px 20px;margin:5px;min-width:125px;border-radius:10px;border:none;color:#fff;transition:background-color .5s ease}.controls button:hover{cursor:pointer}.start-btn{background-color:#1c0}.start-btn:hover{background-color:#0d9900}.stop-btn{background-color:#f2330d}.stop-btn:hover{background-color:#c2290a}.reset-btn{background-color:#3da8f5}.reset-btn:hover{background-color:#0d93f2}@media (max-width: 768px){.stopwatch{padding:20px;border-radius:30px}.display{font-size:4rem}.controls button{font-size:1.2rem;min-width:100px}}@media (max-width: 480px){.stopwatch{padding:15px;border-radius:20px}.display{font-size:3rem}.controls{flex-direction:column}.controls button{font-size:1rem;min-width:150px;margin:10px 0}}@media (max-width: 320px){.stopwatch{padding:10px;border-radius:15px}.display{font-size:2.5rem}.controls button{font-size:.9rem;min-width:120px;margin:5px 0}}@media (max-width: 240px){.stopwatch{padding:5px;border-radius:10px}.display{font-size:1.7rem}.controls button{font-size:.7rem;min-width:100px;margin:5px 0;padding:5px}}