/****** Debug Area ******/
.debug {
    position: fixed;
    bottom: 10px;
    right: 10px;
    margin: 10px;
    display: block;
    background-color: var(--white);
    padding: 20px;
    border-radius: 4px;
    font-family: monospace;
    color: var(--darkGray);
}


/****** Question Catalog ******/


.question_container {
    display: block;
    flex-wrap: wrap;
}

.question_card {
    padding: 20px;
    background-color: var(--whiteMuted);
    border-radius: 4px;
    margin-bottom: 12px;
    transition: background-color 0.2s ease;
    cursor: pointer;
    display: grid;
    grid-template-columns: 50px 1fr 100px;
    row-gap: 4px;
    column-gap: 12px;
}

.question_card:hover {
    background-color: var(--white);
}

.question_id {
    background-color: var(--lightGray);
    padding: 2px 6px;
    border-radius: 4px;
    text-align: center;
    font-size: 0.8em;
    color: var(--mediumGray);
}

.question_category {
    font-style: italic;
    color: var(--mediumGray);
}

.question_image {
    width: 100%;
}

.question_image img {
    width: 100%;
    border-radius: 2px;
}

.question_answer {
    grid-column: span 2;
    color: var(--mediumGray);
}