/* darkmode */
/* Default light mode styles */

/* Dark mode styles */
body, .checkbox, .dark-theme {
  background-image: url('../images/nightto.jpeg');
  background-size: cover; /* Cover the entire area */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
}
 .col-12, .checkbox,  .dark-theme {
  --background-color: #333333; /* Dark mode background */
  --text-color: #ffffff; /* Dark mode text */
}
/* Dark mode styles */
.dark-theme, .checkbox, .col-12 {
  --background-color: #333333 !important;
  --text-color: #ffffff !important;
  --container-bg: #444444 !important;
}

/* Apply the background and text color */
body, .checkbox,  .dark-theme {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
  transition: background-color 0.3s, color 0.3s;
}

/* Style the containers */
.card, .checkbox .dark-theme {
  background-color: var(--container-bg) !important;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.dark-theme .card {
  background-color: #1e2c20!important;}




/* Style for the toggle switch */
label {
  width: 40px;
  height: 20px;
  position: relative;
  display: block;
  background-color: #f8f8f8;
  border-radius: 200px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4), inset 0px .5px 15px rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: 0.3s;
  
}

label:after {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: linear-gradient(180deg, #ffcc89, #d8860b);
  border-radius: 180px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
  transition: 0.3s;
}

input {
  width: 0;
  height: 0;
  visibility: hidden;
}

input:checked + label {
  background: #333333;
}

input:checked + label:after {
  left: 38px;
  transform: translateX(-100%);
  background: linear-gradient(180deg, #777, #303030);
}

label:active:after {
  width: 20px;
  
}
/* end ---------------------- */
.rarity {
  display: none; /* Hides the rarity element */
}

.value {
  display: none; /* Hides the value element */
}

.clock-container {
  text-align: center;
}

.clock {
  font-size: 24px; /* Smaller font size */
  padding: 10px;
  border: 2px solid #18883f;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  background-image: none;
  
}

/* end of tooki */


body {

  /* ============================================================= */
  /*
  /* Main Styles
  /*
  /* ============================================================= */
  /* 
  /* This only styles the elements shown on the page.
  /* 
  /* Some CSS knowledge is going to be needed to style these
  /* elements further. If you're just looking for a swatch and
  /* font swap, then you'll only need to edit the variables below.
  /*
  /* ============================================================= */
  /* Primary Color
  ================================================================ */
  --cd-primary-color:                    #18883f;
  --cd-primary-text-color:               #fff;

  /* ============================================================= */
  /* Secondary Color
  ================================================================ */
  --cd-secondary-color:                  #08612a;
  --cd-secondary-text-color:             #fff;

  /* ============================================================= */
  /* Backgrounds
  ================================================================ */
  --cd-body-background-color:            #f8f8f8;
  --cd-content-background-color:         #ffffff;
  --cd-faded-background-color:           #f8f8f8;

  /* Background Extras */
  --cd-body-background-image:             url();

  /* ============================================================= */
  /* Text
  ================================================================ */
  --cd-body-text-color:                  #303030;
  --cd-faded-text-color:                 #575757;

  /* ============================================================= */
  /* Borders
  ================================================================ */
  --cd-border-color:                     rgba(0, 0, 0, 0.125);
  --cd-border-width:                     1px;
  --cd-border-style:                     solid;
  --cd-border-radius:                    1rem;

  /* ============================================================= */
  /* Navbar
  ================================================================ */
  --cd-navbar-background-color:          #324a35;
  --cd-navbar-brand-color:               var(--cd-primary-color);
  --cd-navbar-brand-color-hover:         var(--cd-secondary-color);
  --cd-navbar-text-color:                var(--cd-content-background-color);
  --cd-navbar-link-color:                var(--cd-navbar-text-color);
  --cd-navbar-link-color-hover:          var(--cd-primary-color);
  --cd-navbar-font-family:               var(--cd-header-font-family);
  
  /* ============================================================= */
  /* Main Fonts
  ================================================================ */
  --cd-body-font-family:                 'Montserrat', sans-serif;
  --cd-header-font-family:               'Comfortaa', sans-serif;


  /* ============================================================= */
  /*
  /* Optional Styles
  /* These are just for extra easy styling
  /*
  /* ============================================================= */
  /* Navbar Dropdown 
  ================================================================ */

  /* Background */
  --cd-navbar-dropdown-background-color: var(--cd-navbar-background-color);
  --cd-navbar-dropdown-background-hover: var(--cd-primary-color);

  /* Link/Text */
  --cd-navbar-dropdown-link-color:       var(--cd-navbar-link-color);
  --cd-navbar-dropdown-link-color-hover: var(--cd-primary-text-color);

  /* Divider */
  --cd-navbar-dropdown-divider:          rgba(255,255,255,.12);
  --cd-navbar-dropdown-border-radius:    0 0 var(--cd-border-radius) var(--cd-border-radius);


  /* ============================================================= */
  /* Footer
  ================================================================ */
  
  /* Background */
  --cd-footer-background-color:          var(--cd-navbar-background-color);

  /* Link/Text */
  --cd-footer-text-color:                var(--cd-navbar-text-color);
  --cd-footer-link-color:                var(--cd-navbar-link-color);
  --cd-footer-link-color-hover:          var(--cd-navbar-link-color-hover);


  /* ============================================================= */
  /* Link
  ================================================================ */

  --cd-link-text-color:                  #28a72e;
  --cd-link-text-color-hover:            var(--cd-secondary-color);


  /* ============================================================= */
  /* HR
  ================================================================ */

  --cd-hr-border-width:                  var(--cd-border-width);
  --cd-hr-border-color:                  var(--cd-border-color);
  --cd-hr-border-style:                  var(--cd-border-style);


  /* ============================================================= */
  /* Pagination
  ================================================================ */

  /* Background */
  --cd-pagination-background-color:      transparent;
  --cd-pagination-background-hover:      transparent;

  /* Text */
  --cd-pagination-text-color:            var(--cd-faded-text-color);
  --cd-pagination-text-color-hover:      var(--cd-primary-color);

  /* Border */
  --cd-pagination-border-radius:         var(--cd-border-radius);
  --cd-pagination-border-width:          0;
  --cd-pagination-border-style:          var(--cd-border-style);
  --cd-pagination-border-color:          var(--cd-border-color);
  --cd-pagination-border-color-hover:    var(--cd-primary-color);


  /* ============================================================= */
  /* Cards
  ================================================================ */
  
  /* Background */
  --cd-card-background-color:            var(--cd-content-background-color);
  --cd-card-header-background-color:     var(--cd-card-background-color);

  /* Text */
  --cd-card-header-font-family:          var(--cd-header-font-family);

  /* Border */
  --cd-card-border-width:                var(--cd-border-width);
  --cd-card-border-style:                var(--cd-border-style);
  --cd-card-border-color:                var(--cd-border-color);
  --cd-card-border-radius:               var(--cd-border-radius);


  /* ============================================================= */
  /* Button
  ================================================================ */
  
  /* Background */
  --cd-button-background-color:          var(--cd-primary-color);
  --cd-button-background-color-hover:    var(--cd-secondary-color);

  /* Text */
  --cd-button-text-color:                var(--cd-primary-text-color);
  --cd-button-text-color-hover:          var(--cd-secondary-text-color);

  /* Border */
  --cd-button-border-width:              var(--cd-border-width);
  --cd-button-border-style:              var(--cd-border-style);
  --cd-button-border-color:              var(--cd-button-background-color);
  --cd-button-border-color-hover:        var(--cd-button-background-color-hover);
  --cd-button-border-radius:             var(--cd-border-radius);


  /* ============================================================= */
  /* Input
  ================================================================ */

  /* Background */
  --cd-input-background-color:           var(--cd-faded-background-color);

  /* Text */
  --cd-input-text-color:                 var(--cd-faded-text-color);

  /* Border */
  --cd-input-border-width:               var(--cd-border-width);
  --cd-input-border-style:               var(--cd-border-style);
  --cd-input-border-color:               var(--cd-border-color);
  --cd-input-border-color-hover:         var(--cd-primary-color);
  --cd-input-border-radius:              var(--cd-border-radius);

}


/* ============================================================= */
/* General Page Styles
/* ============================================================= */

body {

  /* Global Text */
  color: var(--cd-body-text-color);
  font-family: var(--cd-body-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Global Background */
  background-color: var(--cd-body-background-color);
  background-image: var(--cd-body-background-image);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;

}
body {
  background-image: url('../images/testttto.jpeg');
  background-size: cover; /* Cover the entire area */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
}


/* ============================================================= */
/* Plain Links
/* ============================================================= */

a,
a:visited {
  color: var(--cd-link-text-color);
  transition: color .2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  color: var(--cd-link-text-color-hover);
  text-decoration: none;
}

/* ============================================================= */
/* Navbar
/* ============================================================= */
.navbar {
  background-color: var(--cd-navbar-background-color) !important;
  font-family: var(--cd-navbar-font-family) !important;
  z-index: 2000;
}

.navbar .navbar-brand {
  color: var(--cd-navbar-brand-color) !important;
  font-size: 2rem;
}

.navbar .navbar-brand:hover, 
.navbar .navbar-brand:focus {
  color: var(--cd-navbar-brand-color-hover) !important;
}

.navbar .navbar-nav .nav-link {
  color: var(--cd-navbar-link-color) !important;
}

.navbar .navbar-nav .nav-link:hover, 
.navbar .navbar-nav .nav-link:focus{
  color: var(--cd-navbar-link-color-hover) !important;
}

.navbar .navbar-toggler {
  color: var(--cd-navbar-link-color) !important;
  border: none !important;
}

.navbar .nav-link {
    display: flex;
    align-items: center;
}

.navbar .nav-link-icon {
    font-size: .5rem;
    margin-left: .25rem;
}


/* ============================================================= */
/* Dropdowns
/* This is for navbar dropdowns only
/* ============================================================= */

.navbar .dropdown-menu {
  color: var(--cd-navbar-dropdown-link-color) !important;
  background-color: var(--cd-navbar-dropdown-background-color) !important;
  border-radius: var(--cd-navbar-dropdown-border-radius) !important;
  border: none;
  margin-top: 0;
}

.dropdown:hover .dropdown-menu,
.dropdown-menu:hover{
  display: block !important
}

.navbar .dropdown-divider {
  border-top: 1px solid var(--cd-navbar-dropdown-divider) !important;
}

.navbar .dropdown-item,
.navbar .dropdown-item-text {
  color: var(--cd-navbar-dropdown-link-color) !important;
  transition: color .2s ease, background .2s ease;
}

.navbar .dropdown-item:hover, 
.dropdown-item:focus,
.dropdown-item:active {
  color: var(--cd-navbar-dropdown-link-color-hover)!important;
  background-color: var(--cd-navbar-dropdown-background-hover) !important;
}

.navbar .dropdown-header {
  color: var(--cd-navbar-dropdown-link-color-hover) !important;
}


/* ============================================================= */
/* Footer
/* ============================================================= */

.footer{
  background-color: var(--cd-footer-background-color) !important;
  color: var(--cd-footer-text-color) !important;
}

.footer a,
.footer a:visited {
  color: var(--cd-footer-link-color) !important;
}

.footer a:hover,
.footer a:focus,
.footer a:active {
  color: var(--cd-footer-link-color-hover) !important;
}


/* ============================================================= */
/* Pagination
/* ============================================================= */

.page-link {
  transition: color .2s ease, background .2s ease, border .2s ease;
  border-width: var(--cd-pagination-border-width) !important;
  border-style: var(--cd-pagination-border-style) !important;
}

.page-link,
.page-item.disabled .page-link {
  color: var(--cd-pagination-text-color) !important;
  background-color: var(--cd-pagination-background-color) !important;
  border-color: var(--cd-pagination-border-color) !important;
}

.page-item.active .page-link,
.page-link:hover,
.page-link:focus,
.page-link:active {
  color: var(--cd-pagination-text-color-hover) !important;
  background-color: var(--cd-pagination-background-hover) !important;
  border-color: var(--cd-pagination-border-color-hover) !important;
}

/* Keeps users from accidentally highlighting */
.page-link{
  cursor: pointer;
  user-select: none;
}

/* Fixes my jank nav/pagination hybrid */
.nav .pagination .page-item:first-child .page-link {
  border-radius: 0 !important;
  border-left: 0 !important;
}

.nav .pagination .page-item:last-child .page-link {
  border-radius: 0 !important
}

.nav .page-item:first-child .page-link {
  border-radius: var(--cd-pagination-border-radius) 0 0 var(--cd-pagination-border-radius) !important;
}

.nav .page-item:last-child .page-link {
  border-radius: 0 var(--cd-pagination-border-radius) var(--cd-pagination-border-radius) 0 !important
}


/* ============================================================= */
/* Card
/* ============================================================= */

.card {
  background-color: var(--cd-card-background-color) !important;
  border-width: var(--cd-card-border-width) !important;
  border-style: var(--cd-card-border-style) !important;
  border-color: var(--cd-card-border-color) !important;
  border-radius: var(--cd-border-radius) !important;
}

.card-header {
  background-color: var(--cd-card-header-background-color) !important;
  border-bottom-color: var(--cd-card-border-color) !important;
  border-bottom-width: var(--cd-card-border-width) !important;
  border-bottom-style: var(--cd-card-border-style) !important;
  font-family: var(--cd-card-header-font-family) !important;
  border-radius: calc(var(--cd-border-radius) - 1px) calc(var(--cd-border-radius) - 1px) 0 0 !important;
}


/* ============================================================= */
/* Buttons & Badges
/* ============================================================= */

.btn.btn-primary,
.badge.badge-primary {
  color: var(--cd-button-text-color) !important;
  background-color: var(--cd-button-background-color) !important;
  border-width: var(--cd-button-border-width) !important;
  border-style: var(--cd-button-border-style) !important;
  border-color: var(--cd-button-border-color) !important;
  border-radius: var(--cd-button-border-radius) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
a.badge.badge-primary:hover,
a.badge.badge-primary:focus,
a.badge.badge-primary:active  {
  color: var(--cd-button-text-color-hover) !important;
  border-color: var(--cd-button-border-color-hover) !important;
  background-color: var(--cd-button-background-color-hover) !important;
  box-shadow: none !important;
}


/* ============================================================= */
/* Input
/* ============================================================= */

.form-control {
  background-color: var(--cd-input-background-color) !important;
  color: var(--cd-input-text-color) !important;
  border-width: var(--cd-input-border-width) !important;
  border-style: var(--cd-input-border-style) !important;
  border-color: var(--cd-input-border-color) !important;
  border-radius: var(--cd-input-border-radius) !important;
}

.form-control:focus,
.form-control:active {
  background-color: var(--cd-input-background-color) !important;
  border-color: var(--cd-input-border-color-hover) !important;
}


/* ============================================================= */
/* Scrollbar
/* ============================================================= */

@media (min-width: 992px) {
  body::-webkit-scrollbar-track {
    background-color: var(--cd-faded-background-color);
    border-width: 0px !important;
  }

  body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  body::-webkit-scrollbar-thumb {
    background-color: var(--cd-primary-color);
  }

  body::-webkit-scrollbar-corner,
  body::-webkit-resizer {
    background-color: var(--cd-border-color);
  }
}


/* ============================================================= */
/* Misc
/* ============================================================= */

.text-primary {
  color: var(--cd-primary-color) !important;
}

.bg-faded {
  background-color: var(--cd-faded-background-color) !important;
}

.text-muted {
  color: var(--cd-faded-text-color) !important;
}

h1, h2, h3,
h4, h5, h6 {
  font-family: var(--cd-navbar-font-family) !important;
}

hr {
  border-top-color: var(--cd-hr-border-color) !important;
  border-top-width: var(--cd-hr-border-width) !important;
  border-top-style: var(--cd-hr-border-style) !important;
}

img {
  image-rendering: -webkit-optimize-contrast;
}

/* Fix any border radiuses that were messed from before */
.rounded {border-radius: var(--cd-border-radius) !important}
.rounded-circle {border-radius: 100%;}
.rounded-0 {border-radius: 0 !important;}

/* ============================================================= */
/* Chee's Tweaks
/* ============================================================= */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#main-container {
    min-height: calc(100vh - 105px);
    padding: 1rem;
    -ms-flex: 1 1 auto!important;
    flex: 1 1 auto!important;
}

@media (min-width: 768px) {
    #main-container {
        padding: 5rem 1.5rem;
    }
}

/* Fades container in on load so its not as jarring */
.softload {
  opacity: 0;
} .softload.active {
  opacity: 1;
  transition: opacity 2s ease;
}

/* Remove ugly box shadow */
button:focus,
.page-link:focus,
.form-control:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove margin from last paragraphs */
p:last-child {
    margin-bottom: 0 !important;
}

/* Small container for more compact view */
.container {
  max-width: 950px !important;
}

/* Prevents awkward load in stutter */
#charadex-gallery .list .card-body {
  min-height: calc(200px + 2.5rem);
} 

#charadex-gallery .list .card-body img {
  max-height: 200px;
}

.gallery-img {
    max-height: 150px;
}

/* Combines search and its companion filter */
#search-filter.form-control {
  border-radius: var(--cd-border-radius) 0 0 var(--cd-border-radius) !important;
  border-right: 0 !important;
} 

