body {
    margin-top: 1rem;
    margin-bottom: 1rem;
    background-color: #ecf5ff;
}

select {
    min-width: 100%;
}

.choice-container {
    display: flex;
    margin-bottom: 0.5rem;
    width: 100%;
    font-size: 1.1rem;
    border: 0.1rem solid rgb(86, 165, 235, 0.25);
    background-color: white;
}

.choice-container:hover {
    cursor: pointer;
    box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
    transform: translateY(-0.1rem);
    transition: transform 150ms;
}

.choice-prefix, .hint-prefix, 
.choice-prefix2, .hint-prefix2, 
.choice-prefix3, .hint-prefix3, 
.answer-prefix {
    padding: 0.75rem 1.5rem;
    background-color: #56a5eb;
    color: white;
}

.choice-text, .hint-text, 
.choice-text2, .hint-text2,
.choice-text3, .hint-text3 {
    padding: 0.75rem;
    width: 100%;
}

.correct {
    background-color: #28a745;;
}

.incorrect {
    background-color: #dc3545;
}

.question-header, .section-header {
    padding: 0.5rem 1.5rem;
    background-color: #56a5eb;
    color: white;
    font-size: 1.2rem;
}

.sub-header {
    font-size: 1.2rem;
    color: #56a5eb;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

#quiz, #quiz-textbox, #quiz2, #quiz3 {
    border: 0.1rem solid rgb(86, 165, 235, 0.25);
    padding: 0.5rem 1.5rem;
}

.question-text {
    font-size: 1.1rem;
    margin-top: 0.8rem;
}

.feedback-container, .sc-feedback-container {
    display: flex;
    margin-bottom: 0.5rem;
    width: 100%;
    font-size: 1.1rem;
    border: 0.1rem solid rgb(86, 165, 235, 0.25);
    background-color: white;
}

.answer-container {
    background-color: white;
}

.hidden-custom {
    display: none;
}

.feedback-prefix, .feedback-prefix2, .feedback-prefix3,
.sc-feedback-prefix {
    padding: 0.75rem 1.5rem;
    color: white;
    text-align: center;
    margin: auto 0.5rem;
}

.feedback-text, .feedback-text2, .feedback-text3, 
.hint-text, .hint-text2, .hint-text3, 
.answer-text,
.sc-feedback-text {
    padding: 0.75rem;
    width: 100%;
}

/* BUTTON */

.btn {
    font-size: 1.1rem;
    padding: 0.25rem 0;
    width: 8rem;
    text-align: center;
    border: 0.1rem solid #56a5eb;
    margin-bottom: 1rem;
    text-decoration: none;
    color: #56a5eb;
    background-color: white;
}

.btn:hover {
    cursor: pointer;
    box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
    transform: translateY(-0.1rem);
    transition: transform 150ms;
}

.btn[disabled]:hover {
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

#btn-panel, .btn-panel {
    display: flex;
    justify-content: space-between;
}

/* progress bar */
#progressBar, #progressBar2, #progressBar3 {
    width: 20rem;
    height: 2rem;
    border: 0.3rem solid #56a5eb;
    margin-top: 1rem;
}

#progressBarFull, #progressBarFull2, #progressBarFull3 {
    height: 1.6rem;
    background-color: #56a5eb;
    width: 0%;
}

.hud-prefix {
    margin: 1rem 0.5rem;
    font-size: 1.2rem;
}

/* Frequency Table */

.freq-table {
    width: 60%;
    text-align: center;
    margin: auto;
    border: 1px solid #243778;
}

img {
    max-width: 30rem;
}

.img-container {
    justify-content: center;
    padding: 1rem 0rem;
}