*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}button{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;font:inherit;color:inherit;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;transition:color .3s ease}:root{font-family:Roboto Mono,system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;color:#fff;transition:background-color .3s ease;--gray-darker: #b3b3b3;--gray: #cacaca;--gray-lighter: #d9d9d9;--color-primary: #ba4949;--color-secondary: #c15c5c;--color-accent: #a44e4e;--color-accent-darker: #622f2f}body.pomodoro-mode{--color-primary: #ba4949;--color-secondary: #c15c5c;--color-accent: #a44e4e;--color-accent-darker: #733737}body.shortbreak-mode{--color-primary: #38858a;--color-secondary: #4c9196;--color-accent: #417b80;--color-accent-darker: #2e565a}body.longbreak-mode{--color-primary: #397097;--color-secondary: #4d7fa2;--color-accent: #426c8a;--color-accent-darker: #2e4c61}.pomodoro-timer{background-color:var(--color-secondary);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem 0;width:30rem;align-self:center;border-radius:5px}.timer-tabs__button{background-color:var(--color-secondary);border-radius:5px;padding:.25rem 1rem}.timer-tabs__button--active{background-color:var(--color-accent)}.timer-display{font-size:7rem;font-weight:600;-webkit-user-select:none;user-select:none}.timer-display__mode--active{display:block}.timer-control{padding-top:.25rem}.timer-control__button{background-color:var(--gray-darker);border-radius:5px}.timer-control__button .front{background-color:#fff;display:block;border-radius:5px;padding:.6rem 1rem;width:10rem;transform:translateY(-5px);color:var(--color-primary);font-weight:700;text-transform:uppercase;font-size:1.25rem}.timer-control__button:active .front,.timer-control__button #pause,.front{transform:translateY(-2px)}.app-header{padding:1rem 1.5rem}.app-header__content{display:flex;justify-content:space-between}.app-header__content h2{display:inline-flex;align-items:center;column-gap:.3rem}.app-header__content h2 svg{stroke:#fff;fill:#fff;width:1.75rem;height:1.75rem}.app-header__content button{display:inline-flex;column-gap:.4rem;align-items:center;background-color:var(--color-secondary);border-radius:5px;padding:.25rem 1rem}.app-header__content button svg{stroke:#fff;fill:#fff;width:1.5rem;height:1.5rem}.app-header__timer-progress-bar{padding:0 0 1rem}.app-header__timer-progress-bar progress{width:100%;height:.2rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:var(--color-accent)}progress::-webkit-progress-bar{background-color:var(--color-accent)}progress::-webkit-progress-value{background-color:#fff}progress::-webkit-progress-value{transition:width .3s ease-out}.btn{border-radius:5px;padding:.25rem .75rem;color:#000;border:1px dashed var(--gray-lighter)}.btn:hover{border-style:solid;transition:background-color .3s ease-in-out,color .3s ease-in-out,border-style .3s ease-in-out}.btn--save{background-color:#e1e1e1;padding:.25rem 1rem}.btn--save:hover{background-color:var(--gray)}.modal-container{position:fixed;top:0;left:0;width:100%;height:100%;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:1}.modal{background-color:#fff;border-radius:5px;width:30rem;box-shadow:0 4px 12px #00000026;color:#000;padding:1rem 1.25rem;display:flex;flex-direction:column;row-gap:1rem}.modal__header{display:flex;align-items:center}.modal__header h3{font-weight:500}.modal__close-btn{margin-left:auto;border-radius:5px;padding:0 .6rem;font-size:1.5rem;border:1px dashed var(--gray-lighter);transition:border-style .3s ease-in-out}.modal__close-btn:hover{border:1px solid var(--gray-lighter)}.modal__content{display:flex;flex-direction:column;row-gap:.75rem}.modal__content .time-settings{display:flex;column-gap:1rem}.modal__content .time-settings label{font-size:.8rem;color:var(--gray-darker);display:flex;flex-direction:column;row-gap:.25rem}.modal__content .time-settings label input{border:none;font:inherit;font-size:1rem;border-radius:5px;padding:.25rem .5rem;max-width:5.5rem;background-color:var(--gray-lighter)}.modal__content .time-settings label input:focus{outline:1px solid var(--gray)}.modal__actions{margin-left:auto;display:flex;column-gap:1rem;margin-top:.5rem}.task-form{background-color:#fff;padding:1rem 1.25rem;color:#000;border-radius:5px;display:flex;flex-direction:column;row-gap:1rem}.task-form input{border:none;width:100%;font:inherit;font-size:1rem}.task-form input:focus{outline:none}.task-form input::placeholder{color:var(--gray);font-style:italic}.task-form__actions{display:flex}.task-form__actions button{border-radius:5px;padding:.25rem .75rem;color:#000;border:1px dashed var(--gray-lighter)}.task-form__actions button svg{stroke:var(--gray-darker);fill:var(--gray-darker);width:1.25rem;height:1.25rem;transition:fill .3s ease-in-out,stroke .3s ease-in-out}.task-form__actions button:hover{border:1px solid var(--gray-lighter)}.task-form__actions-right{margin-left:auto;display:flex;column-gap:1rem}.task-form__actions button#delete-button{padding:.25rem .5rem;display:inline-flex;align-items:center}.task-form__actions button#delete-button:hover{border-style:solid;transition:background-color .3s ease-in-out,color .3s ease-in-out,border-style .3s ease-in-out}.task-manager{width:30rem;align-self:center;padding:1rem 0}.timer-prompt{text-align:center;padding:1rem 0}.task-manager__header{display:block;padding-bottom:.4rem;margin-bottom:.4rem;border-bottom:1px solid #fff}.task-manager__task-list{display:flex;flex-direction:column;row-gap:.5rem;margin:1rem 0}.task{background-color:#fff;padding:1rem .25rem;color:#000;border-radius:5px;list-style:none;column-gap:.4rem;display:inline-flex;align-items:center;transition:color .3s ease-in-out;border-left:5px solid transparent;transition:border-left-color .3s ease-in-out,color .3s ease-in-out,text-decoration-color .3s ease-in-out}.task--active{border-left-color:var(--color-accent-darker)}.task--completed{color:var(--gray);text-decoration:line-through;transition:color .3s ease-in-out,text-decoration-color .3s ease-in-out}.task label{display:inline-flex;align-items:center;column-gap:.25rem;cursor:pointer}.task label svg{stroke:var(--gray-lighter);fill:var(--gray-lighter);width:1.75rem;height:1.75rem;transition:stroke .3s ease-in-out,fill .3s ease-in-out}.task button#edit-button{display:inline-flex;align-items:center;margin-left:auto;padding:0 .75rem}.task button#edit-button svg{stroke:var(--gray-lighter);fill:var(--gray-lighter);width:1.5rem;height:1.5rem;transition:stroke .3s ease-in-out,fill .3s ease-in-out}.task button#edit-button:hover svg{stroke:var(--gray);fill:var(--gray)}.task--completed label svg{stroke:var(--color-accent);fill:var(--color-accent)}.task__checkbox{-webkit-appearance:none;appearance:none}.task-manager__add-task-button{background-color:var(--color-secondary);padding:.75rem 1rem;color:#fff;border:1px dashed var(--gray);border-radius:5px;width:100%}body{background-color:var(--color-primary)}.App{width:60%;margin:0 auto;display:flex;flex-direction:column;justify-content:center}