/* Add your existing styles here */

body.dark-mode {
    background-color: #333; /* Dark background color */
    color: #fff; /* Light text color */
  }

  
  body.dark-mode .biography-container {
    background-color: #222; /* Dark background color for biography-container in dark mode */
    color: #fff; /* Light text color for biography-container in dark mode */
  }

  body.dark-mode .info-container {
    background-color: #222; /* Dark background color for biography-container in dark mode */
    color: #fff; /* Light text color for biography-container in dark mode */
  }
  
/* darkmode.css */
body.dark-mode .text-muted {
  color: #888 !important; /* Adjust the color to your preference */
}

  /* Additional styles for dark mode, excluding the navbar */
  body.dark-mode .card {
    background-color: #111; /* Dark background color for cards and navbar in dark mode */
    color: #fff; /* Light text color for cards and navbar in dark mode */
  }
  body.dark-mode .hori-selector{
    display:inline-block;
    position:absolute;
    height: 100%;
    top: 0px;
    left: 0px;
    transition-duration:0.6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    background-color: #333;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin-top: 10px;
  }

  body.dark-mode .hori-selector .right{
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #333;
    bottom: 10px;
    transition-duration:0.6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  body.dark-mode .hori-selector .left{
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #333;
    bottom: 10px;
    transition-duration:0.6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  body.dark-mode #shoppingCart {
    display: none;
    position: fixed;
    top: 80px; /* Adjust the top position as needed */
    right: 20px; /* Adjust the right position as needed */
    background-color: #222;
    padding: 10px;
    border: 1px solid #323;
    border-radius: 5px;
  }
  
  body.dark-mode #navbarSupportedContent>ul>li.active>a{
    color: #ffffff;
    background-color: transparent;
    transition: all 0.7s;
  }
  /* Add other styles for dark mode as needed */
  body {
    transition: background-color 0.3s ease;
  }
  .form-check {
    margin-right: 50px; /* Adjust the margin as needed */
  }
  .position-relative {
    position: relative;
  }
  
  .position-absolute {
    position: absolute;
  }
  .sun-icon {
    left: -20px; /* Adjust the position as needed */
    color: #ffd900;
    transition-duration:0.6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  .moon-icon {
    position: absolute;
    right: -15px; /* Adjust the position as needed */
    top: 50%;
    transform: translateY(-50%);
    color: purple;
    transition-duration:0.6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  body.dark-mode .sun-icon {
    left: -20px; /* Adjust the position as needed */
    color: rgb(255, 255, 255);
    transition-duration:0.6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  body.dark-mode .moon-icon {
    position: absolute;
    right: -15px; /* Adjust the position as needed */
    top: 50%;
    transform: translateY(-50%);
    color: rgb(255, 255, 255);
    transition-duration:0.6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  :root {
    --sun-color-light: yellow;
    --moon-color-light: purple;
    --sun-color-dark: orange;
    --moon-color-dark: blue;
  }
  
  
 /* Modify the existing :root styles for dark mode */

body:has(.switch__input:checked) {
    background-color: var(--fg);
    color: var(--bg);
  }
  
  body:has(.switch__input:checked) .sun-icon {
    fill: var(--sun-color-dark);
  }
  
  body:has(.switch__input:checked) .moon-icon {
    fill: var(--moon-color-dark);
  }
  
  /* Add the styles for light mode */
  
  body:has(.switch__input:not(:checked)) .sun-icon {
    fill: var(--sun-color-light);
  }
  
  body:has(.switch__input:not(:checked)) .moon-icon {
    fill: var(--moon-color-light);
  }