*{box-sizing:border-box}body{font-family:Arial,sans-serif;margin:0;padding:0}.body{display:flex;flex-direction:column;min-width:375px;height:100vh}header,footer{background-color:#333;color:#fff;text-align:center;flex-grow:0}header{padding:10px 0}footer{padding:0 0 5px}main{flex-grow:1;padding:20px;background-color:#fff0f5}header h1{color:#fff}nav{display:flex;align-items:center;background-color:#4d4d4d;padding:10px 20px;border-color:#fff;border-style:solid;border-width:2px 0 2px 0}nav .menu{display:flex;justify-content:center;align-items:center;flex-grow:1;list-style:none}nav .menu li{margin:5px}nav .nav-link{text-decoration:none;color:#354bf0;padding:10px 15px;margin:0 10px;border-radius:10px;background-color:#f0f0f0;transition:background-color .3s}nav .nav-link:hover,nav .nav-link.current-page{background-color:#384dea;color:#fff}nav .log-out{margin-left:auto;flex-grow:0}nav .log-out button{background-color:#0b26ee;color:#fff;padding:5px 15px;border:none;border-radius:5px;font-weight:700}nav .log-out button:hover{background-color:#0015b6}h1,h2,h3{color:#ff1493}h3{margin:5px}p,li{line-height:1.6;margin-top:5px;color:#ff69b4}button{cursor:pointer}footer a{color:#368eed}.logotitle{display:flex;direction:row;align-items:center;justify-content:center}.logotitle img{width:70px;height:70px;margin-right:20px}#login-form button,#family-container button,#add-member-form button{background-color:#ff69b4;color:#fff;padding:5px 15px;border:none;border-radius:5px;font-weight:700}#login-form button:hover,#family-container button:hover,#add-member-form button:hover{background-color:#ff43a1}@media (max-width: 1000px){header,nav,.logotitle,.menu,.log-out{display:block;text-align:center}nav .menu,nav .log-out{padding:0}nav .menu li,nav .log-out button{margin:10px 0}nav a{display:block;margin:5px}#login-form label,#login-form input,#login-form button{display:block}#login-form input{margin-bottom:10px}}main.not-found-main{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background-color:#7c3434;font-size:40px;font-weight:700}main.login-main{display:flex;flex-direction:column;width:100%}#login-form label{color:#ff69b4}#login-form input{border:#ff43a18d 1px solid;margin:8px}#curr-user{color:#660057;font-weight:700}#login-status{font-size:large;color:#de5399f6}main.home-main{display:flex;flex-direction:row;width:100%}section.sidebar{flex-basis:500px;padding:10px;margin:15px;background-color:#e6ffe6;height:calc(100% - 30px);flex:2.5}.profile{text-align:center;padding-bottom:10px;border-bottom:1px solid #ddd;margin-bottom:10px}#profilePic{width:150px;height:150px;border-radius:20%;object-fit:cover;margin-bottom:5px;border:2px solid #004d00}.fileInputLabel{display:inline-block;padding:10px;margin:5px;background-color:#060;color:#fff;border-radius:5px;cursor:pointer;font-family:Arial,sans-serif;font-size:12px}.fileInputLabel:hover{background-color:#004d00}#userInfo{color:#004d00;margin:0}.userDisplay{color:#053205;margin:0;font-weight:700}#event-log h2{text-align:center;margin-top:5px;margin-bottom:10px;color:#060}#events{padding:3px;margin-left:2px}.event{display:flex;flex-direction:row;margin-top:3px}.event-action{color:#004d00;width:190px}.family-member{font-weight:700}.task-name{color:#2cb02c;font-style:italic;font-size:medium}section.todolist{display:flex;flex-direction:column;align-items:center;width:100%;padding:20px;flex:5}.todolist-header h2,.todolist-header{text-align:center;margin:10px 0;color:#e16200}#task-lists{display:flex;flex-direction:column;align-items:center;width:100%}.task-list-dropdown{display:block;width:100%;margin:10px;border:1px solid #ddd;border-radius:4px;background-color:orange;color:#fff;font-size:90%}#task-list{width:100%;border-collapse:collapse;border:2px solid #fd8b33}#task-list th,#task-list td{border:1px solid #ffcc80;padding:8px;text-align:center;color:#db8f31}#task-list thead{background-color:orange}#task-list thead th{font-weight:700;font-size:20px;color:#fff}#task-list tbody tr:nth-child(odd){background-color:#fff5e6}#task-list tbody tr:nth-child(2n){background-color:#fae4c3}#task-list tbody tr:hover{background-color:#ffd597}#task-list tfoot tr{background-color:orange}#task-list tbody tr.completed-task{text-decoration:line-through;color:#986903da;background-color:#e56b00c7}#task-list tbody tr.completed-task td{color:#fcf5d9}#task-list button{padding:5px 10px;margin:2px;width:80%;max-width:175px;cursor:pointer;border:none;background-color:#ff8c00;color:#fff;border-radius:4px;transition:background-color .3s ease}#task-list button:hover{background-color:#ff7000}#add-task-form button{background-color:#ffefd7;color:#ff7000;border:3px solid #ff7000;font-weight:700;font-size:large}#add-task-form button:hover{background-color:#ffb47aa6}.checkbox{display:inline-block;width:28px;height:28px;cursor:pointer;background-color:#f0f0f0;border:1px solid #dcdcdc;text-align:center}.completed{font-size:24px;color:e56b00c7;background-color:#fa7500c7}.checkbox.completed:before{content:"✓"}#task-date-header{text-align:center;position:relative}#date-header-content{display:inline-block;text-align:center}#date-sort-icon{cursor:pointer;position:absolute;right:10px;top:50%;transform:translateY(-50%)}#task-list input{display:flex;align-items:center;justify-content:center;width:100%;padding:5px;border:1px solid #ffcc80;border-radius:4px;text-align:center;color:#db8f31;background-color:#fff5e6}#task-list input::placeholder{color:#db8f31}.alt-task-list-dropdown{display:none}@media (max-width: 1000px){main{flex-direction:column}}main.about-main{display:flex;flex-direction:column;width:100%}#family-members-container{display:flex;flex-direction:column;justify-content:center;max-width:600px}#family-members-container h1{margin-top:0}#family-container .family-member,#add-member-form{display:flex;align-items:center;justify-content:space-between;padding:10px;border:1px solid #ff1493;border-radius:5px;background-color:#fccfdecc}#family-container .family-member-name,#family-container .family-member-role{margin-right:10px}#family-container .family-member{margin-bottom:10px;color:#ff1493}#family-container .family-member-name{font-weight:700}#family-container .family-member-role{font-style:italic}#add-member-form input,#add-member-form select{border:#ff43a18d 1px solid;background-color:#fff0f5;color:#ff1493}#add-member-form input::placeholder{color:#ff1493}#quote{margin-left:10px;max-width:600px}#quote-text{color:#f5a5cdf6;padding:10px;border-left:4px solid #de5399f6;display:block}#quote-author{padding:10px;color:#de5399f6}