@import"https://fonts.googleapis.com/css2?family=Borel&display=swap";body,html{overflow:hidden;background:url(/img/endless-knot.jpg) 50% no-repeat;margin:0;padding:0;height:100%}body main,html main{display:flex;flex-direction:column;height:100%}body main .blur,html main .blur{background:hsla(0,0%,100%,.85);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}body main .app-bar,html main .app-bar{position:relative;background:#323232;height:3.5rem;color:#fff;z-index:998}body main .app-bar .app-bar-content,html main .app-bar .app-bar-content{display:flex;align-items:center;z-index:2}body main .app-bar .app-bar-content h1,html main .app-bar .app-bar-content h1{text-transform:lowercase;font-family:Borel,cursive;font-size:2rem;font-weight:400;font-style:normal;margin:1.5rem 0 0 1rem;line-height:1}body main .app-bar .app-bar-content .app-bar-avatar,html main .app-bar .app-bar-content .app-bar-avatar{margin-left:auto;margin-right:.5rem}body main .loading-container,html main .loading-container{height:auto;position:relative;flex-grow:1}body main .loading-container .loading-progress-container,html main .loading-container .loading-progress-container{position:absolute;width:100%;top:0}body main .loading-container .circle-container,html main .loading-container .circle-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}body main .loading-container .circle-container .circle,html main .loading-container .circle-container .circle{color:#00abc9}body main .content-container,html main .content-container{height:auto;display:flex;align-items:center;justify-content:center;flex-grow:1}body main .content-container .content,html main .content-container .content{height:450px;width:200px;display:flex;flex-direction:column;align-items:center}body main .content-container .content .timer,html main .content-container .content .timer{width:100%;background:#f5f5f5;padding:.5rem;border-radius:10px;font-size:1.5rem;text-align:center;letter-spacing:1px}body main .content-container .content .progress-bar,html main .content-container .content .progress-bar{width:100%;margin-top:auto;display:flex;justify-content:center;align-items:center;gap:0 1rem}body main .content-container .content .progress-bar .progress-visual,html main .content-container .content .progress-bar .progress-visual{flex-grow:1}body main .content-container .content .settings,html main .content-container .content .settings{margin-top:1rem}body main .content-container .content .settings .settings-button,html main .content-container .content .settings .settings-button{background:#f5f5f5}body main .footer-bar,html main .footer-bar{background:#323232}body main .footer-bar .controller-contianer,html main .footer-bar .controller-contianer{display:flex;gap:1rem;justify-content:center;margin:auto;transform:translateY(-50%)}body main .footer-bar .controller-contianer .state-button,html main .footer-bar .controller-contianer .state-button{position:unset;color:#fff}body main .footer-bar .controller-contianer .state-button.play,html main .footer-bar .controller-contianer .state-button.play{background:#00abc9}body main .footer-bar .controller-contianer .state-button.pause,html main .footer-bar .controller-contianer .state-button.pause{background:#ff7f00}body main .footer-bar .controller-contianer .state-button.stop,html main .footer-bar .controller-contianer .state-button.stop{background:#d20041}body .settings-modal,html .settings-modal{z-index:999;width:100vw;height:100%;padding:0!important;overflow-y:scroll}body .settings-modal .settings-container,html .settings-modal .settings-container{background:#323232;color:#fff}body .settings-modal .settings-container .settings-header,html .settings-modal .settings-container .settings-header{position:fixed;top:0;left:0;background:#323232;width:100%;padding:1rem 0;border-bottom:1px solid hsla(0,0%,100%,.15);z-index:999}body .settings-modal .settings-container .settings-header h3,html .settings-modal .settings-container .settings-header h3{margin:0 0 0 1rem}body .settings-modal .settings-container .settings-header .settings-close,html .settings-modal .settings-container .settings-header .settings-close{color:#fff;position:absolute;top:.25rem;right:0}body .settings-modal .settings-container .settings-form,html .settings-modal .settings-container .settings-form{display:flex;flex-direction:column;gap:1rem 0;padding:4rem 1rem 2rem}body .settings-modal .settings-container .settings-input-group,html .settings-modal .settings-container .settings-input-group{display:flex;flex-direction:column}body .settings-modal .settings-container .settings-input-group h4,html .settings-modal .settings-container .settings-input-group h4{background:hsla(0,0%,100%,.05);padding:.5rem 1rem;border-radius:4px}body .settings-modal .settings-container .settings-input-group .settings-input,html .settings-modal .settings-container .settings-input-group .settings-input{padding:0 1rem}body .settings-modal .settings-container .settings-input-group .settings-input.select,html .settings-modal .settings-container .settings-input-group .settings-input.select{margin:1.5rem 0 .5rem}body .settings-modal .settings-container .settings-input-group .settings-input *,html .settings-modal .settings-container .settings-input-group .settings-input *{color:#fff;border-color:#fff}body .settings-modal .settings-container .settings-input-group .settings-input .MuiSwitch-track,html .settings-modal .settings-container .settings-input-group .settings-input .MuiSwitch-track{border:1px solid #fff}