*{margin:0;padding:0;box-sizing:border-box;font-family:Verdana,Geneva,Tahoma,sans-serif}body{background-color:#000;color:#fff}.app-container{display:flex;flex-direction:column;height:100vh;justify-content:space-between}.app{padding:20px;width:100%;min-height:90%;display:flex;gap:20px;justify-content:space-between;align-items:center}form,.todo-list{background-color:#191717;border:2px solid #fff;padding:10px;border-radius:10px;display:flex;flex-direction:column}form{gap:5px;height:fit-content;width:40%}form p{margin:5px 0;font-size:20px;font-weight:600}input,.task{background-color:#383838;border:1px solid grey;border-radius:3px;padding:5px;color:#fff}input{font-size:18px}input::placeholder{color:#fff}.submit-button{width:100px;margin-top:10px;padding:5px 10px;place-self:center;font-size:20px;font-weight:700;color:#fff;background-color:#3ab354;border:2px solid #fff;border-radius:10px;cursor:pointer}.submit-button:hover{background-color:#3ab35475}.submit-button:active{transform:scale(.98)}#details{margin-top:10px}.todo-list{width:60%;height:100%;padding:10px 20px}.todo-list h1{text-align:center;margin:5px}.tasks{margin-top:10px;display:flex;flex-direction:column;gap:10px;overflow:auto;width:100%;height:100%}.tasks::-webkit-scrollbar{display:none}.task{margin:0;padding:10px;display:flex;flex-direction:column;gap:5px;height:auto}.task .task-header{width:100%;padding-bottom:10px;border-bottom:2px solid rgba(188,188,188,.139);display:flex;flex-direction:row;justify-content:space-between;align-items:center}.task .task-header h3{font-size:20px;font-weight:700;width:75%;word-wrap:break-word}.task .task-header span{font-size:14px;color:#9a9a9a;width:40%;text-align:right}.task h2:active{width:auto;overflow:visible;text-overflow:clip}.task button{font-size:16px;font-weight:700;color:red;cursor:pointer;background-color:transparent;border:none;align-self:flex-end}.task p{font-size:20px;font-weight:700;display:flex;flex-direction:column;word-wrap:break-word}.no-tasks{width:100%;height:100%;font-size:30px;font-weight:700;color:gray;display:flex;flex-direction:column;justify-content:center;align-items:center}.footer{background-color:#2c0e0e;padding:10px;display:flex;align-items:center;justify-content:space-around;gap:5px}.footer #app-name{font-weight:600;font-size:15px;letter-spacing:.5px;color:#fff}.footer #copyrights{color:#9a9a9a;font-size:13px}.footer #developer-name{color:#f5f5f5;font-weight:500;transition:color .3s ease}.footer #developer-name:hover{color:#ff9800;cursor:pointer}@media(max-width:800px){.app{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:15px;padding:10px}form{width:100%;height:fit-content}.todo-list{width:100%;height:400px}.task .task-header h3,.task p{font-size:18px}.submit-button{width:90px;font-size:18px}.footer{flex-direction:column;gap:5px}}@media(max-width:400px){.app{gap:10px;padding:5px}form{padding:8px}input{font-size:16px}.submit-button{width:80px;font-size:16px}.task .task-header h3{font-size:16px}.task .task-header span{font-size:10px}.task p{font-size:16px}.todo-list{height:300px;padding:5px 10px}.footer{font-size:12px;flex-direction:column;gap:3px}}@media(max-width:200px){body{font-size:10px}.app{padding:2px;gap:5px}form,.todo-list{width:100%;padding:2px}input{font-size:12px;padding:2px}.submit-button{width:70px;font-size:12px;padding:2px 4px}.task .task-header h3{font-size:10px}.task p{font-size:12px}.todo-list{height:200px}.footer{font-size:10px;flex-direction:column;gap:2px}}