*{padding:0;margin:0;box-sizing:border-box}.App{display:flex;flex-direction:column;width:100%;height:100%}.App main{flex:1;min-height:calc(100vh - 99px);height:100%}.dark{color:#fff;background-color:#181828}.light{color:#181828;background-color:#fff}.App main{display:flex}.field{font-size:12px;font-weight:600;padding-bottom:1rem}select{border:none;width:80%;background:none}select:focus{outline:none}.form input{padding:.5rem;width:90%;margin:15px 0;border:1px solid rgb(159,143,143);border-radius:10px}.form input:hover{border-color:#6104e2}textarea{width:90%;border-radius:10px}.form{position:relative;font-family:monospace}.form label{margin-bottom:.8rem}.label-block{display:block;margin-bottom:.8rem;font-size:1.1rem}.rm-btn{border:none;background:none;color:#aaa;font-size:18px;margin-left:10px;font-weight:700}::-webkit-input-placeholder{font-size:12px;font-family:monospace}:-ms-input-placeholder{font-size:12px;font-family:monospace}::placeholder{font-size:12px;font-family:monospace}.btn{font-family:monospace;padding:.6rem;display:block;margin:15px 0;border:none;border-radius:20px;background-color:#6104e2;width:100%;text-align:center}select{margin:10px 0}.text-light{color:#000}.text-dark{color:#fff}.task-body{position:relative;flex:1;display:flex;width:450px;overflow-x:scroll;height:100%}.newcolumn{width:250px;min-width:150px;display:flex;justify-content:center;align-items:center;height:90%;margin-top:20px;color:#888888b0;font-family:monospace;font-size:1.6rem}.newcolumn-dark{background-color:#252631}.newcolumn-light{background-color:#e9e9e9}.column-container{padding:0 1rem;min-width:18rem}.column-header{font-size:15px;padding:10px;margin:10px 0;font-family:monospace;border-radius:.5rem;text-transform:capitalize}.task{padding:.5rem;border-radius:5px;font-family:monospace;margin-bottom:.6rem;max-width:280px}.task-title{font-size:1.1rem;font-weight:600}.taskbody-dark{background-color:#20212c}.taskbody-light{background-color:#f4f4f1}.header{padding:1rem;display:flex;justify-content:space-between;align-items:center;position:relative}.header-logo{font-size:2.3rem;padding:1rem;font-weight:900;font-family:monospace}.header-logo span{display:inline-block}.header-title{font-size:2rem;font-weight:600;font-family:monospace}.header-edit{display:flex}.add-task{display:flex;justify-content:center;align-items:center;gap:.5rem;bottom:0;margin:1rem;padding:.6rem 1rem;border-radius:10px;font-size:16px;font-weight:600;font-family:monospace;color:#fff;border:none;min-width:fit-content;background-color:#6104e2}.header-edit .btn{color:gray;background:none;border:none;font-size:18px}.header-gt{font-size:25px;color:#6104e2;visibility:hidden;background:none;border:none;margin:auto}@media screen and (max-width:720px){.header-title{font-size:1.6rem}.add-task{font-size:14px;padding:.5rem}.header-edit{display:flex}.header-logo span{display:none}.header-gt{visibility:visible}}@media screen and (max-width:320px){.header-title{font-size:1.6rem}.add-task{font-size:10px;padding:.3rem}.header-edit{display:flex}}.sidebar-board{margin-bottom:1rem;padding:.5rem 1rem;border-radius:0 20px 20px 0;font-size:18px;font-weight:600;font-family:monospace;display:flex;align-items:center;justify-content:start;gap:.5rem;max-width:250px}.sidebar-board:hover{background-color:#6104e2;color:#fff}.board-light{color:#181828;background-color:#fff}.board-dark{color:#fff;background-color:#181828}.active-light{background-color:#dbdaf0}.active-dark{background-color:#262546}.modal{position:fixed;z-index:1000;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006}.modal-content{margin:auto;padding:20px;border:none;width:60%;border-radius:10px;position:relative;max-width:450px}.close{color:#aaa;position:absolute;top:5px;right:15px;font-size:20px;margin-left:10px;font-weight:700;transition:all}.close:hover,.close:focus{color:#6104e2;text-decoration:none;cursor:pointer;font-size:25px}.modal-sidebar{min-width:350px;position:absolute;z-index:9999;top:110%;padding:.8rem 0}.modal-sidebar-btn{display:block;position:relative;padding:.5rem .7rem;font-size:1.1rem;font-weight:600;font-family:monospace;margin:5px 10px 15px 0;border-radius:0 20px 20px 0}.modal-sidebar-btn:hover{background-color:#6104e2}.modal-sidebar-footer{display:block;position:relative}.modal-sidebar-footer button{position:relative}.showtask-container{position:relative;font-family:monospace;display:flex;flex-direction:column;gap:1.6rem;margin:1.6rem}.showtask-header{display:flex;justify-content:space-between}.showtask-header:first-child{font-size:1.5rem;font-weight:700}.showtask-header>div{display:flex;gap:.5rem}.showtask-header>div>button{border:none;background:none;font-size:.7rem}.subtask-items{list-style:none}.subtask-items li:not(:first-child){padding:.6rem 0;font-weight:600;font-size:.9rem}.sidebar{display:block;min-width:16rem;height:100%}.sidebar-light{color:#000;background-color:#fff}.sidebar-dark{color:#fff;background-color:#181828}.sidebar-control{position:fixed;display:flex;justify-content:center;align-items:center;gap:.5rem;bottom:0;left:0;margin:.5rem 1rem 1rem 0;padding:.6rem 1rem;border-radius:0 20px 20px 0;font-size:18px;font-weight:600;font-family:monospace;color:#fff;border:none;background-color:#6104e2}.dow{z-index:-1}.sidebar-boards{position:relative;height:calc(100vh - 99px);z-index:1000;height:100%}.sidebar-hide{position:absolute;display:flex;justify-content:center;align-items:center;gap:.5rem;bottom:0;margin:.5rem 1rem 1rem 0;padding:.5rem 1rem;border-radius:0 20px 20px 0;font-size:18px;font-weight:600;font-family:monospace;border:none}.sidebar-hide:hover{color:#fff;background-color:#6104e2}.sidebar-toggle{left:-100%;position:absolute}.up{z-index:1000}.down{z-index:-999}.theme-changer{position:absolute;display:flex;bottom:15%;padding:.4rem;margin:0 1rem;width:80%;align-items:center;justify-content:center;border-radius:.5rem}.theme-changer-dark{background-color:#020212}.theme-changer-light{background-color:beige}.theme-changer>button{position:relative;min-width:3rem;min-height:2rem;padding:.5rem;border:none;border-radius:1rem}.theme-toggler{position:absolute;color:#ff009d;background-color:#00f;width:1.3rem;height:1.3rem;margin:5px;top:1px;border-radius:100%}.left{left:0;transition:all 2s}.right{right:0}@media screen and (max-width:680px){.sidebar{display:none}}@media screen and (max-width:320px){.sidebar,.sidebar-boards,.sidebar-hide,.sidebar-control{display:none}}