@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";*{margin:0;padding:0}body{font-family:Roboto,sans-serif;font-optical-sizing:auto;font-weight:300;color:#444;background-color:#f3f3f3}.app{display:grid;grid-template-rows:100px auto}.app_main{display:flex;justify-content:space-evenly;padding:3px 2%;width:86rem}h1{text-align:center;margin:1.2rem;font-weight:700;font-size:3rem;position:relative}h1:after{content:"";display:block;position:absolute;bottom:-1%;left:40%;height:100%;width:20%;z-index:-1;opacity:.7;background-image:linear-gradient(to top left,#39b385,#9be15d);transform:scale(1.07,.99) skew(18deg);border-radius:0rem 2rem}.taskCard_details{background-color:#fffdf8;border-radius:.6rem;padding:1rem .8rem;margin-bottom:1rem;box-shadow:0 4px 8px #0000000a;transition:all .2s ease-in-out;cursor:pointer;min-height:6rem;width:17rem;display:flex;flex-direction:column;justify-content:space-between;border:2px solid rgb(94,197,118)}.taskCard_details:hover{box-shadow:0 8px 20px #0000000a;transform:translateY(-2px)}.card-title{font-size:1.2rem;font-weight:600;color:#2b2b2b;margin-bottom:.8rem}.card-tasks{display:flex;justify-content:space-between;align-items:center}.card_tags{display:flex;gap:.5rem}.card-delete-icon{display:flex;justify-content:flex-end;align-items:center;width:1.2rem}.delete_btn{width:1.2rem;height:1.2rem;cursor:pointer;border-radius:100%;display:flex;align-items:center;justify-content:center;transition:all .15s ease-in-out;padding:.3rem}.delete_btn:hover{background-color:#e8edf4}.tags{font-size:.7rem;font-weight:600;cursor:pointer;padding:5px 12px;border-radius:.313rem;background-color:#1c4d8d;color:#fff;border:none;outline:0;margin-bottom:.2rem;text-transform:uppercase}.drop-area{height:5rem;border-radius:.4rem;border:2px dashed #dcdcdc;padding:15px 12px;margin-top:1rem;width:16rem;margin-bottom:1rem;display:flex;justify-content:space-evenly;align-items:center;opacity:1;font-size:1.6rem;font-weight:900;color:#d2691e}.drop-area-hidden{opacity:0}.task_column{margin-top:2rem;margin-left:3.5rem;justify-content:center;align-items:center}.task_header{display:flex;align-items:center}h2{font-family:Inter,sans-serif;font-weight:600;display:inline-block;font-size:1.4rem}.close_icon{background-color:#fff;height:25px;border-radius:50%;margin-right:.8rem}.app_header{display:flex;align-items:center;justify-content:center;border-bottom:1px solid #dcdcdc}.task_input{font-size:1.25rem;font-weight:500;background-color:#f9f9f9;color:#000;border:1px solid #dfe3e6;padding:.5rem .75rem;margin-bottom:1rem;width:100%;border-radius:.313rem;outline:0}.task_input::placeholder{color:#686868}.app_header>form{width:60%}.task_action{display:flex;justify-content:space-between;align-items:flex-end}.btn_section{display:flex;justify-content:space-between;width:220px}.action_section{display:flex;justify-content:space-between;width:auto;align-items:first end}.task_status{font-size:1.6rem;font-weight:500;padding:2px 10px;border-radius:5px;height:35px;width:auto;border:2px solid #1c4d8d;outline:0}.btn-submit{font-size:1.4rem;font-weight:500;background-color:#1c4d8d;color:#fff;height:30px;border:none;padding:2px 10px;border-radius:5px;cursor:pointer;margin-left:1rem;text-transform:uppercase}