@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";.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}*,:after,:before{box-sizing:border-box;margin:0;padding:0;text-decoration:none}body{position:relative;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background-color:#283040}main .title{position:absolute;top:2rem;left:2rem;font-family:Rubik,sans-serif;color:#fff;font-size:1.25rem;font-weight:600;text-transform:uppercase;opacity:.5}main .lang{position:absolute;top:2rem;right:2rem;background-color:transparent;font-size:1.25rem;border:none;opacity:.5;cursor:pointer;transition:.2s ease-in-out}main .lang:hover{opacity:1}.content{display:flex;align-items:center;gap:5rem}.content .div{max-width:21rem}.buttons{width:100%;display:flex;flex-direction:column;margin-top:1rem}.buttons div{display:flex;align-items:center;gap:1rem;margin-top:1rem}.buttons div button{width:100%}.buttons button{font-family:Rubik,sans-serif;color:#fff;font-size:14px;font-weight:700;letter-spacing:.15rem;text-transform:uppercase;background-color:#ffffff0d;padding:10px 0;border:none;border-radius:16px;box-shadow:0 8px 12px #00000040;cursor:pointer}.time,.break,.repeat{width:100%}.time-set,.break-set,.custom-set,.repeat-set{display:flex;align-items:center;justify-content:space-between}.time-set>div,.break-set>div,.custom-set>div,.repeat-set>div{display:flex;align-items:center;gap:.25rem}.controls{display:flex;align-items:center;flex-direction:column;gap:1.5rem;background-color:#ffffff0d;padding:1.5rem;border-radius:1rem;box-shadow:0 8px 16px #00000040}.controls h2{font-family:Roboto,sans-serif;font-size:1rem;color:#fff;text-transform:uppercase;letter-spacing:.15rem}.controls p{font-family:Roboto,sans-serif;font-size:13px;font-weight:600;letter-spacing:.1rem;color:#fff;text-transform:uppercase;margin-bottom:.5rem}.controls label{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#fff;font-size:13px;font-weight:300;letter-spacing:.05rem}.controls .custom-set{gap:.5rem}.controls .custom-set input{max-width:8.75rem;background-color:#ffffff26;padding:8px 10px;border-radius:4px;border:none;outline:none;color:#fff}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.stopwatch{position:relative;display:flex;align-items:center;justify-content:center;width:522px;height:522px;border-radius:50%}.stopwatch .shadow{position:absolute;left:50%;translate:-50%;width:500px;height:500px;border-radius:50%;box-shadow:0 8px 12px #00000040;z-index:2}.stopwatch .CircularProgressbar .CircularProgressbar-trail{stroke:#4c566a;stroke-width:4px}.stopwatch .CircularProgressbar .CircularProgressbar-path{width:100%;height:100%;stroke:#88c0d0;stroke-width:4px}.stopwatch .CircularProgressbar .CircularProgressbar-text{font-family:Rubik,sans-serif;font-size:10px;font-weight:500;fill:#d8dee9}