.box {
  width: 90%;
  margin: auto;
  margin-bottom: 40px;
}

.errorBox {
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.head-line {
  font-weight: 400;
}

.para-text {
  font-weight: 300;
  letter-spacing: 1.3px;
  word-break: keep-all;
}

.order-list {
  padding: 0;
  list-style: none;
  counter-reset: list-counter;
}

.order-list .list {
  counter-increment: list-counter;
}

.order-list .list::before {
  content: counter(list-counter) ". ";
  margin-left: 4px;
}

/* introduction css */
.introduction {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
  gap: 20px;
}

.box-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;

}

.intro-pic {
  width: 80%;
  min-width: 200px;
  border: 2px solid rgb(225, 216, 216);
}

.intro-pic img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
}

.people-name,
.people-dob-dod {
  font-family: cursive, monospace, arial;
}

.people-name {
  font-size: 24px;
}

.box-right {
  flex: 3;

}

.intro-text {
  display: flex;
  flex-direction: column;
}

/* biography css */
.biography {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
  gap: 20px;

}

.biography-left {
  flex: 3;
}

.biography-right {
  flex: 1;
  min-width: 20px;
  border-left: 2px solid;
  padding-left: 20px;
}

/* back story and struggle day story */
.stories {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.back-story {
  flex: 2;
}

.back-story {
  border-right: 2px solid;
}

.struggle-story {
  flex: 3;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* first project css */
.first-next-project {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.first-project {
  flex: 1;
  border-right: 2px solid;
}

.next-project {
  flex: 1;
}

/* row with two table in screen greater than tablets */
.table-two {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.table-left {
  flex: 1;
}

.table-right {
  flex: 2;
}

/*tablet view*/
@media only screen and (max-width:768px) {
  .introduction {
    flex-direction: column;
  }

  .biography {
    flex-direction: column;
  }

  .biography-right {
    border: none;
    padding: 0;
  }

  .stories {
    flex-direction: column;
  }

  .back-story {
    border: 0;
  }

  .struggle-story {
    flex-direction: column;
    align-items: unset;
    gap: 0px;
  }

  .first-next-project {
    flex-direction: column;
  }

  .first-project {
    border: none;
  }

  .table-two {
    flex-direction: column;
  }
}


/* people.html page css */
.peopleContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;

}

.peopleSection .head-line {
  margin: 30px 0px;
}

.peopleCard {
  width: 250px;
  height: 80px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  background-color: whitesmoke;
  border-radius: 4px;
}

.peopleCardLeft {
  width: 100px;
  background-color: black;
  border-radius: 50%;
  border: 2px solid rgb(16, 16, 16);
  display: flex;
  justify-content: center;
}

.peopleCardLeft img {
  width: 70px;
  max-height:78px;
  border-radius: 50%;
  object-fit: cover;
}

.peopleCardRight .peopleCardname {
  color: rgb(16, 16, 16);
  font-size: 16px;
}

.peopleCardname a {
  color: black;
}