body {
               font-family: Arial, Helvetica, sans-serif;
               background-color: #212121 !important;
          }

          .container {
               width: 500px;
               margin: 20px auto;
          }

          .form {
               background-color: #eee;
               border-radius: 6px;
               padding: 20px;
               display: flex;
               align-items: center;
          }

          .input {
               padding: 10px;
               border: 1px solid #ddd;
               border-radius: 6px;
               flex: 1;
          }

          .input:focus {
               outline: none;
          }

          .add {
               border: none;
               background-color: #8b5cf6;
               color: white;
               padding: 10px;
               border-radius: 6px;
               margin-left: 10px;
               cursor: pointer;
               font-size: 15px;
          }

          .tasks {
               background-color: #eee;
               margin-top: 20px;
               border-radius: 6px;
               padding: 20px;
          }

          .tasks .task {
               background-color: white;
               padding: 10px 15px;
               border-radius: 6px;
               display: flex;
               justify-content: space-between;
               align-items: center;
               transition: 0.3s;
               cursor: pointer;
               border: 1px solid #ccc;
               font-size: 25px;
          }

          .tasks .task:not(:last-child) {
               margin-bottom: 15px;
          }

          .tasks .task:hover {
               background-color: #f7f7f7;
          }

          .tasks .task.done {
               opacity: 0.3;
          }

          .tasks .task span {
               font-size: 15px;
               background-color: #8b5cf6;
               color: white;
               padding: 4px 10px;
               border-radius: 4px;
               cursor: pointer;
          }
          .delete {
               margin-top: 20px;
               display: flex;
               justify-content: end;
          }
          .del-all{
               background-color: #8b5cf6;
               color: white;
               padding: 10px 20px;
               border-radius: 5px;
               text-decoration: none;
          }