body {
  max-width: 420px;
  min-height: 100%;
  margin: auto;
  background-color: #000;
  font-family: 'Roboto Mono', monospace;
  /* font-family: 'Libre Baskerville', serif; */
  background-color: #000000;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading,
.font-heading {
  font-family: 'Libre Baskerville', serif;
}

.bottom-navbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  z-index: 1000;
}

.text-expat-gray {
  color: #191919 !important;
}
.text-expat-green {
  color: #7AA78D !important;
}
.text-expat-red {
  color: #A27272 !important;
}

.bg-expat-gray {
  background: #191919 !important;
}
.bg-expat-green {
  background-color: #7AA78D !important;
}
.bg-expat-red {
  background-color: #A27272 !important;
}
.btn-expat-green {
  background-color: #7AA78D !important;
  color: white !important;
  border: none;
}
.btn-expat-gray {
  background-color: #191919 !important;
  color: white !important;
  border: none;
}
.btn-expat-red {
  background-color: #A27272 !important;
  color: white !important;
  border: none;
}
.btn-expat-green:hover {
  background-color: #679778 !important;
}
.btn-expat-outline {
  color: #f8f9fa;
  border: 1.5px solid #7AA78D;
  background-color: transparent;
  transition: all 0.3s ease;
}
.btn-expat-outline:hover {
  background-color: #7AA78D;
  color: #fff;
  border-color: #7AA78D;
}


.fs-8 { font-size: 8px !important; }
.fs-10 { font-size: 10px !important; }
.fs-12 { font-size: 12px !important; }
.fs-14 { font-size: 14px !important; }
.fs-16 { font-size: 16px !important; }
.fs-20 { font-size: 20px !important; }

.dot {
  background-color: #444;
  transition: background-color 0.3s;
}
.dot.active {
  background-color: #7AA78D;
}
.scroll-container::-webkit-scrollbar {
  display: none;
}

.password-input {
  height: 45px;
  font-size: 0.9rem;
  line-height: 1.5;
}