@import"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";@import"https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap";*{margin:0}html{font-size:62.5%;font-family:Black Ops One,system-ui}#root{border:1px solid;height:99.8vh;display:flex;align-items:center;justify-content:center;background-color:#000}.clock-container{border:1px solid;border:1px solid white;width:min(400px,94vw);height:70vh;display:flex;flex-direction:column;padding:1rem;border-radius:.5rem;background-color:#000}.clock-container .h3-wrapper{display:flex;align-items:center;justify-content:center;background-color:#392dbdb5;margin-bottom:1rem;height:13%;border-radius:.5rem}.clock-container h3{text-align:center;font-size:2.6rem;background-color:#1e1e2f;outline:2px solid white;color:#f8f8ff;width:60%;margin:5px auto;border-radius:.5rem}.clock-container .lengths-wrapper{width:100%;display:flex;align-items:center;justify-content:space-around;background-color:#392dbdb5;height:30%;border-radius:.5rem}.clock-container .session-wrapper{display:flex;align-items:center;justify-content:center;height:40%}.clock-container .session-wrapper .sess{width:100%;height:80%;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#392dbdb5;padding:10px;color:#f8f8ff;border-radius:.5rem;position:relative}.clock-container .session-wrapper .sess .expand-btn{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;background-color:#1e1e2f;border-left:1px solid white;border-bottom:1px solid white;border-radius:2px;z-index:5}.clock-container .session-wrapper .sess .expand-btn i{color:#f8f8ff}.clock-container .controls-wrapper{display:flex;align-items:center;justify-content:center;height:16%}.clock-container .controls-wrapper .ctrls{border:1px solid;width:100%;display:flex;align-items:center;justify-content:center;gap:2rem;height:100%;border-radius:.5rem;background-color:#392dbdb5}.clock-container .controls-wrapper .ctrls button{height:60%;width:20%;background-color:#1e1e2f;color:#f8f8ff;outline:2px solid white;border-radius:.5rem}.break-container{width:40%;display:flex;flex-direction:column;background-color:#1e1e2f;color:#f8f8ff;outline:2px solid white;border-radius:.5rem}.break-container label{text-align:center;font-size:2.5rem}.break-container .brk-btn-wrapper{display:flex;align-items:center;justify-content:center;font-size:2.5rem;gap:1rem;margin-top:1rem;margin-bottom:1rem}.break-container .brk-btn-wrapper button{background-color:#1e1e2f;color:#f8f8ff;border-radius:.5rem;outline:2px solid white;display:flex;align-items:center;justify-content:center}.timer-label{font-size:3rem;margin-top:-1.5rem;margin-bottom:1rem}.time-left{border:1px solid;width:80%;font-size:7.5rem;background-color:#1e1e2f;padding:5px;outline:3px solid white;position:relative;border-radius:.5rem}.time-left div{background-color:#f8f8ff;width:80%;height:4.5%;position:absolute;bottom:-.65rem;left:2.8rem;border-radius:.1rem}button{outline:none;border:none;transition:.2s ease}button:hover,button:focus{filter:invert(100%)}i{font-size:2rem;transform:.25s ease}i:active{scale:.8}.select-audio-container{position:absolute;display:flex;align-items:flex-end;justify-content:center;height:100%;top:0;right:0;z-index:3;background-color:#232333;transition:.5s ease;border-radius:5px;overflow:hidden;box-shadow:-1.6px 0 3px #505050}.select-audio-container .select-audio-div{height:86%;width:99%;display:flex;flex-direction:column;justify-content:space-around;align-items:center;overflow:hidden}.select-audio-container .select-audio-div .audio-wrapper{display:flex;align-items:center;justify-content:space-around;width:50%}.select-audio-container .select-audio-div .audio-wrapper button{display:flex;align-items:center;justify-content:center;outline:2px solid black;box-shadow:2.5px 2.5px 2px #fff}.select-audio-container .select-audio-div .audio-wrapper p{font-size:1.2rem;text-shadow:2px 2px 2px black}.light{outline:1px solid white;border:.4px solid black;width:5%;height:45%;border-radius:50%;margin-left:-5%;box-shadow:1px 2.1px 3px #000,inset 1px 1px 5px #4c4d4c,inset -1px -1px 1px #000;position:relative;filter:brightness(150%)}.power-div{position:relative;display:inline-block;width:25%;height:80%;border-radius:1rem;box-shadow:0 -3px 3px #1e1b1b,.8px .8px 2px #cfc5c5,-1px 0 1px #cfc5c5,inset -1px -1px .4px #000}.power-div input{opacity:0;width:0;height:0;outline:none}.power-div .slider{position:absolute;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;top:0;bottom:0;left:0;right:0;background:linear-gradient(180deg,#0002,#fff0);transition:.25s ease;border-radius:1rem}.power-div .slider:before{position:absolute;content:"";height:85%;width:35%;top:1.3px;transition:.25s ease;left:1px;background:radial-gradient(#a9bfda 60%,#becfcd 70%);box-shadow:1px 1px 5px #59686a,-1px -1px 5px .5px #000;border-radius:50%}.power-div input:checked+.slider{background-color:linear-gradient(180deg,rgba(0,0,0,.1333333333),rgba(255,255,255,0))}.power-div input:checked+.slider:before{transform:translate(175%)}@media screen and (max-width: 345px){.clock-container{scale:.9}.audio-wrapper{height:16%;width:60%;gap:9%}.light{height:35%}.power-div .slider input{outline:none}.power-div .slider:before{top:15%;height:75%}.power-div input:checked+.slider{transform:translate(-3%)}}@media screen and (max-width: 330px){h3{font-weight:100;scale:.9}.break-container{scale:.9}.break-container label{font-weight:100}.break-container .brk-btn-wrapper{font-size:2.2rem;gap:.8rem}.break-container .brk-btn-wrapper button{scale:.9}.timer-label{font-size:2.5rem}.time-left{scale:.9;font-size:6.5rem}.time-left div{width:70%;left:3.5rem;height:4%;bottom:-.65rem}.ctrls button{scale:.9}i{font-size:1.7rem}.audio-wrapper .light{height:35%}.audio-wrapper .slider:before{height:70%}}@media screen and (max-width: 312px){h3{font-weight:100;scale:.7}.audio-wrapper .light{height:30%}.audio-wrapper .slider:before{height:68%;top:20%}}@media screen and (max-width: 301px){h3{font-weight:100;scale:.65}.break-container{scale:.8}.break-container label{font-weight:100}.break-container .brk-btn-wrapper{font-size:2rem;gap:.6rem}.break-container .brk-btn-wrapper button{scale:.8}.timer-label{font-size:2.1rem}.time-left{scale:.8;font-size:6.1rem}.time-left div{width:65%;left:3.5rem;height:3%;bottom:-.62rem}.ctrls button{scale:.8}i{font-size:2rem}.audio-wrapper .light{height:28%}.audio-wrapper .slider:before{height:60%;top:25%}}@media screen and (max-height: 600px){h3{font-weight:100;scale:.8}.break-container{scale:.8}.break-container label{font-weight:100}.break-container .brk-btn-wrapper{font-size:2rem;gap:.7rem}.break-container .brk-btn-wrapper button{scale:.8}.timer-label{font-size:2.1rem}.time-left{scale:.8;font-size:6.1rem}.time-left div{width:70%;left:3.5rem;height:4%;bottom:-.65rem}.ctrls button{scale:.8}i{font-size:1.8rem}}@media screen and (max-height: 530px){h3{font-weight:100;scale:.65}.clock-container{gap:.05rem}.break-container{scale:.7}.break-container label{font-weight:100}.break-container .brk-btn-wrapper{font-size:1.7rem;gap:.6rem}.break-container .brk-btn-wrapper button{scale:.8}.timer-label{margin-top:3px;font-size:1.8rem}.time-left{scale:.7;font-size:5.8rem}.time-left div{width:70%;left:3.5rem;height:4%;bottom:-.65rem}.ctrls button{scale:.7}i{font-size:1.8rem}}@media screen and (max-height: 440px){h3{font-weight:100;scale:.58}.clock-container{gap:.15rem}.break-container{scale:.6}.break-container label{font-weight:100}.break-container .brk-btn-wrapper{font-size:1.6rem;gap:.5rem}.break-container .brk-btn-wrapper button{scale:.7}.timer-label{margin-top:5px;font-size:1.5rem;margin-bottom:-.5rem}.time-left{scale:.6;font-size:5.5rem}.time-left div{width:70%;left:3.5rem;height:4%;bottom:-.65rem}.ctrls button{scale:.6}i{font-size:1.5rem}}@media screen and (max-height: 365px){h3{font-weight:100;scale:.5}.break-container{scale:.5}.break-container label{font-weight:100}.break-container .brk-btn-wrapper{font-size:1.4rem;gap:.4rem}.break-container .brk-btn-wrapper button{scale:.65}.timer-label{margin-top:5px;font-size:1.3rem;margin-bottom:-.5rem}.time-left{scale:.5;font-size:5.1rem}.time-left div{width:70%;left:3.5rem;height:4%;bottom:-.65rem}.ctrls button{scale:.5}i{font-size:1.2rem}}