@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto&display=swap";@import"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css";.App{min-height:100vh}.container{max-width:1200px;margin:auto;padding:10px}header{min-height:70px;display:flex;align-items:center;justify-content:space-between;padding:15px;margin-bottom:70px;background-color:#000}header .logo{display:flex;align-items:center}header .logo img{max-width:60px;cursor:pointer}header .logo span{font-size:22px;margin-left:7px;cursor:pointer;color:#525252;color:#fff;font-weight:600}header .themeSelector span{height:20px;width:20px;border-radius:50%;display:inline-block;margin-left:5px;cursor:pointer;border:1px solid #dfdfdf}header .themeSelector .activeTheme{height:30px;width:30px}.addTask{padding:20px 15px;border-radius:5px;background-color:#fff;max-width:500px;margin:20px auto}.addTask form{display:flex;gap:7px}.addTask form input{flex-grow:1;padding:5px;border:1px solid #eaeaea;border-radius:5px;font-size:18px;outline:1px solid #9a9a9a}.addTask form input:focus{outline:2px solid #9a9a9a}.addTask form button{background-color:#000;color:#fff;border:none;padding:5px 20px;border-radius:5px;cursor:pointer;font-size:18px}.addTask form button:hover{background-color:#024e27}.showTask{padding:20px 15px;border-radius:5px;background-color:#fff;margin:20px auto}.showTask div.head{padding:10px 0 20px;border-bottom:2px solid #dfdfdf;display:flex;align-items:center}.showTask div.head div{flex-grow:1}.showTask .title{font-size:18px;font-weight:600}.showTask .count{background-color:#000;color:#fff;padding:5px 10px;border-radius:50%;margin-left:10px}.showTask .clearAll{background-color:#000;color:#fff;padding:5px 10px;border-radius:5px;cursor:pointer;border:0px;font-size:16px}.showTask .clearAll:hover{background-color:#001636}.showTask ul{margin:30px 5px 20px;display:flex;flex-direction:row;justify-content:space-around;flex-wrap:wrap;gap:15px}.showTask li{padding:15px 10px;border-bottom:1px solid #e5e5e5;display:flex;gap:5px;width:700px;box-shadow:var(--box-shadow);border-radius:5px}.showTask li:hover{background-color:#e9e9e9}.showTask li p{flex-grow:1;display:flex;flex-direction:column}.showTask li .name{font-size:18px;padding-bottom:5px}.showTask li .time{font-size:12px;color:#737373}.showTask i.bi-pencil-square{font-size:18px;color:#1363df;cursor:pointer}.showTask i.bi-trash{font-size:18px;color:#d82148;cursor:pointer}@media only screen and (max-width: 800px){.showTask li{width:100%}}:root{--box-shadow: rgba(9, 30, 66, .25) 0px 1px 1px, rgba(9, 30, 66, .13) 0px 0px 1px 1px}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif;text-decoration:none;list-style:none}.light{background-color:#fff;transition:all .5s}.medium{background:#16222a;background:-webkit-linear-gradient(to right,#3a6073,#16222a);background:linear-gradient(to right,#3a6073,#16222a)}.dark{background:#1f1c2c;background:-webkit-linear-gradient(to right,#928dab,#1f1c2c);background:linear-gradient(to right,#928dab,#1f1c2c)}.gOne{background:#614385;background:-webkit-linear-gradient(to right,#516395,#614385);background:linear-gradient(to right,#516395,#614385)}.gTwo{background:#134e5e;background:-webkit-linear-gradient(to right,#71b280,#134e5e);background:linear-gradient(to right,#71b280,#134e5e)}.gThree{background:#5c258d;background:-webkit-linear-gradient(to right,#4389a2,#5c258d);background:linear-gradient(to right,#4389a2,#5c258d)}