#search.filtered.form-control {
  margin-left: -.5rem;
  width: calc(100% + .5rem) !important;
  border-radius: 0 var(--cd-border-radius) var(--cd-border-radius) 0 !important;
}

/* Loading Icon */
#loading {
  width: 5rem; 
  height: 5rem;
  position: absolute;
  top: calc(50% - 2.5rem);
  left: calc(50% - 2.5rem);
  animation-duration: 2s;
  opacity: .5;
  border-color: var(--cd-body-text-color);
  border-right-color: transparent !important;
}


#log-table {
    max-height: 200px;
    overflow-y: auto;
}

/* ============================================================= */
/* Custom Classes
/* ============================================================= */

/* Makes sure your text formatting is preserved from the sheet */
/* Best for large areas like notes */
.text-pre {
    white-space: break-spaces;
}

.hero-title {
  position: relative; /* Required for positioning the pseudo-element */
  color: #d9d9d9;
  background-size: cover; /* Cover the entire area */
  background-position: center; /* Center the image */
  border-radius: var(--cd-border-radius);
  font-family: var(--cd-header-font-family);
  display: flex;
  padding: 1.5rem;
  min-height: 250px;
  font-weight: 500;
  font-size: 2rem;
  overflow: hidden; /* Ensure the pseudo-element doesn't overflow */
}

