@keyframes showReaction { 20% { transform: scale(1.4);
    opacity: 1; }
  25% { transform: scale(0.9); }
  50% { transform: scale(1);
    opacity: 1; } }

.stopwatch-container .stopwatch-body .handle-spot::after { box-shadow: -5px -6px 4px -6px rgba(0, 0, 0, 0.68); }

.stopwatch-container .stopwatch-body .stopwatch-box .stopwatch-hole { box-shadow: inset 2px -11px 4px -27px rgba(0, 0, 0, 0.75); }

.stopwatch-container .stopwatch-body .stopwatch-box .stopwatch-hole .stopwatch-inner-hole { box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.75); }

.stopwatch-container .stopwatch-body .controls .button, .stopwatch-container .stopwatch-body .stopwatch-box, .stopwatch-container .stopwatch-body .stopwatch-box .stopwatch { box-shadow: inset 0px -8px 47px -14px rgba(0, 0, 0, 0.75); }

.stopwatch-container .stopwatch-body .handle-spot { box-shadow: inset 0px -8px 27px -14px rgba(0, 0, 0, 0.75); }

.stopwatch-container .stopwatch-body, .stopwatch-container .stopwatch-body .stopwatch-box .stopwatch, .stopwatch-container .record-list-container h4, .stopwatch-container .record-list-container .results .record { box-shadow: 0px 9px 14px -5px rgba(0, 0, 0, 0.68); }

.stopwatch-container .stopwatch-body .controls .button::after, .stopwatch-container .stopwatch-body .controls .button::before, .stopwatch-container .stopwatch-body .strips-controls .strip, .stopwatch-container .stopwatch-body .strips-controls .strip .inner-strip, .stopwatch-container .stopwatch-body .handle-spot .handle-strip { box-shadow: -3px 2px 2px -1px rgba(0, 0, 0, 0.75); }

body { overflow: hidden; font-family: 'Baloo Chettan', cursive; background-color: gray; }

.stopwatch-container { height: 100vh; width: 100vw; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; padding-top: 100px; }

.stopwatch-container .stopwatch-body { box-sizing: border-box; padding: 0; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; height: 300px; width: 300px; border-radius: 50%; position: relative; }

.stopwatch-container .stopwatch-body .controls { z-index: 1; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; height: 100%; width: 100%; border-radius: 50%; position: absolute; top: 0; }

