* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif; /* Update as per the design requirement */
}

/* Flex container for the buttons to center align */
.row {
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
    flex-wrap: wrap; /* Allow wrapping */
}

/* Style for the inner-container which is now the button */
.inner-container {
    background-color: #f2f2f2; /* Light grey background or as per design */
    border-radius: 15px; /* Rounded corners for the buttons */
    margin: 5px; /* Space between the buttons */    
    text-align: center; /* Center the text inside the button */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for depth */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.inner-container a {
    display: block; /* Make the link fill the container */
    width: 100%; /* Full width of the container */
    height: 100%; /* Full height of the container */
    padding: 10px 20px; /* Padding for the link, adjust as needed */
    text-decoration: none;
    color: #010106; /* Hyperlink color */
    font-size: 16px; /* As per design requirement */
}


/* Hover effect for buttons */
.inner-container a:hover {
    transform: translateY(-2px); /* Slight raise effect on hover */
}

/* Light theme styles */
.light-mode {
    background-color: #fff; /* White background */
    color: #000; /* Black text */
    /* other styles for light mode */
}

/* Dark theme styles */

.dark-mode {
    background-color: #333; /* Dark mode background for the page */
    color: lightgray; /* Default text color for dark mode */
}

.dark-mode .inner-container {
    background-color: #555; /* Middle grey for button background */
}

.dark-mode .inner-container a {
    color: lightgray; /* Light grey text color for the buttons */
}

.dark-mode .inner-container a:hover {
    background-color: #666; /* Slightly lighter grey for hover effect */
    border-radius: 15px;
}

.dark-mode .dropdown-content {
    background-color: #555; /* Middle grey for the dropdown background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Adjust shadow for a darker theme */
}


.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f2f2f2; /* Matches the inner-container background */
    min-width: 160px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Similar to your button shadow */
    z-index: 1;
    left: 20%;
}

.dropdown-content a {
    color: #010106; /* Matches your hyperlink color */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #e2e2e2; /* Light grey, similar to your button hover */
}

.dropdown:hover .dropdown-content {
    display: block;
}

.search-container {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-color);
    padding: 10px;
    text-align: center;
  }
  
  .search-input {
    width: 80%;
    max-width: 600px;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
  }
  
  .search-input:focus {
    outline: none;
    border-color: #007bff;
  }
  
  /* For dark mode compatibility */
  .dark-mode .search-input {
    background: #333;
    color: #fff;
    border-color: #555;
  }
  
  .dark-mode .search-input:focus {
    border-color: #0056b3;
  }

/* Positioning the mode toggle button at the bottom left */
#modeToggle {
    position: fixed; /* Fixed position relative to the viewport */
    left: 10px; /* Distance from the left */
    bottom: 10px; /* Distance from the bottom */
    padding: 10px 20px; /* Padding for the button for better click area and appearance */
    /* Additional styling for the button */
    background: #f2f2f2; /* Light grey background or any color you prefer */
    border: none; /* No border for a modern look */
    border-radius: 5px; /* Slightly rounded corners */
    cursor: pointer; /* Cursor changes to a pointer to indicate this is clickable */
    z-index: 1000; /* Ensure it's above other items, adjust number as necessary */
}

/* Optional: Add some hover effect for the button */
#modeToggle:hover {
    background-color: #e2e2e2; /* Slightly darker on hover for visual feedback */
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .inner-container {
        width: 100%; /* Full width for smaller screens */
        margin-bottom: 10px; /* Space between stacked buttons */
    }
}