html, body {
  position: relative;
  height: 100%;
}

body {
  background: #444;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #fff;
  margin: 0;
  padding: 0;
}

.fixed-top {
  height: 60px;
}

.fixed-bottom {
  background-color: #3f3f3f;
  height: 40px;
}

.swiper {
  width: 100%;
  height: calc(100vh - 100px); /*Adjust (60 + 40)px to your navbar's height */
}
@media (min-width: 768px) {
  .swiper {
    height: calc(100vh - 36px); /*Adjust navbar's height for desktop browsers */
  }
}

.swiper-slide {
  font-size: 18px;
  background: #444;
  display: flex;
  justify-content: center;
  text-align: center;
  
  /* For scrollable content */
  height: auto; /* Example: full viewport height */
  overflow: hidden; /* Ensures Swiper controls the main slide area */
  padding-top: 60px; /* Adjust the NavBar height value as needed */
  box-sizing: border-box; /* Ensures padding is included in the slide's total height */
}
/*
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}*/

.scrollable-content {
  /* Allow vertical scrolling within this container */
  width: 100%;
  height: 100%; /* Take full height of the swiper-slide */
  overflow-y: auto; /* Adds a scrollbar when content overflows */
  padding: 10px;  /* Optional: for better content layout */
  padding-bottom: 24px; /* 80px */
  box-sizing: border-box;
}

.navbar-header {
  text-align: center;
  line-height: 4px;
}

.custom-header {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  line-height: 6px;
}

.custom-navbar-container {
  /* This ensures enough horizontal space for absolute positioning */
  position: relative; 
}

.ctitle {
  color: aliceblue;
  font-size: large;
}

.stitle {
  color: aliceblue;
  font-size: small;
}

.footer-pnum {
  color: #aaa;
  font-size: medium;
}

.img_rand {
  -webkit-filter: brightness(0) invert(0.7);
  filter: brightness(0) invert(0.7);
  height: 32px;
}

.img_menu {
  -webkit-filter: brightness(0) invert(0.7);
  filter: brightness(0) invert(0.7);
  height: 28px;
}

.offcanvas-start {
  --bs-offcanvas-width: 300px;
}

.offcanvas-title {
  color: #ddd;
}

.offcanvas-body {
  background-color: #444;
}

.list-group-item {
  background-color: #444;
}

.menubtn {
  text-decoration: none; /* Removes the underline on hover */
  font-size: large;
}

.bcont {
  padding-top: 80px;
  text-align: center;
  color: #ddd;
}

.photo {
  height: 350px;
  /*border: 4px solid #333;*/
  box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.5);
}

.handimg {
  -webkit-filter: brightness(0) invert(0.8);
  filter: brightness(0) invert(0.8);
  height: 60px;
}

/*change font-size on mobile - portrait*/
/*@media only screen and (max-width: 575.98px) and (orientation: portrait) {
  #fileContent {
    font-size: medium;
  }
}*/

.poem {
  max-width: 500px;
  width: 100%;
  font-family: monospace, "Courier New", Consolas, Monaco;
  font-size: large;
  display: inline-block;
  justify-content: center;
  white-space: pre-wrap;
}

pre {
  text-align: left;
  font-size: large;
}

.c-align {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
}

.r-align {
  width: 100%;
  text-align: right;
  padding-right: 40px;
  overflow: hidden; 
}

.l-align {
  text-align: left;
}

.j-text {
  text-align: justify;
  padding-left: 12px;
  padding-right: 12px;
  text-indent: 30px;
}