/* base template */
html {
  height: 100vh;
}

body {
  font-family: "Ubuntu", "Noto Sans TC", sans-serif;
  min-height: 100%;
  background-color: #f5f5f5;
}

.content {
  flex: 1; /* This will make the content area grow to fill the available space */
  min-height: calc(
    101vh - var(--navbar-height, 0px) - var(--cover-height, 0px) -
      var(--bottom-nav-height, 0px) - var(--footer-height, 0px)
  );
}

.toast {
  opacity: 1 !important;
  border-radius: 10px;
}

.toast-header {
  border-radius: 9px 9px 0px 0px;
  font-size: 16px;
}

.toast-body {
  font-size: 16px;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* cover */
.cover {
  width: 100%;
  margin-top: -10px;
  background-size: cover; /* This will maintain the aspect ratio and crop the image */
  background-position: center; /* This will center the image within the container */
}

/* special margin top */
.mt-16 {
  margin-top: 6rem;
}

/* error message container (desktop) */
.error-message-container {
  height: 60vh;
}

/* footer */
footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin: 0;
}

/* profile img */
img.profile-xxl {
  width: 12rem;
  height: 12rem;
  object-fit: cover;
  border-radius: 50%;
}

img.profile-xl {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: 50%;
}

img.profile-lg {
  width: 3.7rem;
  height: 3.7rem;
  object-fit: cover;
  border-radius: 50%;
}

img.profile-md {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 50%;
}

img.profile-sm {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 50%;
}

/* pagination btn and view more in home */
.bg-light-grey {
  background-color: #f5f5f5;
}

/* blogpost */
.title-link {
  text-decoration: none;
  color: #000000;
}

.title-link:hover {
  text-decoration: underline;
  color: #f7966b;
}

.author-link {
  text-decoration: none;
  color: #000000;
}

.author-link:hover {
  text-decoration: underline;
  color: #000000;
}

.tag:hover {
  background-color: #f7966b;
}

.bg-grey {
  background-color: #787878;
}

.bg-dark-grey {
  background-color: #535353;
}

.in-content-link {
  text-decoration: underline;
  color: #000000;
}

.in-content-link:hover {
  text-decoration: underline;
  color: #f7966b;
}

/* text style */
.text-grey {
  color: #787878;
}

.text-dark-grey {
  color: #535353;
}

.text-light-grey {
  color: #f5f5f5;
}

.fs-large {
  font-size: large;
}

.fs-small {
  font-size: small;
}

/* hover pointer in 404/500 */
.hover-pointer:hover {
  cursor: pointer;
}

/* baststage text editor */
textarea {
  white-space: pre-line;
}

/* backstage input form */
input[type="text"]::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #787878;
  opacity: 1;
}

input[type="text"]:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #787878;
}

input[type="text"]::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #787878;
}

textarea::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #787878;
  opacity: 1;
}

textarea:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #787878;
}

textarea::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #787878;
}

/* backstage text style */
.backstage-icon {
  font-size: 18px;
  color: #000000;
}

.backstage-mobile-time {
  font-size: small;
  font-style: italic;
}

.brand-text {
  font-family: "Ubuntu Condensed", sans-serif;
}