.spacer-large {
  height: 12rem;
}

.nav-tabs {
  position: fixed;
  bottom: 3rem;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 3rem; /* Increased from 2rem to 4rem */
  background-color: #0056b3;
}

.nav-tabs-bottom {
  position: fixed;
  bottom: 1.5rem;
  left: 0; /* Added to span full width */
  right: 0; /* Added to span full width */
  width: 100%;
  margin: 0;
  padding: 0;
  z-index: 1000;
  height: 2rem; /* Adjust as necessary */
  background-color: #0056b3;
}

.nav-tabs .grid-x {
  display: flex; /* Changed from 'fixed' to 'flex' */
  justify-content: center; /* Changed from 'top' to 'center' */
  align-items: center; /* Center items vertically */
  margin: 0;
  padding: 0;
}

.nav-tabs-bottom .grid-x {
  display: flex; /* Ensure flex display */
  justify-content: center; /* Center buttons horizontally */
  align-items: center; /* Center buttons vertically */
  margin: 0;
  padding: 0;
}

.nav-tabs .button {
  text-align: center; /* Ensure text is centered */
  margin: 0;
  padding: 1rem 0; /* Increased padding for top and bottom */
}

.photo-block {
  margin-bottom: 1rem;
}

.thumbnail {
  max-width: 100%;
  height: auto;
}

#photo-input {
  display: none;
}

.mt-2 {
  margin-top: 2rem;
}

.me-2 {
  margin-right: 2rem;
}

.d-inline {
  display: inline;
}

/* Prevent body from scrolling when content doesn't exceed viewport */
body {
  min-height: 110vh;
  padding-top: 3rem; /* Add padding to prevent content from being hidden behind the fixed header */
  padding-bottom: 1.5rem; /* Add padding to prevent content from being hidden behind the fixed bottom header */
}

.top-header {
  height: 3rem;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.bottom-header {
  height: 1.5rem;
  background-color: #1779ba; /* Same color as the navbar */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}