:root{--light-green: rgb(1, 255, 22);--light-yellow: rgb(255, 225, 53);--neon-blue: rgb(73, 213, 255);--text-white: white;--glass-grey: rgba(201, 201, 201, .616);--radius: 2rem}*{box-sizing:border-box;padding:0;margin:0;font-family:Verdana,Geneva,Tahoma,sans-serif}body{position:relative}button{border:none;padding:.01rem .6rem;box-shadow:0 0 10px 0 var(--glass-grey)}.main-container{padding-top:5.3rem;position:relative;width:100%;min-height:100vh}.add-task-container{position:fixed;display:flex;align-items:center;justify-content:center;top:50vh;right:10px;min-height:50px;min-width:50px;border-radius:50px;box-shadow:0 0 10px 0 var(--glass-grey);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:30}.add-task-btn{border-radius:100%}.task-list{width:97%;display:flex;flex-direction:column;gap:.3rem;margin:.5rem}.task-block{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:.6rem;border-radius:1rem;background-color:var(--text-white);box-shadow:0 0 10px 0 var(--glass-grey)}.status-icon{position:absolute;top:0;right:5px;font-size:.9rem}.pending-status{color:#ffe600}.complete-status{color:var(--light-green)}.task-header{display:flex;flex-direction:row;justify-content:space-between}.task-label{font-size:1rem;font-weight:600}#taskModal{display:hidden;position:fixed;top:0;right:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:31;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#0003}.task-modal-container{background-color:#fff;width:80%;min-height:40%;display:flex;flex-direction:column;align-items:center;padding:2rem;border-radius:2rem}.close-modal-btn{color:red;width:40px;height:40px;border-radius:100%;background-color:var(--text-white);box-shadow:0 0 10px 0 var(--glass-grey)}.mark-state-button{color:var(--text-white);font-weight:700;border-radius:var(--radius);padding:.3rem 1.5rem;margin-top:2rem}.mark-complete{background-color:var(--light-green)}.mark-pending{background-color:var(--light-yellow)}.create-task-container{padding:2rem}.create-task-input-container{display:flex;flex-direction:column;align-items:start}.create-task-input{border:1px solid black;padding:.2rem 1rem;width:100%;border-radius:.5rem}.create-button-container{display:flex;align-items:center;justify-content:center}.create-button{margin-top:2rem;background-color:#000;color:var(--text-white)}.task-section{margin-top:1rem}