.hero-title::before {

  position: absolute; /* Position it absolutely */
  top: 0; /* Align to the top */
  left: 0; /* Align to the left */
  right: 0; /* Stretch to the right */
  bottom: 0; /* Stretch to the bottom */
  background-color: rgba(0, 0, 0, 0.507); /* Black with 50% opacity */
  content: url(../images/Captura.PNG); /* Required for pseudo-elements */
  z-index: 1; /* Ensure it is behind the text */
}

.hero-title > .m-auto {
  position: relative; /* Position text above the overlay */
  z-index: 2; /* Ensure text is above the overlay */
}


/* tooki edit */
.card-12 {
  width: 100%;
  height: 300px;
  margin-top: 10px;
  object-fit: contain; /* Preserve aspect ratio */
}

.about-species {
  display: flex;                /* Makes child elements align horizontally */
  align-items: center;         /* Centers items vertically in the flex container */
  gap: 20px;                  /* Adds space between the image and text */
}
.species-image {
  margin-right: 20px;          /* Add some space between the image and text */
}

.species-description {
  max-width: 400px;            /* Adjust the width as needed */
}

ul {
  list-style-type: none; /* Removes the dots */
  padding: 0; /* Removes padding */
  
}
.index-container {
  display: flex; /* Enable Flexbox */
  gap: 20px; /* Add space between the two columns */
}