.stopwatch-container .stopwatch-body .controls .button { padding: 2px 0; height: 18px; border-bottom: 10px solid #e99802; width: 65px; text-align: center; font-size: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; position: absolute; text-decoration: none; color: white; cursor: pointer; transition: all 0.1s ease; }

.stopwatch-container .stopwatch-body .controls .button::after, .stopwatch-container .stopwatch-body .controls .button::before { content: ''; display: block; opacity: 0; width: 4px; background-color: #e90000; border: 2px solid #ffd900; position: absolute; top: -40px; border-radius: 5px; }

.stopwatch-container .stopwatch-body .controls .button::after { height: 20px; left: 5px; transform: rotate(-12deg); }

.stopwatch-container .stopwatch-body .controls .button::before { height: 18px; top: -40px; left: 20px; transform: rotate(12deg); }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(1) { background-color: green; left: 5%; transform: translateX(-32.5px) translateY(45px) rotate(-56deg); }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(1).active { background-color: lightgreen; transform: translateX(-30.5px) translateY(47px) rotate(-56deg); }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(1).active:after, .stopwatch-container .stopwatch-body .controls .button:nth-of-type(1).active:before { animation: showReaction .6s forwards ease; }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(2) { background-color: #7a0101; left: 25%; transform: translateX(-32.5px) translateY(-9px) rotate(-28deg); }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(2).active { background-color: red; transform: translateX(-30.5px) translateY(-6px) rotate(-28deg); }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(2).active:after, .stopwatch-container .stopwatch-body .controls .button:nth-of-type(2).active:before { animation: showReaction .6s forwards ease; }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(3) { background-color: black; left: 50%; transform: translateX(-32.5px) translateY(-28px); }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(3):active { background-color: #b80000; transform: translateX(-32.5px) translateY(-23px); }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(3):active:after, .stopwatch-container .stopwatch-body .controls .button:nth-of-type(3):active:before { animation: showReaction 0.2s forwards ease; }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(4) { background-color: blue; left: 75%; transform: translateX(-32.5px) translateY(-9px) rotate(28deg); }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(4):active { background-color: lightskyblue; transform: translateX(-34.5px) translateY(-6px) rotate(28deg); }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(4):active:after, .stopwatch-container .stopwatch-body .controls .button:nth-of-type(4):active:before { animation: showReaction 0.2s forwards ease; }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(5) { background-color: crimson; left: 95%; transform: translateX(-32.5px) translateY(45px) rotate(56deg); }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(5):active { background-color: #a70324; transform: translateX(-35.5px) translateY(47px) rotate(56deg); }

.stopwatch-container .stopwatch-body .controls .button:nth-of-type(5):active:after, .stopwatch-container .stopwatch-body .controls .button:nth-of-type(5):active:before { animation: showReaction 0.2s forwards ease; }

.stopwatch-container .stopwatch-body .stopwatch-box { position: relative; padding: 0; box-sizing: inherit; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; height: 100%; width: 100%; border-radius: 50%; border-bottom-left-radius: 15%; border-bottom-right-radius: 50%; background-color: #e99802; z-index: 999; }

.stopwatch-container .stopwatch-body .stopwatch-box .stopwatch { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; width: 310px; height: 80px; border-radius: 30px; border: 5px solid #d68c03; background-color: #161616; position: relative; font-family: 'Press Start 2P', cursive; font-size: 1.9em; color: #188d57; }

.stopwatch-container .stopwatch-body .stopwatch-box .stopwatch-hole { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background-color: #dd9001; position: absolute; left: 20px; bottom: 20px; text-align: center; }

.stopwatch-container .stopwatch-body .stopwatch-box .stopwatch-hole .stopwatch-inner-hole { display: block; width: 20px; height: 20px; border-radius: 50%; background-color: gray; }

.stopwatch-container .stopwatch-body .stopwatch-box .logo-box { position: absolute; top: 40px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; }

.stopwatch-container .stopwatch-body .stopwatch-box .logo-box .stopwatch-logo { color: black; filter: blur(1px); opacity: 0.4; z-index: 4; position: absolute; }

.stopwatch-container .stopwatch-body .stopwatch-box .logo-box .stopwatch-logo2 { z-index: 5; position: absolute; padding: 3px 5px; border-radius: 25px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: #a82e10; }

.stopwatch-container .stopwatch-body .strips-controls { width: 50px; height: auto; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; background-color: transparent; position: absolute; z-index: 9998; bottom: 10%; right: 13%; transform: rotate(45deg); }

.stopwatch-container .stopwatch-body .strips-controls .strip { box-sizing: border-box; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; width: 50px; height: 10px; border-radius: 5px; background-color: #ff4719; margin: 5px; position: relative; padding: 0 3px; overflow: hidden; }

.stopwatch-container .stopwatch-body .strips-controls .strip::after { content: ''; position: absolute; right: 0; height: 100%; width: 6px; border-radius: 5px; background-color: rgba(37, 7, 0, 0.5); filter: blur(3px); }

.stopwatch-container .stopwatch-body .strips-controls .strip .inner-strip { display: block; width: 20%; height: 3px; border-radius: 50%; background-color: transparent; }

.stopwatch-container .stopwatch-body .handle-spot { box-sizing: border-box; width: 110px; height: 50px; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; z-index: 9999; bottom: -3px; left: 50%; border-top-left-radius: 5px; border-top-right-radius: 20px; border-bottom-left-radius: 5px; border-bottom-right-radius: 25px; transform: translateX(-65px) skew(-15deg); position: absolute; background-color: #ff4719; padding-right: 10px; padding-left: 5px; }

.stopwatch-container .stopwatch-body .handle-spot::after { content: ''; border-radius: inherit; display: block; width: 96%; height: 98%; z-index: 9998; position: absolute; background-color: transparent; }

.stopwatch-container .stopwatch-body .handle-spot .handle-strip { height: 90%; width: 3px; background-color: transparent; opacity: 0.4; }

.stopwatch-container .stopwatch-body .handle-spot .handle-strip:last-of-type { height: 60%; -ms-flex-item-align: start; align-self: flex-start; margin-top: 4px; }

.stopwatch-container .record-list-container { position: absolute; right: 0; display: block; top: 10px; }

.stopwatch-container .record-list-container h4 { background-color: #e99802; padding: 10px 20px; border-top-left-radius: 25px; }

.stopwatch-container .record-list-container .results { display: block; margin: 0; padding: 0; max-height: 400px; overflow-y: scroll; }

.stopwatch-container .record-list-container .results .record { text-align: center; box-sizing: border-box; list-style-type: none; margin-bottom: 5px; background-color: white; padding: 3px 5px; width: 100%; }

.stopwatch-container .record-list-container .results .record:nth-child(even) { background-color: lightgray; }