*{margin:0;padding:0;font-family:sans-serif,Arial,Helvetica;background-color:#fafafa}::-webkit-scrollbar{display:none}.app{max-width:500px;margin:0 auto;height:100vh;box-shadow:0 0 5px 1px #dadada}.app-header{max-width:500px;padding-top:20px;display:flex;justify-content:space-between;align-items:center;width:90%;margin:0 auto}.app-header>h1{font-size:2rem;font-weight:bolder}.task{border:2px solid #010101;border-radius:5px;width:100px;height:100px;transition:.3s;position:relative;box-shadow:4px 4px #010101;padding:5px;width:95%}.openTask{height:70vh}.task-close{cursor:pointer}.task-close>h3{width:90%;font-size:1.7rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.task-close>p{font-size:1rem;max-width:100%;height:55px;text-overflow:ellipsis;overflow:hidden}.task-close>.btn-delete{position:absolute;top:7px;right:7px;width:25px;background-color:#fa0000;padding:5px;border-radius:50%;box-shadow:0 0 5px 1px #f77}.task-open{display:flex;flex-direction:column;align-items:center}.task-open>textarea{border:none;border-radius:5px;width:90%;resize:none;background-color:#fafafa;overflow:hidden;box-shadow:0 0 5px 1px #dadada;padding:5px;margin-bottom:10px}.task-open>.btn-update{width:30px;background-color:#00fa00;box-shadow:0 0 5px 1px #7f7;padding:5px;border-radius:50%;position:absolute;bottom:10px;left:10px;cursor:pointer}.task-open>.btn-delete{position:absolute;bottom:10px;right:10px;width:30px;background-color:#fa0000;padding:5px;border-radius:50%;box-shadow:0 0 5px 1px #f77;cursor:pointer}.task-open-textarea-1{font-size:1.6rem;font-weight:700}.task-open-textarea-2{font-size:1rem;height:50vh}.portal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000a;display:flex;justify-content:center;align-items:center;z-index:200}.portal-content{opacity:1;width:90%;height:80%;max-width:600px;max-height:400px;background-color:#fafafa;border:4px solid #010101;border-radius:10px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.portal-content>h3{margin-top:25px;font-size:1.8rem}.portal-form{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:90%}.portal-form>textarea{outline:none;border:none;padding:5px;box-shadow:0 0 5px 1px #dadada;border-radius:5px;width:90%;resize:none;margin:10px 0}.portal-form>.portal-form-textarea-1{font-size:1.5rem;height:30px;font-weight:700}.portal-form>.portal-form-textarea-2{height:200px;font-size:1.4rem}.portal-form>button{width:70px;height:40px;border:2px solid #010101;font-size:1.2rem;font-weight:700;border-radius:25px;background-color:#f0f0f0;cursor:pointer}.notActive{display:none}.tasklist{width:90%;max-width:500px;margin:30px auto 100px;display:grid;grid-template-columns:repeat(1,minmax(200px,1fr));gap:1rem}.btn-add{margin:30px 0;z-index:300;position:fixed;bottom:0;left:calc(50% - 18px);width:30px;padding:6px;background-color:#fafafa;border:4px solid #010101;border-radius:50%;cursor:pointer}.btn-add-background{position:fixed;bottom:0;width:100%;max-width:500px;height:50px;background-color:#fafafa;z-index:200;border-top:2px solid #010101}.tasklist-empty{font-size:1.6rem;font-weight:700;text-align:center;color:#ababab}.input>input{width:100px;height:30px;font-size:1rem;border:2px solid #010101;border-radius:10px;outline:none;padding:2px;box-shadow:4px 4px #010101;transition:.3s;cursor:pointer}.input>input:focus{width:170px}