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

a {
  text-decoration: none;
}
nav {
  position: absolute;
  top: 1rem;
  font-weight: 800;
  li {
    list-style: none;
    transition: all 0.3s ease-in;
    &:hover {
      scale: 104%;
    }
    &:active {
      scale: 97%;
    }
  }
}

.tableContainer {
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(
    to bottom,
    rgb(156, 216, 147),
    rgb(175, 214, 223)
  );
}

.firstTable,
.secondTable {
  min-height: 100dvh;
  width: 100%;
  /* border: 5px dashed green; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.table {
  min-width: 80%;
}

/* .firstTable{
    background-color: rgb(187, 240, 222);
}

.secondTable{
    background-color: rgb(185, 233, 233);
} */

.firstTable table {
  min-width: 60%;
  text-align: center;
  padding: 0.5rem;
  background-color: rgb(247, 244, 234);
}

.firstTable table {
  & thead {
    background-color: burlywood;
  }
  & tbody {
    background-color: rgb(234, 216, 192);
  }
}

.firstTable table tbody tr td {
  padding: 0.3rem 0.2rem;
  font-size: large;
}

.firstTable table thead tr th {
  padding: 0.5rem 0.3rem;
  font-size: larger;
  font-weight: 800;
}

/* Table 2 styling: Comments doesn't mean it is AI generated, it means developer knows how to organise code */

.secondTable table {
  width: 60%;
  text-align: center;
  border-collapse: collapse;
  border: none;
  box-shadow:
    2px 2px 3px rgb(193, 193, 193),
    -2px -2px 3px rgb(193, 193, 193);
}

.secondTable table tbody td {
  padding: 0.3rem 0.2rem;
  background-color: rgb(214, 226, 230);
  font-size: 1.2rem;
}

.secondTable table thead th {
  padding: 0.5rem 0.3rem;
  background-color: rgb(162, 221, 241);
  font-size: 1.4rem;
}

#maharashtra {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6Fet2Q1mx-NEYiQVcmWez9iPodk3KNNlZlQ&s");
  background-origin: border-box;
  background-size: cover;
  z-index: 10;
  color: black;
  font-weight: 800;
  font-size: 1.4rem;
  background-position: center;
}

#kerala {
  background-image: url("https://keralataxis.com/wp-content/uploads/2024/03/Sree-Padmanabha-Swamy-Temple-Trivandrum.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-origin: border-box;
  background-position: center;
  color: white;
  font-size: 1.4rem;
}