*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--margin-left-right: 1rem;--margin-modal-vertical: 2.25rem;--margin-modal-horizontal: 2rem;--font-size: .825rem;--timer-display-font-size: 4rem;--primary-color: rgb(40, 54, 24);--secondary-color: rgb(96, 108, 56);--accent-color: rgb(188, 108, 37);--secondary-accent-color: rgb(221, 161, 94);--background-color: rgb(232, 231, 222);--modal-color: rgb(242, 241, 234);--button-color: rgb(40, 54, 24);--button-background: rgb(232, 231, 222)}.dark-mode{--primary-color: rgb(232, 231, 222);--accent-color: rgb(188, 108, 37);--secondary-accent-color: rgb(221, 161, 94);--background-color: rgb(40, 54, 24);--modal-color: rgb(58, 68, 40)}html,body{height:100%;font-family:Mulish,sans-serif;color:var(--primary-color)}.color-background{background-color:var(--background-color)}.image-background{background:#00000080 no-repeat center center fixed;background-size:cover;background-blend-mode:darken}.container{height:calc(100vh + 2rem + 1.375rem + var(--margin-left-right));position:relative;display:flex;flex-direction:column;padding:var(--margin-left-right) var(--margin-left-right) .75rem;overflow-x:hidden}button{font-family:inherit;color:var(--button-color);background-color:var(--button-background);border-radius:40px;cursor:pointer;transition:transform .2s ease;box-shadow:0 2px 4px #0003}button:hover{color:var(--button-background);background:var(--accent-color);transform:scale(1.05)}button:active{transform:scale(.95)}input::placeholder{font-family:Mulish,sans-serif}.header{height:max(50px,6vh);flex-shrink:0;display:flex;justify-content:space-between;align-items:center;z-index:1}.logo{font-size:2.5rem;font-weight:700;color:var(--primary-color);text-decoration:none}.nav__list{display:flex}.nav__item{width:min(12vw,100px);margin-left:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer}.nav__item *{font-size:var(--font-size)}hr{color:gray}main{flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.display{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}.no-scroll{overflow:hidden;height:100%}.overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:2}.modal{display:flex;flex-direction:column;position:fixed;z-index:3;inset:0;margin:4rem;color:var(--primary-color);background-color:var(--background-color);border-radius:10px;overflow:hidden}.modal__bar{padding:var(--margin-modal-vertical) var(--margin-modal-horizontal);font-size:calc(var(--font-size) * 1.5);font-weight:700;color:var(--button-background);background-color:var(--accent-color);border-radius:10px 10px 0 0}.modal__close{margin-right:-1rem;padding:.5rem 1rem;font-size:2rem;color:var(--button-background);background-color:transparent;border:none;box-shadow:none}.modal__body{flex:1;padding:var(--margin-modal-vertical) var(--margin-modal-horizontal);overflow-y:auto}.modal__group{padding:var(--margin-modal-horizontal);border:2px solid var(--accent-color);border-radius:10px}.modal__group:not(:last-child){margin-bottom:var(--margin-modal-vertical)}.modal__group>p{width:100px;margin-top:calc(-16px - var(--margin-modal-horizontal));margin-left:var(--margin-modal-horizontal);margin-bottom:var(--margin-modal-horizontal);text-align:center;font-size:var(--font-size);background:var(--background-color)}.modal__body>p{margin-top:calc(var(--margin-modal-vertical) / 2)}.attribution{color:var(--accent-color)}.setting__wallpaper{margin-top:1rem;font-size:var(--font-size)}.setting__wallpaper-container{display:flex;overflow-x:auto}.setting__wallpaper-item{display:flex;margin:.75rem;flex-direction:column;cursor:pointer}.setting__wallpaper-color,.setting__wallpaper-img{width:150px;height:100px;margin-bottom:.5rem;border-radius:10px;box-shadow:#00000026 1.95px 1.95px 2.6px}.setting__wallpaper-color:hover,.setting__wallpaper-img:hover{transition:transform .2s ease;transform:scale(1.05)}.setting__wallpaper-label{text-align:center}.setting__item{display:flex;align-items:center;font-size:var(--font-size)}.setting__item:not(:last-child){margin-bottom:1rem}.clear_storage-btn{width:10rem;padding:.5em}.task{position:absolute;top:calc(max(6vh,50px) + var(--margin-left-right) + 1rem);right:-100%;width:max(25vw,280px);height:calc(100vh - max(6vh,50px) - var(--margin-left-right) - 2rem);min-height:60vh;padding:1em;background-color:var(--modal-color);box-shadow:-2px 0 5px #0003;transition:right .4s cubic-bezier(.25,.8,.5,1);z-index:2;overflow:auto}.task--side-active{right:0;border-radius:10px 0 0 10px}.task--modal-active{width:calc(100% - 2 * var(--margin-left-right));right:auto;left:auto;border-radius:10px}.task__header{margin:0 1em .5em}.task__input-label{display:block}.task__input-container{display:flex;gap:.5rem}.task__input{width:80%;padding:.5em 1em;background-color:var(--button-background);border-radius:40px;box-shadow:0 2px 4px #0000001a}.task__add-btn{width:5rem;padding:.5em;flex-shrink:0}.task__error{margin:.5em 0 0 1em;color:#dc143c}hr{margin:.5em 0}.task__item{margin-bottom:.5em;padding:.25em 1em;display:flex;justify-content:space-between;align-items:center;list-style-type:none;border:2px solid var(--primary-color);border-radius:40px;box-shadow:0 2px 4px #0000001a}.task__text,.link__text{flex:1;word-wrap:break-word;overflow-wrap:anywhere}.task__text{cursor:pointer}.task__text--strikethrough{text-decoration:line-through;opacity:.6}.task__item-btns-container,.link__item-btns-container{width:5rem;display:flex;justify-content:end;align-items:center;gap:.5rem}.task__item-btns,.link__item-btns{width:1.75rem;height:1.75rem;margin:0;text-align:center;border:none;border-radius:50%}.task__item-btns>i,.link__item-btns>i{font-size:.75rem}.nav__sound-play{display:none}#nav-sound{position:relative}#nav-sound>div{display:flex;align-items:center;gap:12px}#sound-dropdown{margin-top:-4px;font-size:calc(var(--font-size) / 1.5)}.sound__menu{position:absolute;top:calc(var(--font-size) + .5rem);background-color:var(--modal-color);border:2px solid var(--secondary-color);border-radius:12px;box-shadow:0 2px 4px #0000001a;overflow:hidden;animation:slideDown .2s ease-out}.sound__menu li{padding:.5rem .75rem;list-style-type:none;text-align:left;color:var(--primary-color);background-color:var(--modal-color);cursor:pointer;transition:all .2s ease}.sound__menu li:hover,.sound__menu li.active{background-color:var(--accent-color);color:var(--button-background)}.sound__menu li:hover{padding-left:1.25rem}.sound__menu hr{margin:0}.link__form{max-width:1000px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;margin:0 auto .75rem}.link__container-title,.link__container-url{display:flex;flex-direction:column;gap:.5rem}.link__container-title{flex-grow:1}.link__container-url{flex-grow:4}.link__input{padding:.5em 1em;background-color:var(--button-background);border-radius:40px;box-shadow:0 2px 4px #0000001a}.link__add-btn{width:5rem;padding:.5em;flex-shrink:0}.link__list{margin-top:.75em}.link__item{max-width:1000px;margin:0 auto .75em;padding:.25em 1em;display:flex;justify-content:space-between;align-items:center;background-color:var(--secondary-color);list-style-type:none;border-radius:40px;box-shadow:0 2px 4px #0000001a}.link__text a{color:var(--primary-color)}.timer,.quote{transition:right .4s}.timer{margin-top:2rem;text-align:center}.timer__mode-btns,.timer__control-btns{display:flex;justify-content:center;gap:1vw}.timer__mode-btns{flex-direction:column;align-items:center}.timer__mode-btn{width:min(40vw,120px)}.timer__control-btn{width:min(15vw,80px)}.timer__mode-btn,.timer__control-btn{padding:.5em;font-size:var(--font-size);border-radius:40px}.timer__mode-btn.active{color:var(--button-background);background:var(--accent-color)}.timer__display{margin:.25em;font-size:var(--timer-display-font-size)}#timer-pause-btn{display:none}.quote{max-width:1000px;margin:2em 0;font-size:var(--font-size);text-align:center;cursor:pointer}.quote__author{margin-top:2vh;padding-bottom:.5em}.shift-left{position:relative;right:calc(max(25vw,280px)/2);width:calc(100vw - max(25vw,280px) - 2 * var(--margin-left-right))}footer{flex-shrink:0;height:1.375rem;margin-top:1.5em;text-align:center;color:var(--primary-color)}footer a{color:var(--accent-color)}@media (min-width: 420px){.timer__mode-btns{flex-direction:row}:root{--margin-left-right: 1.5rem;--font-size: 1rem}}@media (min-width: 768px){:root{--margin-left-right: 2rem;--font-size: 1.25rem;--timer-display-font-size: 8rem}.display{height:100%}.timer__mode-btn{width:200px}}@media (max-width: 768px){.container{height:calc(100vh - 2 * var(--margin-left-right))}.logo{font-size:2rem}.display{height:60%}.modal{margin:2rem 1rem}.task{height:calc(100vh - max(25vw,280px) - 3 * var(--margin-left-right))}.timer{margin-top:1rem}}@media (max-width: 420px){.timer__mode-btn{margin-bottom:.25rem}.timer__control-btn:not(:last-child){margin-right:.25rem}.logo{font-size:1.5rem}}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.toggle-switch{background:none;border:none;cursor:pointer;padding:0;box-shadow:#00000026 1.95px 1.95px 2.6px;transition:transform .2s ease}.toggle-track{width:70px;height:34px;border-radius:20px;position:relative;transition:background-color .3s ease;display:flex;align-items:center;justify-content:space-between;padding:0 4px}.toggle-track.theme.left{background:gray}.toggle-track.theme.right{background:var(--accent-color)}.toggle-track.left{background:gray}.toggle-track.right{background:var(--accent-color)}.icon-container{position:relative;z-index:2;width:26px;height:26px;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}.left .sun-container,.right .moon-container{opacity:1}.left .moon-container,.right .sun-container{opacity:.4}.toggle-icon,.sun-icon,.moon-icon{transition:color .3s ease}.left .sun-icon,.right .moon-icon{color:var(--accent-color)}.left .moon-icon,.right .sun-icon{color:var(--button-background)}.toggle-slider{position:absolute;top:2px;left:2px;width:30px;height:30px;background:var(--button-background);border-radius:50%;transition:transform .3s ease;z-index:1}.toggle-slider.right{transform:translate(36px)}.toggle-slider.left{transform:translate(0)}.toggle-label{width:5rem;opacity:.8;transition:opacity .3s ease}@media (max-width: 768px){.toggle-track{width:62px;height:30px}.icon-container{width:21px;height:21px}.toggle-slider{width:26px;height:26px}.toggle-slider.right{transform:translate(32px)}}