/* Optional: Additional CSS for customization */
.theme-toggle {
    position: fixed;
    bottom: 80.5%;
    right: 0;
    transform: translateY(80%);
    opacity: 0.9; /* 80% transparent */
    background-color: #001930;
    border-radius: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
}


    /* Style for the button when the theme is LIGHT */
[data-bs-theme="dark"] #theme-toggle {
    background-color: #fbf4dc; /* A soft yellow for the sun */
    border-color: #f8d479;
    color: #5d4915;
}

/* Style for the button when the theme is DARK */
[data-bs-theme="light"] #theme-toggle {
    background-color: #4b3f71; /* A deep blue/purple for the moon */
    border-color: #3a315a;
    color: #eae6ff;
}

/* Optional: Add a smooth transition effect */
#theme-toggle {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}