:root{--clock-size: min(20rem, 70vw);--clock-border-size: min(1.5rem, 20px);--progress: 0%}.clock-container{border-radius:50%;box-sizing:border-box;padding:min(.5rem,5vw);border:var(--clock-border-size) solid var(--clr-secondary)}.clock-outter{height:var(--clock-size);width:var(--clock-size);position:relative;margin-inline:auto}.clock-outter:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(to bottom right,rgba(255,255,255,.2) 0%,rgb(0,0,0) 100%);filter:blur(80px);height:calc(var(--clock-size));width:calc(var(--clock-size));border-radius:50%;z-index:-100}.clock-inner{position:absolute;background:conic-gradient(var(--clr-accent) var(--progress),var(--clr-secondary) var(--progress));height:var(--clock-size);width:var(--clock-size);border:none;border-radius:50%;display:grid;place-content:center;animation:rotation 10s linear infinite;transition:background 1s linear;font-size:min(5rem,15vw);font-weight:700;z-index:1;cursor:pointer}.clock-text-container{display:flex;flex-direction:column;gap:min(1rem,3vw)}.clock-inner span{font-size:min(1.2rem,3vw);margin-inline:auto;color:var(--clr-accent2)}.clock-inner .total-time{font-size:min(1.2rem,5vw);margin-inline:auto}.clock-inner .pause{letter-spacing:1rem}.clock-inner:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg);height:calc(var(--clock-size) - var(--clock-border-size));width:calc(var(--clock-size) - var(--clock-border-size));border-radius:50%;z-index:-1}.navbar{background:var(--clr-secondary);display:flex;justify-content:space-between;gap:min(.2rem,5vw);box-sizing:border-box;padding:min(.5rem,5vw);border-radius:50px;margin-inline:auto}.btn-navbar{display:flex;justify-content:center;align-items:center;padding:min(.6rem,5vw);background:transparent;border-radius:inherit;border:none;font-weight:700;color:gray;letter-spacing:.03rem}.btn-navbar:hover,.btn-navbar-active{background:var(--clr-accent);color:var(--clr-primary)}.settings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;width:min(80vw,500px);background:white;color:#000;border-radius:30px;box-shadow:0 0 100px #000}.settings__titlebar{display:flex;justify-content:space-between;align-items:center;padding:20px 35px}.settings__titlebar h1{margin:0;font-size:1.5rem;color:var(--clr-primary)}.settings__properties{padding:20px 35px}.settings__properties-time-container{display:flex;flex-direction:column;gap:20px;box-sizing:border-box;padding:20px 0}.settings__properties-time-container h3{color:var(--clr-primary);font-size:1rem;letter-spacing:.3rem}.settings__properties-time{display:flex;gap:15px}.pomodoro,.short-break,.long-break{display:flex;flex-direction:column;gap:10px}.settings__properties-time label{color:gray;font-size:.7rem;font-weight:700}.settings__properties-time input{color:var(--clr-primary);width:100%;height:44px;background:rgb(238,241,250);border:none;border-radius:10px;box-sizing:border-box;padding:15px;font-weight:700}.settings-properties{display:flex;justify-content:space-between;align-content:center;box-sizing:border-box;padding:20px 0}.settings-properties h3{color:var(--clr-primary);font-size:1rem;letter-spacing:.3rem}.btn-apply{position:absolute;bottom:0;left:0;height:45px;width:120px;transform:translate(160%,50%);cursor:pointer;border:none;border-radius:40px;box-shadow:0 0 10px #000000d9;background:var(--clr-accent);color:var(--clr-primary);font-weight:700;letter-spacing:.03rem}.btn-close{background:transparent;border:none;cursor:pointer}.btn-close svg:hover{animation:rotationIcon 1s ease-in-out normal}.btn-apply:hover{filter:brightness(.8)}.picker{display:flex;gap:15px}.picker-item{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;color:var(--clr-primary);font-weight:600}.picker-item:hover{filter:brightness(.9);color:#000}.picker-font:hover{background:var(--clr-secondary);color:var(--clr-text)}.theme1{background:var(--clr-accent)}.theme2{background:var(--clr-accent2)}.theme3{background:var(--clr-accent3)}:root{--bg: rgb(30, 33, 64);--clr-text: rgb(215, 224, 255);--clr-primary: rgb(30, 33, 64);--clr-secondary: rgb(21, 25, 50);--clr-accent: rgb(254, 108, 116);--clr-accent2: rgb(111, 242, 248);--clr-accent3: rgb(217, 129, 249)}@font-face{font-family:Roboto;font-style:normal;src:local("Roboto"),url(/fonts/Roboto-Regular.ttf) format("truetype")}body{background-color:var(--bg);color:var(--clr-text);padding:0 min(5vw,5vh);margin:0}*{color:var(--clr-text);font-family:Roboto,sans-serif}.app{position:relative;display:grid;place-content:center;height:93vh;box-sizing:border-box;gap:5vh}h1{margin:0;margin-inline:auto}h3{margin-top:0}.btn-settings{margin-inline:auto;cursor:pointer;background:none;border:none}.btn-settings svg{height:2rem;width:2rem;fill:var(--clr-secondary);transition:transform 1s ease-in-out}.btn-settings svg:hover{animation:rotationIcon 1s ease-in-out normal}@keyframes rotationIcon{0%{transform:rotate(0)}to{transform:rotate(360deg)}}