#categories button {
    background-color: var(--categories_button_bg);
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 5px;
    margin: 5px;
    cursor: pointer;
    transition: 0.3s;
    font-size:18px;
}

#categories button:hover {
    background-color: var(--categories_button_bg_hover);
}

/* Lesson Buttons */
#lessons button {
    background-color: var(--lesson_button_bg);
    color: var(--button-text-color);
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 5px;
    cursor: pointer;
    transition: 0.3s;
    font-size:20px;
}

.portal-button {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--portal_button_bg);
    color: var(--button-text-color);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 5px;
}

.portal-button:hover {
    background-color: var(--portal_button_bg_hover);
}

#lessons button:hover {
    background-color: var(--lesson_button_bg_hover);
}

body.dark-mode #categories button {
    background-color: var(--dark_categories_button_bg);
    color: #fff;
}

body.dark-mode #categories button:hover {
    background-color: var(--dark_categories_button_bg_hover);
}

/* Lesson Buttons */
body.dark-mode #lessons button {
    background-color: var(--dark_lesson_button_bg);
    color: white;
}

body.dark-mode #lessons button:hover {
    background-color: var(--dark_lesson_button_bg_hover);
}

body.dark-mode .portal-button {
    background-color: var(--dark_portal_button_bg);
}
.answer-btn {
    font-size:20px;
    font-weight:600;
    padding-top:6px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:6px;
    display: block; /* Ensures vertical stacking */
    width: 60%; /* Sets button width to 50% */
    margin: 8px auto; /* Centers buttons horizontally */
    text-align: center; /* Keeps text centered */
    background-color:var(--borders);
    color:var(--button-text-color);
}

.answer-btn.selected {
    background: var (--answer-btn-selected);
    color: white;
    font-weight: bold;
}

.answer-btn.incorrect-selection {
    background-color: #ff4444;
    color: white;
    font-weight: bold;
    cursor: not-allowed;
}
.answer-btn.highlight-correct {
    background-color: var(--answer-btn-selected);
    border: 2px solid var(--borders);
    color: var(--text-color);
    font-weight: bold;
}
.check-matching-btn {
    display: block;
    margin: 10px auto;
    padding: 8px 16px;
    background-color: var(--borders);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.reset-matching-btn {
    display: block;
    margin: 10px auto;
    padding: 8px 16px;
    background-color: var(--borders);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}