p {
    font-size: 1.5rem;
}

.navbar {
    z-index: 20;
    background-color: #f3f3f3;
}
#btn-prev {
    z-index: 20;
}
#btn-next {
    z-index: 20;
}

#synth-config {
    display: none;
}

/* general purpose css */

.background {
    background-color: #dcefd1;
    font-family: 'Open Sans', sans-serif;
}

.accented_btn {
    background-color: #0074b8; /* Button background color */
    color: #f8f9fa; /* Button text color */
    border-color: #0074b8; /* Match border to background for consistency */
}

.btn-blue {
    background-color: #0074b8; /* Button background color */
    color: #f8f9fa; /* Button text color */
    border-color: #0074b8; /* Match border to background for consistency */
}

.accented_btn:hover {
    background-color: #005f99; /* Darker shade for hover */
    border-color: #005f99;
    color: #f8f9fa;
}

.bg-primary-quiz {
    background-color: #0074b8;
}

p.keep-practicing {
    color: #0074b8 !important;
    font-size: 1.5rem;
}

p.good-job {
    color: #0074b8 !important;
    font-size: 1.5rem;
}

.btn-primary {
    background-color: #0074b8;
}

.btn-outline-primary-quiz {
    border: 1px solid #0074b8;
}

.btn-outline-primary-quiz:hover {
    background-color: #0074b8;
    color: white;
}

.accented_btn:active {
    background-color: #004d80; /* Even darker shade for active/click */
    border-color: #004d80;
    color: #f8f9fa;
}

.non_accented_btn {
    background-color: #b6d7a8;
    border-color: #b6d7a8;
    color: #f8f9fa;
}

.non_accented_btn:hover {
    background-color: #a3c496; /* Slightly darker green for hover */
    border-color: #a3c496;
    color: #f8f9fa;
}

.non_accented_btn:active {
    background-color: #90b184; /* Even darker green for active */
    border-color: #90b184;
    color: #f8f9fa;
}

.active-topic {
    font-weight: 700; /* Bold */
    color: #000000 !important; /* Darker color, matching navbar-brand */
}

.my-checklist-item {
    background-color: transparent; /* matches any background */
    border: none;                  /* removes border */
    border-radius: 0;              /* remove any rounding if needed */
    color: black;                  /* Ensures text is black */
    font-size: 1.3rem;             /* Slightly larger text (adjust as needed) */
    gap: 1em;
}


.status-bubble {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    background-color: #dc3545; /* Default to red (unfulfilled) */
    border: 1px solid black;
    flex-shrink: 0;
}

/* homepage css */

#start-learning {
    padding: 20px;
    border-radius: 1rem; /* More rounded corners */
    font-size: 30px;
}

#jump-to-quiz {
    padding: 20px;
    border-radius: 1rem; /* More rounded corners */
    font-size: 30px;
}

#homepage-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 4rem !important;
    font-weight: 700; /* Bold */
}

/* base learning css */
#btn-prev {
    padding: 20px;
    min-width: 100px;
}

#btn-next {
    padding: 20px;
    min-width: 100px;
}

#learn-title {
    font-size: 2rem; /* Adjust size as needed */
    color: black;
    font-weight: bold; /* Optional: makes the text thicker */
}

.text-description {
    font-size: 1.5rem;
    color: black;
}

.checkmark {
    font-weight: bold;
    color: 'black';
    font-size: 3.2em;
    cursor: 'pointer';
}

#nav-buttons {
    position: fixed;
    display: flex;
    flex-direction: column;
    bottom: 10px;
    right: 10px;
    gap: 5px;
    z-index: 30;
}