:root {
    --skippedBgColor: hsl(from var(--redColor) h s calc(l - 10));
    --currentBgColor: hsl(from var(--yellowColor) h s calc(l - 10));
    --answeredBgColor: hsl(from var(--greenColor) h s calc(l - 0));
}

/* Fullscreen style */
body.fullscreen {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Timer styling */
#timer {
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    /* margin-bottom: 20px; */
}

/* Status Indicators Styling */
#question-status {
    margin-top: 10px;
    text-align: center;
}

#question-status span {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    border-radius: 4px;
    
    font-size: 0.75rem;
}

#unanswered-indicator { 
    background-color: gray; 
    color: var(--boneWhite); 
}
#current-indicator { 
    background-color: var(--currentBgColor); 
    color: var(--black);
}
#skipped-indicator { 
    background-color: var(--skippedBgColor); 
    color: var(--boneWhite); 
}
#answered-indicator { 
    background-color: var(--answeredBgColor); 
    color: var(--boneWhite); 
}

#unanswered, #current, #skipped, #answered {
    padding: 0.5rem;
}

.unanswered { background-color: gray; color: var(--boneWhite); }
.current { background-color: var(--currentBgColor); color: black; }
.skipped { background-color: var(--skippedBgColor); color: var(--boneWhite); }
.answered { background-color: var(--answeredBgColor); color: var(--boneWhite); }


/* .question-nav-btn {
        padding: 5px;
        margin: 3px;
        border: none;
        cursor: pointer;
        border-radius: 4px;
    } */

#question-list {
    background-color: var(--grayColor50);
    padding: 1rem;
    height: 20vh;
    overflow-y: auto;
    overflow-x: hidden;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25px, 1fr));
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0.65rem;
    justify-content: center;

} 


.question-nav-btn {
    margin-inline: 2.5px;
    padding: 5px;
    border: 2px solid transparent;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 300;
    cursor: pointer;
    color: white;
}

.question-nav-btn:hover {
    opacity: 0.8;
}

/* #question-navigation ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#question-navigation li {
    margin: 0 10px;
} */

.question-display {
    background-color: var(--grayColor100);
    color: var(--black);
    height: 25vh;
    border: 1px solid var(--grayColor300);
    border-radius: 0.5rem;
    padding: 10px;
    overflow: auto;
}

.answer-section {
    display: none; /* Hidden by default */
    margin-top: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

.nav-button {
    background-color: var(--primaryBgColor);
    color: var(--boneWhite);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: 200ms ease-in opacity;
}

.nav-button:hover {
    opacity: 0.9;
}

.submitting {
    pointer-events: none;
    opacity: 0.5;
}