/* Style each column */
.index-column {
  list-style-type: none; /* Remove bullet points */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  flex: 1; /* Each column takes equal width */
}

@media (min-width: 700px) {
    .hero-title {
        letter-spacing: 2px;
        font-size: 2rem;
    }
}
@media (max-width: 800px) {
  .card {
    width: 100%;
    height: auto; /* Adjust height to fit content */
    margin-top: 10px;
    object-fit: contain; /* Preserve aspect ratio */
  }

  .card img {
    width: 50%; /* Ensure images fit within the card */
    height: auto; /* Maintain aspect ratio */
  }

  .card .card-body {
    padding: 1rem; /* Adjust padding as needed */
  }

  .card .card-title {
    font-size: 1.25rem; /* Adjust font size as needed */
  }

  .card .card-text {
    font-size: 1rem; /* Adjust font size as needed */
  }
}

/* Define the class with the text */
.responsive-text::after {
  content: "Sorry! The phone verison is low key broken so I recommend you use the desktop version for the best experience :)"; /* Add the text */
  display: none; /* Hide by default */
  color: rgb(51, 148, 69); /* Style the text as needed */
  font-size: 1rem; /* Adjust font size as needed */
}

/* Use a media query to show the text on smaller screens */
@media (max-width: 700px) {
  .responsive-text::after {
    display: block; /* Show the text */
  }
}