@font-face {
  font-family: 'WDXL Lubrifont JP N';
  src: url('../fonts/wdxl-lubrifont-jp-n-v2-latin-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Improves loading performance */
}

/* Apply as default */
body {
  font-family: 'WDXL Lubrifont JP N', sans-serif;
  font-size: 24px;
    background: #291814;
  }
  
  html {
    scroll-padding-top: 60px;
  }
  .text-IDX25{
    color: #065ab5;
  }
  .text-IDX1{
    color: #291814;
  }  
  .text-IDX14{
    color: #fff1e8;
  }
 
  .minWidth {
    min-width: 832px;
  }
  .maxWidth {
    max-width: 832px;
  }
  
  h1 {
  margin-top: 0;
  }
  .m-custom{
  margin-left:0px;
  margin-right:0px;
  }
  .m-sides1{
    margin-left:1px;
    margin-right:1px;
    }

  .m-0wb2{
    margin-left:0px;
    margin-right:0px;
    margin-top:0px;
    margin-bottom:5px;
    }

  .m0v2{
    margin-left:0px;
    margin-right:0px;
    margin-top:0px;
    margin-bottom:0px;
    }

  .m-custom1{
    margin-left:2px;
    margin-right:2px;
    margin-top:0px;
    margin-bottom:2px;
    }
  
  .p-custom{
    padding-left:0px;
    padding-right:0px;
    padding-top:0px;
    padding-bottom:0px;
  }

  .p-custom1{
    padding-left:3px;
    padding-right:3px;
    padding-top:3px;
    padding-bottom:3px;
  }
  
  .picoColorIDX1 {
    background-color: #291814;
  }
  .picoColorIDX14 {
    background-color: #fff1e8;
  }
  .picoColorIDX9 {
    background-color: #742f29;
  }
  .picoColorIDX15 {
    background-color: #f3ef7d;
  }
  .picoColorIDX18 {
    background-color: #ffa300;
  }
  .picoColorIDX24 {
    background-color: #29adff;
  }
  .picoColorIDX25 {
    background-color: #065ab5;
  }
  .picoColorIDX32 {
    background-color: rgba(255,253,191,1.0);
  }
  
  .picoColorIDX33 {
    background-color: rgba(232,241,255,1.0);
  }
  
  .bg-overlay {
      background:  url("./img/BotBanner800x48.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      color: #fff;
      height: 48px;
      width: 832px;
      padding: 0;
  }
  
  .bg-overlay2 {
      background:  url("./img/lightblue.png");
      background-repeat: repeat;
      background-size: wrap;
      background-position: center center;
      color: #fff;
      padding: 0;
  }
  
  .img-icon{
    height: 28px;
    width: 28px;
  }

  .text-shadow{
    text-shadow: 2px 2px 4px #000000;
  }

  .drop-shadow-custom {
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.75));
  }

  .navbar-custom {
    --bs-navbar-color: #29adff; /* Default text color */
    --bs-navbar-hover-color: #ffa300; /* Text color on hover */
    --bs-navbar-active-color: #ffa300; /* Text color when active */
  }

  .dropdown-menu .dropdown-item {
    color: #ffa300; /* Red text color */
  }

  .dropdown-menu .dropdown-item:hover {
    color: #ffa300; /* Green text color on hover */
    /* You might also want to change the background on hover */
    background-color: #291814;
  }

  .bg-overlay {
    background:  url("./img/BotBanner800x48.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 48px;
    width: 800px;
    padding: 0;
}

.image-hover-container {
  position: relative;
  width: fit-content;
  overflow: hidden; /* Keeps the overlay from spilling out */
}

.hover-overlay {
  position: absolute;
  bottom: 0;         /* Sticks it to the bottom */
  left: 0;
  width: 100%;
  height: 50%;     /* Only covers half */
  background-color: #291814; 
  color: rgba(232,241,255,1.0);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; 
}

.image-hover-container:hover .hover-overlay {
  opacity: .9;
}

.avatar {
  vertical-align: middle;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}