.container {
    display: flex;
    align-items: center;
    justify-content: center;
}


h2 {
    margin-top: 50px;
    text-align: center;
}
#search, #btnSearch,#btnClear {
    padding: 10px 15px;
    font-size: 20px;
    border-radius: 4px;
    margin: 30px 0;
    
}


input, button {
    border: 1px solid lightgray;
    color: teal;
}
input:focus {
    border: 1px solid lightgray;
    color: navy;
    outline: none;
}

#btnSearch {
    cursor: pointer;
    background-color: lightgreen;
    border: 1px solid transparent;
}
#btnClear {
  cursor: pointer;
  background-color: red;
  border: 1px solid transparent;
}
#btnSearch i {
    color:maroon;
}
#btnClear i {
  padding: 10;
  color: #2a324b;
}

/* table design code */
/*   color variables */
:root {
    --clr-primary: #81d4fa;
    --clr-primary-light: #e1f5fe;
    --clr-primary-dark: #4fc3f7;
    --clr-gray100: #f9fbff;
    --clr-gray150: #f4f6fb;
    --clr-gray200: #eef1f6;
    --clr-gray300: #e1e5ee;
    --clr-gray400: #767b91;
    --clr-gray500: #4f546c;
    --clr-gray600: #2a324b;
    --clr-gray700: #161d34;
    --clr-pending: #fff0c2;
    --clr-pending-font: #a68b00;
    --clr-unpaid: #ffcdd2;
    --clr-unpaid-font: #c62828;
    --clr-paid: #c8e6c9;
    --clr-paid-font: #388e3c;
    --clr-link: #2962ff;
    --radius: 0.2rem;
}



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

body {
  font-family: Mukta, sans-serif;
  display: grid;
  justify-content: center;
  align-items: center;
  color: var(--clr-gray500);
  font-size: 0.9rem;
  background-color: var(--clr-gray100);
}

table {
  border-collapse: collapse;
  box-shadow: 0 5px 10px var(--clr-gray300);
  background-color: white;
  text-align: left;
  overflow: hidden;
  
}

  thead {
    box-shadow: 0 5px 10px var(--clr-gray300);
  }

  th {
    padding: 1rem 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    font-size: 0.7rem;
    font-weight: 900;
  }

  td {
    padding: 1rem 2rem;
  }

  a {
    text-decoration: none;
    color: var(--clr-link);
  }

  .status {
    border-radius: var(--radius);
    background-color: red;
    padding: 0.2rem 1rem;
    text-align: center;
  }

    .status-pending{
      background-color: var(--clr-pending);
      color: var(--clr-pending-font);
    }

    .status-paid {
      background-color: var(--clr-paid);
      color: var(--clr-paid-font);
    }

    status-unpaid {
      background-color: var(--clr-unpaid);
      color: var(--clr-unpaid-font);
    }
  

  .amount {
    text-align: right;
  }

  /* Color alternating rows */
  tr:nth-child(even) {
    background-color: var(--clr-gray150);
  }

  footer{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70vh;
  }