/* Modern css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* dark theme */
body {
  background-color: #212121;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 600px;
  margin: 10rem auto;
  padding: 2rem;
  background-color: #333;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  -moz-border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -o-border-radius: 1rem;
  -ms-border-radius: 1rem;
  border-radius: 1rem;

  & .heading {
    color: #fff;
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
  }

  & .input-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;

    & input[type='text'] {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      padding: 1.2rem;
      color: white;
      border: 2px solid #8707ff;
      padding: 1rem 2.5rem;
      background: transparent;
      max-width: 190px;
      -webkit-border-radius: 0.8rem;
      -moz-border-radius: 0.8rem;
      -ms-border-radius: 0.8rem;
      -o-border-radius: 0.8rem;
      border-radius: 0.8rem;

      &:active {
        box-shadow: 2px 2px 15px #8707ff inset;
      }
    }

    & button {
      padding: 1.2rem 2rem;
      background-color: #6c0ca3;
      color: #fff;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
      -moz-border-radius: 1rem;
      -webkit-border-radius: 1rem;
      -o-border-radius: 1rem;
      -ms-border-radius: 1rem;
      border-radius: 1rem;
    }
  }

  & .list-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;

    & ul {
      list-style-type: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;

      & li {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        padding: 1.2rem 1.2rem;
        background-color: #6c0ca3;
        color: #fff;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
        -moz-border-radius: 1rem;
        -webkit-border-radius: 1rem;
        -o-border-radius: 1rem;
        -ms-border-radius: 1rem;
        border-radius: 1rem;
        width: auto;

        &:hover {
          background-color: #5c0b92;
        }

        &:active {
          box-shadow: 2px 2px 15px #5c0b92 inset;
        }

        & .delete-task {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 9px 12px;
          gap: 8px;
          height: 40px;
          width: 8rem;
          border: none;
          background: #ff342b;
          border-radius: 20px;
          cursor: pointer;

          &:hover {
            background: #e52e26;
          }
        }
      }
    }
  }
}