/* Custom styles */
body {
    background-color: #ffffff;
    color: #333333; /* Default text color for better contrast */
}

.container {
    max-width: 800px;
}

h1 {
    font-size: 3rem;
    font-weight: bold;
    color: #ff6600; /* Orange color for NOTDuolingo */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow effect */
}

.mahellc {
    color: #333333; /* Dark gray for better contrast */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Subtle shadow effect */
}

.card {
    min-height: 200px;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #fff5e6; /* Light shade of orange for flashcard background */
}

#flashcard-container {
    cursor: pointer;
}

#flashcard-front, #flashcard-back {
    color: #333333; /* Dark text color for contrast on light orange background */
}

.list-group-item {
    cursor: move;
    background-color: #f8f9fa; /* Light background for better contrast */
    color: #333333; /* Dark text for better readability */
}

.nav-tabs .nav-link {
    color: #ff6600;
}

.nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: #ff6600;
    border-color: #ff6600;
}

.btn-primary {
    background-color: #ff6600;
    border-color: #ff6600;
}

.btn-primary:hover {
    background-color: #e65c00;
    border-color: #e65c00;
}

.btn-secondary {
    background-color: #ffffff;
    border-color: #ff6600;
    color: #ff6600;
}

.btn-secondary:hover {
    background-color: #ff6600;
    border-color: #ff6600;
    color: #ffffff;
}

/* Ensure text contrast */
.text-white, .text-light {
    color: #333333 !important; /* Override any white or light text with dark gray */
}

/* Add more specific overrides if needed */
.bg-dark .text-white, .bg-dark .text-light {
    color: #ffffff !important; /* Keep white text on dark backgrounds */
}

/* Additional contrast improvements */
.nav-tabs .nav-link {
    color: #333333;
}

.nav-tabs .nav-link:hover {
    color: #ff6600;
}

/* New class for highlighting 'on' in white */
.highlight-white {
    color: white !important;
    background-color: #ff6600;
    padding: 0 2px;
    font-weight: bold;
}