/* Google fonts */
@import url("https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600;700&family=Playpen+Sans:wght@100..800&display=swap");

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-color: #ffffe1;
}
main {
  min-height: 100vh;
  flex: 1 0 auto;
}

.text,
.about-intro,
.book-text,
.else-text,
.text-log,
tbody,
.modal-body {
  font-family: "Playpen Sans", sans-serif;
  color: #8a3232;
}
.text-log {
  font-size: small;
}
/* Nav bar */
header,
footer {
  background-color: #8a3232;
}
#navbar {
  margin: 0;
  padding-left: 0;
  padding-right: 20px;
}

.navbar-brand {
  margin-right: 0;
  padding: 0;
}
.nav-link,
.quote,
.fa-brands,
footer h3 {
  color: #ffb580;
  font-family: "Atma", sans-serif;
}

/* home page-about text index.html */
.about-box,
.box {
  margin: 20px;
  border: 1px solid;
  border-color: saddlebrown;
  margin: auto;
}
/* Table with booking list */
.table {
  border: #660000 solid 2px;
}
.custom-table td {
  background-color: rgb(231, 199, 157) !important;
  color: #8a3232;
}
.custom-table th {
  background-color: #b5734d !important;
  font-size: larger;
  color: #660000;
}
.table.custom-table {
  border-collapse: separate !important;
}
.modal-content {
  background-color: #ffffe1;
  border: #660000 solid;
}
/* Titles */
.about-title,
.signin-title,
.signup-title,
.signout-title,
.book-title,
.list-title,
thead,
.modal-title,
.res-title {
  color: #660000;
  font-family: "Atma", sans-serif;
}

.no-wrap {
  flex-wrap: nowrap;
}
.about-img {
  padding: 20px;
  max-width: 100%;
  height: auto;
}

/* Sign in page*/
.forgot,
.signup-link,
.signin-link {
  font-family: "Playpen Sans", sans-serif;
  color: red;
}

/* Buttons */

.book-btn,
.sg-btn,
.view-btn {
  background-color: #8a3232;
  color: #ffb580;
  font-family: "Atma", sans-serif;
  border: 2px solid #660000;
}
.book-btn:hover,
.sg-btn:hover,
.view-btn:hover {
  background-color: #ffb580;
  color: #660000;
  border: 2px solid #660000;
}
.next-btn {
  background-color: #ffb580;
  color: #660000;
  border: 2px #660000 solid;
}
.next-btn:hover {
  background-color: #ffffe1;
  color: #660000;
  border: 2px solid #660000;
}

.del-btn {
  background-color: red;
  color: #ffb580;
  border: 2px solid darkred;
}
.del-btn:hover {
  background-color: lightcoral;
  color: red;
  border: 2px solid darkred;
}

.update-btn,
.save-btn {
  background-color: rgb(4, 32, 4);
  color: rgb(176, 232, 93);
  border: 2px solid #660000;
}

.update-btn:hover,
.save-btn:hover {
  background-color: rgb(115, 159, 50);
  color: rgb(4, 32, 4);
  border: 2px solid #660000;
}

.cancel-btn {
  background-color: rgb(248, 219, 32);
  color: black;
  border: 2px solid #660000;
}
.cancel-btn:hover {
  background-color: rgb(158, 158, 4);
  color: black;
  border: 2px solid #660000;
}
.home-btn {
  font-family: "Atma", sans-serif;
  background-color: #8a3232;
  color: #ffffe1;
  border: 2px solid #660000;
}
.home-btn:hover {
  background-color: #ffffe1;
  color: #660000;
  border: 2px solid #660000;
}
.sm-screen {
  margin-bottom: 4px;
}
/* Contact page */
.card .contact {
  background-color: #ffb580;
}
.bd {
  border: #660000 solid 2px;
}

/* Footer */
.footer {
  flex-shrink: 0;
  padding-top: 10px;
}
hr {
  margin-top: 5px;
  margin-bottom: 5px;
}
hr {
  margin: unset;
}
.copyright {
  color: #d2946f;
  font-size: 12px;
  padding-top: 5px;
}

.social {
  transition: color 0.3s ease-in-out;
  font-size: larger;
}
.social:hover {
  color: #ffffe1;
}

.card-img-top {
  width: 100%;
  height: 200px;
}

@media screen and (min-width: 320px) {
  /* home page */
  .about-intro,
  .text {
    font-size: smaller;
  }
  .logo {
    width: 200px;
    height: 50px;
  }
  .text-log {
    font-size: x-small;
  }
  .table.custom-table {
    font-size: x-small;
  }
  .custom-btn {
    padding: 2px;
    margin-bottom: 2px;
    font-size: small;
  }
  .view-btn,
  .book-btn {
    padding: 2px;
  }
}

@media screen and (min-width: 768px) {
  .logo {
    width: 300px;
    height: 70px;
  }
  .table.custom-table {
    font-size: medium;
  }
  .custom-btn {
    padding: 5px;
    margin-bottom: 2px;
    font-size: medium;
  }
  .view-btn,
  .book-btn {
    padding: 4px;
  }
}
@media screen and (min-width: 992px) {
  .logo {
    width: 400px;
    height: 90px;
  }
  .text-log {
    font-size: small;
  }

  .text {
    font-size: medium;
  }
  .about-img {
    height: fit-content;
    width: auto;
  }
}
@media screen and (min-width: 1265px) {
  .about-intro,
  .text {
    font-size: medium;
  }
}