html, body {
  scroll-behavior: smooth;
  /*background-color: rgb(197, 193, 181) !important;*/
  background-color: rgb(253, 244, 219) !important;
}

/* Ensure the page uses full height */
.slides-body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background-color: rgb(197, 193, 181);
}

a {
    color: rgb(31, 33, 36);
}

a:hover {
    color: rgba(31, 33, 36, 0.5) !important;
}

pre {
    background-color: rgba(200, 200, 200, 1.0);
}

.a-no-hover:hover {
    background-color: rgba(0,0,0,0) !important;
}

.black {
    color: rgba(31, 33, 36, 0.5) !important;
}

/* The container holds all the components */
.dashi-container {
  scroll-snap-type: y mandatory; /* Enables vertical snapping */
  overflow-y: scroll; /* Enables scrolling */
  height: 100vh; /* Full viewport height for each component */
  scrollbar-width: none; /* Hides the scrollbar in Firefox */
  -ms-overflow-style: none; /* Hides the scrollbar in Internet Explorer 10+ */
}

.dashi-container::-webkit-scrollbar {
  display: none; /* Hides the scrollbar in Chrome, Edge, and Safari */
}

/* Each component occupies a full viewport */
.dashi-component {
  scroll-snap-align: start; /* Aligns the top of the section to the viewport */
  height: 100vh; /* Full viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

.dashi-scroll-indicator {
  opacity: 0; /* Initially hidden */
  animation: fadeIn 1s ease-in-out 1s, bounce 1.5s infinite 2s; /* Fade in after 1 second, bounce after 2 seconds */
  animation-fill-mode: forwards; /* Ensure the animations persist */
  cursor: pointer;
  z-index: 1000; /* Ensure it's above other content */
}

/* Fade-in animation */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translate(0, 0); /* Starting position */
  }
  50% {
    transform: translate(0, 10px); /* Move down 10px */
  }
}

.navbar-background {
    background-color: rgb(85, 70, 64) !important;
}

.img-h50 {
    height: 50px !important;
    width: auto !important;
}

.img-h70 {
    height: 70px !important;
    width: auto !important;
}

.img-h80 {
    height: 80px !important;
    width: auto !important;
}

.card-img-top {
  height: 256px;
  object-fit: cover;
  object-position: center;
}

.button {
    background-color: #554640 !important;
    color: white !important;
}

.button:hover {
    background-color: #3a302c !important;
    color: white !important;
}