@import"https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap";:root{--accent-color: #f87070;--text: #d7e0ff;--font-current: "Kumbh Sans", sans-serif}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}html::-webkit-scrollbar-thumb{background-color:#f87070;-webkit-box-shadow:0 0 1px #70f3f8;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}html::-webkit-scrollbar{-webkit-appearance:none;width:6px;height:3px}html,body{height:100%}body{display:flex;justify-content:center;background:#1e213f}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box;padding:0;margin:0}ul,ol{list-style:none}a,a:hover{text-decoration:none}button:focus:not(:focus-visible){outline:0}@keyframes fade{0%{opacity:0%}to{opacity:100%}}.pomodoro-app{display:flex;align-items:center;flex-direction:column;height:667px}@media only screen and (max-width: 599px){.pomodoro-app{height:100%}}.pomodoro-app__title{padding-top:4rem;font-family:var(--font-current);color:#d7e0ff;font-size:2rem;font-weight:700;line-height:2rem;letter-spacing:0em;text-align:center}.pomodoro-app__preferences{margin-top:79px;background:none;border:0;transition:transform .15s ease-in-out;cursor:pointer}.pomodoro-app__preferences:hover{transform:scale(1.4) rotate(45deg)}.pomodoro-app__close-preferences{border:none;background:none;color:var(--background-body);opacity:.5;font-size:24px;transition:.3s ease-in-out;cursor:pointer}.pomodoro-app__close-preferences:hover{opacity:1}.pomodoro-app .preferences{position:fixed;top:0;left:0;z-index:200;visibility:hidden;opacity:0;pointer-events:none;width:100%;height:100%;transition:.3s ease-in-out}.pomodoro-app .preferences-visible{visibility:visible;opacity:1;pointer-events:initial}.pomodoro-app .preferences__pane{position:relative;top:46px;width:327px;height:549px;background:#ffffff;border-radius:15px;margin:auto;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;transition:3.25s all ease-in-out}@media only screen and (min-width: 600px){.pomodoro-app .preferences__pane{top:25%;width:540px;height:490px;border-radius:25px}}.pomodoro-app .preferences__pane__overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;background-color:#0006;z-index:-1}.pomodoro-app .preferences__pane__title{border-bottom:1px solid #e3e1e1;display:flex;align-items:center;justify-content:space-between;flex-direction:row;padding:24px 28px}.pomodoro-app .preferences__pane__title h2{font-family:Kumbh Sans,sans-serif;color:#161932;font-size:1.25rem;font-weight:700;line-height:1.5rem;letter-spacing:0em}@media only screen and (min-width: 600px){.pomodoro-app .preferences__pane__title h2{font-size:1.75rem;line-height:1.75rem;letter-spacing:0em}}.pomodoro-app .preferences__pane__time-settings,.pomodoro-app .preferences__pane__color-preference{margin-top:28px}.pomodoro-app .preferences__pane__time-settings h3{font-family:Kumbh Sans,sans-serif;color:#161932;font-size:.6875rem;font-weight:700;line-height:.6875rem;letter-spacing:.4em;text-align:center;text-transform:uppercase;width:100%}.pomodoro-app .preferences__pane__time-settings label{font-family:Kumbh Sans,sans-serif;color:#1e213f;font-size:.75rem;font-weight:700;line-height:.75rem;letter-spacing:0em;mix-blend-mode:normal;opacity:.4}.pomodoro-app .preferences__pane__time-settings input{font-family:Kumbh Sans,sans-serif;color:#1e213f;font-size:.75rem;font-weight:700;line-height:.75rem;letter-spacing:0em;width:140px;height:40px;padding-left:16px;border:none;border-radius:10px;background:#eff1fa}.pomodoro-app .preferences__pane__time-settings input[type=number]::-webkit-outer-spin-button,.pomodoro-app .preferences__pane__time-settings input[type=number]::-webkit-inner-spin-button{margin-right:16px;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg width='14' height='21' viewBox='0 0 14 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6L7 2L13 6' stroke='%231E213F' stroke-opacity='0.25' stroke-width='2'/%3E%3Cpath d='M1 15L7 19L13 15' stroke='%231E213F' stroke-opacity='0.25' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat center center;height:21px;width:14px;opacity:.5;cursor:pointer}.pomodoro-app .preferences__pane__time-settings input[type=number]::-webkit-inner-spin-button:hover,.pomodoro-app .preferences__pane__time-settings input[type=number]::-webkit-inner-spin-button:active{opacity:1}.pomodoro-app .preferences__pane__time-settings__form{margin:18px 24px 24px 23px;display:grid;grid-template-columns:50% 50%;align-items:center;row-gap:8px}.pomodoro-app .preferences__pane__color-preference,.pomodoro-app .preferences__pane__font-preference{display:flex;justify-content:center;flex-direction:row;flex-wrap:wrap;padding:24px 0;margin:0 24px;border-width:1px 0 1px 0;border-style:solid;border-color:#e3e1e1}.pomodoro-app .preferences__pane__color-preference input[type=radio],.pomodoro-app .preferences__pane__font-preference input[type=radio]{opacity:0;position:fixed;width:0}.pomodoro-app .preferences__pane__color-preference input[type=radio]+label,.pomodoro-app .preferences__pane__font-preference input[type=radio]+label{opacity:1;display:flex;justify-content:center;align-items:center;transition:transform .25s ease-in-out,background-color .25s ease-in-out;cursor:pointer}.pomodoro-app .preferences__pane__color-preference input[type=radio]+label:hover,.pomodoro-app .preferences__pane__font-preference input[type=radio]+label:hover{transform:scale(1.1)}.pomodoro-app .preferences__pane__color-preference__kumbh,.pomodoro-app .preferences__pane__color-preference__roboto,.pomodoro-app .preferences__pane__color-preference__space,.pomodoro-app .preferences__pane__color-preference__default,.pomodoro-app .preferences__pane__color-preference__blue,.pomodoro-app .preferences__pane__color-preference__purple,.pomodoro-app .preferences__pane__font-preference__kumbh,.pomodoro-app .preferences__pane__font-preference__roboto,.pomodoro-app .preferences__pane__font-preference__space,.pomodoro-app .preferences__pane__font-preference__default,.pomodoro-app .preferences__pane__font-preference__blue,.pomodoro-app .preferences__pane__font-preference__purple{width:40px;height:40px;margin:18px 8px 0;border:none;border-radius:90%;font-size:15px}.pomodoro-app .preferences__pane__font-preference__kumbh,.pomodoro-app .preferences__pane__font-preference__roboto,.pomodoro-app .preferences__pane__font-preference__space{background:#eff1fa;color:#1e213f}.pomodoro-app .preferences__pane__font-preference__kumbh{font-family:Kumbh Sans,sans-serif;font-weight:700;padding-top:5px}.pomodoro-app .preferences__pane__font-preference__roboto{font-family:Roboto Slab,serif;font-weight:400}.pomodoro-app .preferences__pane__font-preference__space{font-family:Space Mono,monospace;font-weight:700}.pomodoro-app .preferences__pane__font-preference input[type=radio]:checked+label,.pomodoro-app .preferences__pane__font-preference input[type=radio]:hover+label{background:#161932;color:#fff}.pomodoro-app .preferences__pane__color-preference{border:none}.pomodoro-app .preferences__pane__color-preference__default{background-color:#f87070}.pomodoro-app .preferences__pane__color-preference__blue{background-color:#70f3f8}.pomodoro-app .preferences__pane__color-preference__purple{background-color:#d881f8}.pomodoro-app .preferences__pane__color-preference input[type=radio]:checked+label,.pomodoro-app .preferences__pane__color-preference input[type=radio]:hover+label{background-image:url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.5L4.95263 9.45263L13.4053 1' stroke='%23161932' stroke-width='2'/%3E%3C/svg%3E%0A");background-repeat:no-repeat;background-position:center}@media only screen and (min-width: 600px){.pomodoro-app .preferences__pane__time-settings h3{margin:24px 40px 22px}.pomodoro-app .preferences__pane__time-settings__form{margin:24px 40px;display:grid;grid-template-columns:auto auto auto;grid-template-rows:12px 48px;column-gap:22px}.pomodoro-app .preferences__pane__font-preference,.pomodoro-app .preferences__pane__color-preference{margin:0 40px}.pomodoro-app .preferences__pane__font-preference h3,.pomodoro-app .preferences__pane__color-preference h3{text-align:left;font-size:13px;line-height:13px;letter-spacing:5px}.pomodoro-app .preferences__pane__font-preference__kumbh,.pomodoro-app .preferences__pane__font-preference__roboto,.pomodoro-app .preferences__pane__font-preference__space,.pomodoro-app .preferences__pane__font-preference__default,.pomodoro-app .preferences__pane__font-preference__blue,.pomodoro-app .preferences__pane__font-preference__purple,.pomodoro-app .preferences__pane__color-preference__kumbh,.pomodoro-app .preferences__pane__color-preference__roboto,.pomodoro-app .preferences__pane__color-preference__space,.pomodoro-app .preferences__pane__color-preference__default,.pomodoro-app .preferences__pane__color-preference__blue,.pomodoro-app .preferences__pane__color-preference__purple{margin:0 8px}.pomodoro-app .preferences__pane__font-preference__space,.pomodoro-app .preferences__pane__font-preference__purple,.pomodoro-app .preferences__pane__color-preference__space,.pomodoro-app .preferences__pane__color-preference__purple{margin:0 0 0 8px}.pomodoro-app .preferences__pane__time-settings h3,.pomodoro-app .preferences__pane__font-preference h3,.pomodoro-app .preferences__pane__color-preference h3{text-align:left;font-size:13px;line-height:13px;letter-spacing:5px}.pomodoro-app .preferences__pane label{grid-row:1}.pomodoro-app .preferences__pane input{grid-row:2}}.pomodoro-app .preferences__pane__apply-row{width:100%;display:flex;justify-content:center}.pomodoro-app .preferences__pane__apply-row__apply-preferences{font-family:Kumbh Sans;color:#fff;font-size:1rem;font-weight:700;line-height:1rem;letter-spacing:0em;width:140px;height:53px;margin-top:50px;padding:0;border-radius:26.5px;background-color:#f87070;transition:transform .15s ease-in-out;border:none;cursor:pointer}.pomodoro-app .preferences__pane__apply-row__apply-preferences:hover{transform:scale(1.1)}.pomodoro-app button.display__mute{width:25px;height:25px;border:0;background-color:transparent;color:#d7e0ff2f;transition:color .3s ease-in-out;cursor:pointer}.pomodoro-app button.display__mute:hover{color:#d7e0ff}.pomodoro-app .timer{display:flex;align-items:center;justify-content:center;flex-direction:row;flex-shrink:0;width:300px;height:300px;border-radius:90%;transition:.3s;background:linear-gradient(315deg,#2e325a 0%,#0e112a 100%);box-shadow:-50px -50px 100px #272c5a,50px 50px 100px #121530;cursor:pointer}.pomodoro-app .timer:hover{box-shadow:50px 50px 100px #272c5a,-50px -50px 100px #121530}@media only screen and (min-width: 600px){.pomodoro-app .timer{width:410px;height:410px}}.pomodoro-app .timer:active{transform:scale(.98)}.pomodoro-app .timer__display{height:89.26%;width:89.26%;padding:11px;border-radius:90%;background:#161932}.pomodoro-app .timer__display__circular text{font-family:var(--font-current)}.pomodoro-app .timer__display__start-pause{font-family:var(--font-current);color:#d7e0ff;font-size:1rem;font-weight:700;line-height:1rem;letter-spacing:.8em;margin-top:50%;background-color:transparent;border:0;margin-right:-15px;transition:transform .2s ease-in-out;cursor:pointer}@media only screen and (max-width: 599px){.pomodoro-app .timer__display__start-pause{margin-top:40%;font-size:12px}}.pomodoro-app .controls{display:flex;justify-content:space-between;flex-direction:row;background:#161932;border-radius:31.5px;width:327px;min-height:63px;padding:8px 6px;margin:45px 0 48px;z-index:100}.pomodoro-app .controls input[type=radio]{opacity:0;position:fixed;width:0;transition:.5s ease-in-out}.pomodoro-app .controls input[type=radio]:checked+label{color:#1e213f;opacity:1;background:var(--accent-color);animation-name:fade;animation-timing-function:ease-in;animation-duration:.3s}.pomodoro-app .controls__button{display:flex;align-items:center;flex-direction:row;font-family:var(--font-current);color:#d7e0ff;font-size:.75rem;font-weight:700;line-height:.75rem;letter-spacing:0em;text-align:center;height:48px;border:none;border-radius:26.5px;background:#161932;padding:0 15px;mix-blend-mode:normal;opacity:.4;cursor:pointer}@media only screen and (min-width: 600px){.pomodoro-app .controls__button{font-size:14px}}@media only screen and (min-width: 600px){.pomodoro-app .controls{width:373px;margin:55px 0 45px}}.CircularProgressbar{width:100%;vertical-align:middle}.CircularProgressbar .CircularProgressbar-path{stroke:#3e98c7;stroke-linecap:round;-webkit-transition:stroke-dashoffset .5s ease 0s;transition:stroke-dashoffset .5s ease 0s}.CircularProgressbar .CircularProgressbar-trail{stroke:#d6d6d6;stroke-linecap:round}.CircularProgressbar .CircularProgressbar-text{fill:#3e98c7;font-size:20px;dominant-baseline:middle;text-anchor:middle}.CircularProgressbar .CircularProgressbar-background{fill:#d6d6d6}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background{fill:#3e98c7}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text{fill:#fff}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path{stroke:#fff}.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail{stroke:transparent}