/*Globally prevent drag of elements with mouse*/
img {
  user-drag: none; /* Disable drag */
  -webkit-user-drag: none; /* For WebKit browsers */
}

a {
  user-drag: none;          /* Disable drag */
  -webkit-user-drag: none;  /* Disable drag for WebKit browsers */
  pointer-events: auto;     /* Ensure links are still clickable */
}

/* Globally reset button color properties to override bootstrap colors */
button, input[type="button"], input[type="submit"], .btn {
  color: inherit !important;             /* Reset text color */
  background-color: inherit !important; /* Reset background color */
  border-color: inherit !important;     /* Reset border color */
  box-shadow: none !important;          /* Reset any box-shadow styles */
}

/* Globally apply grey background to all buttons on hover */
button:hover, 
input[type="button"]:hover, 
input[type="submit"]:hover, 
.btn:hover {
  background-color: #6C757D !important; /* Grey background */
  color: #FFFFFF !important;           /* White text */
  border-color: #6C757D !important;    /* Grey border */
}

/* Add smooth transitions for hover effects */
button, 
input[type="button"], 
input[type="submit"], 
.btn {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Text and spacing settings for sats info of piece */
.text-container {
  padding-top: 60px;
}
.text-container p {
  margin-bottom: 5px;
  line-height: 2;
}
.text-container-bugattis {
  padding-top: 20px;
}

.text-container p {
  margin-bottom: 5px;
  line-height: 2;
}
.text-container-bugattis p {
  margin-bottom: 5px;
  line-height: 2;
}

/* Scale small sats rarity image*/
.rarity-image {
  margin-left: 5px; /* Space between the text and the image */
  margin-bottom: 6px;
  height: 2em; /* Matches the height of the text dynamically */
  vertical-align: middle;
}

/*Blog post width*/

/*For satributes and mining pages blog post width*/


.custom-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 15px;
}

.custom-container2 {
  
  margin: 0 auto;
  padding: 0 15px;
}

/* Change the background color */
body {
    background-color: #000000; /* Example: light gray background */
  }
  
  /* Change the font color */
  body {
    color: #BFC9CA; 
  }
  
  /* Additional custom styles to override Bootstrap defaults */
  h1, h2, h3, h4, h5, h6 {
    color: #BFC9CA; 
  }
  
  a {
    color: #BFC9CA; 
  }
  
  /* Ensure custom styles override Bootstrap by using !important */
  body, h1, h2, h3, h4, h5, h6, p, a {
    color: #FBFCFC !important;
  }



/* Change the color of the navbar brand (logo/text) */

.navbar {
  background-color: #000000 !important; /* Replace #yourcolorcode with your desired color */
}

.navbar .navbar-brand {
    color: #ffffff !important; 
  }
  
  /* Change the color of the navbar links */
  .navbar .nav-link {
    color: #ffffff !important; 
  }
  
  /* Change the color of the active navbar link */
  .navbar .nav-link.active {
    color: #909090 !important; /* Example: gold color */
  }
  
  /* Change the color of the navbar links on hover */
  .navbar .nav-link:hover {
    color: #909090 !important; /* Example: gold color */
  }

  /* Change the color of the navbar toggler (hamburger menu) icon */
.navbar-toggler {
  border-color: #ffffff !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* Hover activation for large screens */
@media (min-width: 992px) { /* Adjust this breakpoint as needed */
  .navbar .dropdown:hover .dropdown-menu {
    display: block; /* Show the dropdown menu on hover */
  }

  /* Making the dropdown-toggle unclickable */
  .navbar .dropdown-toggle {
    pointer-events: none; /* Disable clicking */
    cursor: default; /* Change cursor to indicate it’s not clickable */
  }

  /* Optional: hide the dropdown arrow */
  .navbar .dropdown-toggle::after {
    display: none;
  }

  /* Optional: make the dropdown open without a delay */
  .navbar .dropdown-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}

/* Background color for the dropdown menu (submenu) */
.dropdown-menu {
  background-color: #000000; /* Black background */
}

/* Font color for the dropdown menu items */
.dropdown-item {
  color: #ffffff; /* White text color */
}

/* Hover and focus state for the dropdown menu items */
.dropdown-item:hover, 
.dropdown-item:focus {
  background-color: #6C757D; /* Gray background on hover - previous color: #909090 */
  color: #000000; /* Black text color on hover */
}

/* custom.css */

/* Set background color for the footer */
footer {
  background-color: black; /* Dark background color */
  color: white; /* White text color */
  padding: 20px 0; /* Add some padding */
}

/* Set text color for all elements within the footer */
footer p, footer span, footer a {
  color: white;
}

/* Customize footer links */
footer a {
  color: #ddd; /* Light grey color for links */
  text-decoration: none; /* Remove underline from links */
}

footer a:hover {
  color: #fff; /* Change to white on hover */
  text-decoration: underline; /* Underline on hover */
}

/* Additional styling for the footer text */
footer .footer-text {
  font-size: 14px; /* Adjust font size */
  line-height: 1.5; /* Adjust line height */
}

/* Additional styling for footer elements */
footer .footer-element {
  margin-bottom: 10px; /* Add space between elements */
}

/* Example class for specific footer elements */
footer .copyright {
  font-weight: bold; /* Make text bold */
}

/* Responsive styling for the footer */
@media (max-width: 768px) {
  footer {
      text-align: center; /* Center text on small screens */
  }
}

  /* custom.css */

/* Change primary button background and text color */
.btn-primary {
  background-color: #000000; /* Your desired background color */
  border-color: #6C757D;    /* Your desired border color */
  color: white;             /* Your desired text color */
}

.btn-primary:hover {
  background-color: #6C757D; /* Your desired hover background color */
  border-color: #6C757D;    /* Your desired hover border color */
  color: #6C757D;             /* Your desired hover text color */
}

/* Change outline secondary button colors */
.btn-outline-secondary {
  color: #6c757d;           /* Your desired text color */
  border-color: #6c757d;    /* Your desired border color */
}

.btn-outline-secondary:hover {
  background-color: #6c757d; /* Your desired hover background color */
  color: #6C757D;             /* Your desired hover text color */
}

/* custom.css */

/* Set the text color of the card body to white */
.card-body {
  color: white;
}

/* Optional: Customize the card background to see the white text better */
.card {
  background-color: #ffffff; /* Dark background to contrast white text */
}

/* Customize the card title color */
.card-title {
  color: white;
}

/* Customize the card text color */
.card-text {
  color: black;
}

/* Default button style for card buttons */
.card .btn {
  background-color: #000000 !important; /* Black background */
  color: #FFFFFF !important;           /* White text */
  border-color: #000000 !important;    /* Black border */
  box-shadow: none !important;         /* Remove box-shadow */
}

/* Hover style for card buttons */
.card .btn:hover {
  background-color: #6C757D !important; /* Grey background */
  color: #FFFFFF !important;           /* White text */
  border-color: #6C757D !important;    /* Grey border */
}

/* Default theme background color */
body {
  background-color: #000000; /* Replace #defaultcolorcode with your theme's default background color */
}

/* Custom background color for the specific page */
body.custom-background {
  background-color: #ffffff; /* Replace #yourcustomcolorcode with your desired background color */
}

/* Footer image size */
/* Custom CSS for media queries */
@media (max-width: 768px) {
  .footer-image img {
    max-height: 40px; /* Adjust the max-height for smaller screens */
  }
}

@media (max-width: 576px) {
  .footer-image img {
    max-height: 30px; /* Adjust the max-height for even smaller screens */
  }
}