:root{--primary:#00f;--secondary:#0ff;--light:#ffffe6;--light-alt:#669;--dark:#131a26;--dark-alt:#202b3e}*{box-sizing:border-box;font-family:Fira Sans,sans-serif;margin:0;padding:0}body{background-color:#202b3e;background-color:var(--dark-alt);color:#ffffe6;color:var(--light)}.App{padding:32px}h1{font-size:40px;font-weight:700;margin-bottom:32px}h4{color:#669;color:var(--light-alt);font-size:18px;font-weight:400;text-transform:uppercase}.todo,h4{margin-bottom:16px}.todo{align-items:center;background-color:#131a26;background-color:var(--dark);border-radius:16px;cursor:pointer;display:flex;padding:16px;position:relative;transition:.5s}.todo:hover{opacity:.5}.todo .checkbox{background-image:linear-gradient(180deg,#00f,#0ff);background-image:linear-gradient(to bottom,var(--primary),var(--secondary));border-radius:50%;height:20px;margin-right:16px;transition:.4s;width:20px}.todo .checkbox,.todo.is-complete .checkbox{background-color:#202b3e;background-color:var(--dark-alt)}.todo.is-complete .checkbox{background-image:linear-gradient(180deg,transparent,transparent)}.todo .text{font-size:20px}.todo.is-complete .text{text-decoration:line-through}.todo .delete-todo{background-color:#af1e2d;border-radius:50%;font-weight:700;height:24px;position:absolute;right:16px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:24px}.addPopup,.todo .delete-todo{align-items:center;color:#ffffe6;color:var(--light);display:flex;justify-content:center}.addPopup{background-color:#00f;background-color:var(--primary);background-image:linear-gradient(to bottom right,#00f,#0ff);background-image:linear-gradient(to bottom right,var(--primary),var(--secondary));border-radius:999px;bottom:32px;cursor:pointer;font-size:28px;font-weight:900;height:64px;position:fixed;right:32px;width:64px}.popup{background-color:#ffffe6;background-color:var(--light);border-radius:16px;box-shadow:0 4px 32px #131a26;box-shadow:0 4px 32px var(--dark);left:50%;max-width:400px;padding:32px;position:fixed;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.closePopup{cursor:pointer;font-size:20px;height:20px;position:absolute;right:16px;top:16px;width:20px}.closePopup,.popup h3{color:#131a26;color:var(--dark)}.popup h3{font-weight:400;margin-bottom:16px;text-transform:uppercase}.add-todo-input{-webkit-appearance:none;appearance:none;background-color:#fff;border:none;border-radius:16px;box-shadow:0 2px 24px rgba(0,0,0,.2);font-size:20px;outline:none;padding:16px;width:100%}.button{background-image:linear-gradient(90deg,#00f,#0ff);background-image:linear-gradient(to right,var(--primary),var(--secondary));border-radius:999px;cursor:pointer;display:inline-block;font-size:18px;font-weight:700;margin-top:16px;padding:16px 32px;text-align:center;text-transform:uppercase}
/*# sourceMappingURL=main.757aadc0.css.map*/