@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap);*{font-family:"Roboto Mono",monospace;margin:0;padding:0;box-sizing:border-box}::selection{background:#8a3ffc;color:#fff}body{max-width:360px;min-height:100vh;margin:0 auto;display:grid;place-items:center;background:#8a3ffc}body .waveDecor{position:absolute;bottom:0;left:0;z-index:-1}body .container{padding:20px;border:2px solid transparent;margin-bottom:1rem;margin-top:1rem;border-radius:1rem;box-shadow:0 5px 5px rgba(0,0,0,.1);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:linear-gradient(0deg,hsla(0,0%,100%,.7),#fff);-webkit-backdrop-filter:blur(80px);backdrop-filter:blur(80px)}body .container .progression{margin:20px auto}body .container .progression__line{height:10px;border-radius:5px;background:red;margin-bottom:10px}body .container .progression__circle{position:relative;width:310px;height:310px;border-radius:50%;background:#fff;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}body .container .progression__circle svg{width:310px;height:310px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}body .container .progression__circle svg .open,body .container .progression__circle svg .unset{transition:all .35s}body .container .progression__circle svg circle{width:310px;height:310px;fill:none;stroke-width:10;stroke:#000;-webkit-transform:translate(5px,5px);transform:translate(5px,5px);stroke-dasharray:950;stroke-dashoffset:950;stroke-linecap:round}body .container .progression__circle svg circle:first-child{stroke-dashoffset:0;stroke:#f3f3f3}body .container .progression__circle svg circle:nth-child(2){stroke-dashoffset:950;stroke:#8a3ffc}body .container .progression__circle .number{position:absolute;z-index:10}body .container .progression__circle .number .value{color:#000;font-size:3rem;font-weight:700}body .container .progression__circle .number .open{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:.35s;animation-duration:.35s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes fadeIn{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}50%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fadeIn{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}50%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}body .container .progression__circle .number .unset{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-duration:.35s;animation-duration:.35s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes fadeOut{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}50%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}50%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}body .container .control{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;grid-gap:10px;gap:10px}body .container .control__decrease,body .container .control__increase{width:50px;height:50px;border-radius:50%;outline:none;font-size:1.25rem;font-weight:700;color:#fff;background-color:#8a3ffc;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;pointer-events:auto;cursor:pointer;box-shadow:2px 2px 5px rgba(0,0,0,.2)}
/*# sourceMappingURL=main.e86d3b26.chunk.css.map */