@import url(https://fonts.googleapis.com/css?family=Orbitron|Josefin+Sans&display=swap);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}.App{width:100vw;min-height:568px;overflow-y:scroll;height:100vh;display:-ms-grid;display:grid;grid-template-areas:"left-side-container . right-side-container" "timer-container timer-container timer-container" "first-bottom-container first-bottom-container first-bottom-container" "second-bottom-container second-bottom-container second-bottom-container" "footer footer footer";justify-items:center;background-color:#212121;font-family:Josefin Sans,sans-serif;align-content:center;grid-column-gap:20px}.App,.timer-container{justify-content:center;align-items:center}.timer-container{-ms-grid-row:2;-ms-grid-column:1;-ms-grid-column-span:5;grid-area:timer-container;display:flex;background-color:inherit;margin:14vh 0 11vh}.container-title{color:#4287f5;font-size:1.1em;overflow-wrap:word;text-align:center;width:80px}@media only screen and (min-width:380px){.timer-container{margin:17vh 0 13vh}.container-title{font-size:1.3em}}.control-container{border:3px solid #182f54;border-radius:10px;width:90px}.content{display:-ms-grid;display:grid;-ms-grid-columns:auto 10px auto 10px auto;grid-template-columns:auto auto auto;justify-content:center;justify-items:center;grid-column-gap:10px}@media only screen and (min-width:768px){.App{grid-template-areas:"left-side-container timer-container right-side-container" "first-bottom-container first-bottom-container first-bottom-container" "second-bottom-container second-bottom-container second-bottom-container" ". footer .";grid-gap:20px 45px}.timer-container{margin:20vh 60px 0}.content{-ms-grid-columns:auto;grid-template-columns:auto;justify-content:center;justify-items:center;grid-row-gap:5px}.container-title{font-size:1.6em;width:110px}.control-container{width:120px}.timer-container{-ms-grid-row:1;-ms-grid-column:3;-ms-grid-column-span:1}}.control-number{font-family:Orbitron,sans-serif;min-width:35px;min-height:30px;text-align:center}.control-number,.control-operator{color:#4287f5;font-size:1.5em}@media only screen and (min-width:768px){.control-number,.control-operator{font-size:1.8em}}.control-container[side~=left]{-ms-grid-row:1;-ms-grid-column:1;grid-area:left-side-container;-ms-grid-row-align:end;align-self:end}.control-container[side~=right]{-ms-grid-row:1;-ms-grid-column:5;grid-area:right-side-container;-ms-grid-row-align:end;align-self:end}.control-container[side~=bottom-first]{-ms-grid-row:3;-ms-grid-column:1;-ms-grid-column-span:5;grid-area:first-bottom-container;width:160px}@media only screen and (min-width:768px){.control-container[side~=bottom-first]{margin-top:7vh}}.control-container[side~=bottom-first] .content{display:-ms-grid;display:grid;-ms-grid-columns:auto 10px auto 10px auto;grid-template-columns:auto auto auto;align-content:center;align-items:center;grid-column-gap:10px}.control-container[side~=bottom-first] legend{display:flex;justify-content:center;align-items:center}.control-container[side~=bottom-first] .container-title{display:inline-block;width:125px}.checkbox{margin:1px 1px 1px 5px;display:inline;border:2px solid #4287f5;border-radius:5px}.checkbox:hover{cursor:pointer}.checkbox:active i{color:#91d5ff}.checkbox i{color:#4287f5;margin:1px}.control-container[side~=bottom-second]{-ms-grid-row:4;-ms-grid-column:1;-ms-grid-column-span:5;grid-area:second-bottom-container;display:-ms-grid;display:grid;-ms-grid-columns:auto 20px auto;grid-template-columns:auto auto;-ms-grid-rows:auto;grid-template-rows:auto;justify-content:center;grid-column-gap:20px;margin-top:10px;margin-bottom:20px;border:none}.control-container[side~=bottom-second]>:first-child{-ms-grid-row:1;-ms-grid-column:1}.control-container[side~=bottom-second]>:nth-child(2){-ms-grid-row:1;-ms-grid-column:3}.footer{-ms-grid-row:5;-ms-grid-column:1;-ms-grid-column-span:5;grid-area:footer}@media only screen and (min-width:768px){.control-container[side~=left]{-ms-grid-row:1;-ms-grid-column:1}.control-container[side~=right]{-ms-grid-row:1;-ms-grid-column:5}.control-container[side~=bottom-first]{-ms-grid-row:3;-ms-grid-column:1;-ms-grid-column-span:5}.control-container[side~=bottom-second]{-ms-grid-row:5;-ms-grid-column:1;-ms-grid-column-span:5}.footer{-ms-grid-row:7;-ms-grid-column:3;-ms-grid-column-span:1}}.author{text-align:center;text-decoration:none;color:#4287f5;opacity:.8;font-size:.9em}@media only screen and (min-width:768px){.author{font-size:1.2em}}.author:hover{cursor:pointer}.author:active{opacity:1}.display{font-family:Orbitron,sans-serif;display:flex;flex-direction:column;justify-content:center;align-content:center;text-align:center}.sessionTime{font-size:2.4em;color:#4287f5}.breakTime{font-size:1.6em;color:#91d5ff}#volume{-ms-grid-row-align:center;align-self:center;border:none;background-color:inherit;color:#4287f5;outline:none;z-index:20;font-size:1.1em}#volume:hover{cursor:pointer}#volume:active{color:#91d5ff}@media only screen and (min-width:380px){.sessionTime{font-size:2.8em}.breakTime{font-size:2em}#volume{font-size:1.5em}}@media only screen and (min-width:768px){.display{width:200px}.sessionTime{font-size:3.6em}.breakTime{font-size:2.8em}#volume{font-size:2em}}.button{z-index:20;color:#4287f5;border:none;background-color:inherit;outline:none}.button,.button:active{-webkit-transition-duration:.2s;transition-duration:.2s}.button:active{-webkit-transform:scale(.9);transform:scale(.9);color:#91d5ff}.button:hover{cursor:pointer}.button-control{font-size:3.2em}@media only screen and (min-width:768px){.button:hover{cursor:pointer;color:#91d5ff;-webkit-transition-duration:.2s;transition-duration:.2s}}.CircularProgressBar{position:absolute;display:flex;justify-content:center;align-items:center;background-color:inherit}.CircularProgressBar[id~=breakTimerprogressBar]{-webkit-transform:scale(.75);transform:scale(.75)}.CircularProgressBar[id~=sessionTimerprogressBar]{-webkit-transform:scale(.6);transform:scale(.6)}@media only screen and (min-width:380px){.CircularProgressBar[id~=breakTimerprogressBar]{-webkit-transform:scale(.9);transform:scale(.9)}.CircularProgressBar[id~=sessionTimerprogressBar]{-webkit-transform:scale(.7);transform:scale(.7)}}@media only screen and (min-width:400px){.CircularProgressBar[id~=breakTimerprogressBar]{-webkit-transform:scale(.95);transform:scale(.95)}.CircularProgressBar[id~=sessionTimerprogressBar]{-webkit-transform:scale(.75);transform:scale(.75)}}@media only screen and (min-width:420px){.CircularProgressBar[id~=breakTimerprogressBar]{-webkit-transform:scale(1);transform:scale(1)}.CircularProgressBar[id~=sessionTimerprogressBar]{-webkit-transform:scale(.8);transform:scale(.8)}}@media only screen and (min-width:768px){.CircularProgressBar[id~=breakTimerprogressBar]{-webkit-transform:scale(1.1);transform:scale(1.1)}.CircularProgressBar[id~=sessionTimerprogressBar]{-webkit-transform:scale(.9);transform:scale(.9)}}.wrapper{width:300px;height:300px;-webkit-animation-name:wrapper-show;animation-name:wrapper-show;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:.1s;animation-duration:.1s}.circle,.wrapper{position:absolute}.circle{width:270px;height:270px;border:14px solid #4287f5;border-radius:50%;clip:rect(0,149px,298px,0);z-index:10;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.circle-background{width:260px;height:260px;border:25px solid #182f54;border-radius:50%;position:absolute;z-index:5}.start-gap{position:absolute;top:-156px;width:25px;height:27px;background-color:inherit;z-index:15}.start-gap[part~=left]{-webkit-transform:skewX(20deg);transform:skewX(20deg)}.start-gap[part~=right]{-webkit-transform:skewX(-20deg);transform:skewX(-20deg)}.right-spin{-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-animation-name:right-spin;animation-name:right-spin}.left-spin{-webkit-animation-name:left-spin;animation-name:left-spin}@-webkit-keyframes right-spin{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes right-spin{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes left-spin{0%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes left-spin{0%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes wrapper-show{to{clip:rect(0,300px,300px,149px)}}@keyframes wrapper-show{to{clip:rect(0,300px,300px,149px)}}
/*# sourceMappingURL=main.32998a15.chunk.css.map */