body{font-family:sans-serif;height:100vh}h1{text-align:center}#settings{width:27%;margin:auto}input{width:40px}#settings>div>*{padding:5px;margin:5px}#settings>div>label{display:inline-block;width:40%;padding-top:10px}#actions{width:16%;margin:auto;padding:10px}#actions>*{padding:5px;margin:5px}#clock{display:grid;place-items:center}.base-timer{position:relative;width:300px;height:300px}.base-timer__svg{transform:scaleX(-1)}.base-timer__circle{fill:none;stroke:none}.base-timer__path-elapsed{stroke-width:7px;stroke:grey}.base-timer__path-remaining{stroke-width:7px;stroke-linecap:round;transform:rotate(90deg);transform-origin:center;transition:all 1s linear;fill-rule:nonzero;stroke:currentColor}.base-timer__path-remaining.green{color:#41b883}.base-timer__path-remaining.orange{color:orange}.base-timer__path-remaining.red{color:red}.base-timer__label{height:350px}.base-timer__label,.base-timer__title{position:absolute;width:300px;top:0;display:flex;align-items:center;justify-content:center;font-size:48px}.base-timer__title{height:200px}