.quizBox::before {content: "🏆 Quiz"; font-size: 3rem; font-family: fantasy; text-shadow: 2px 2px; color: #ecb14f;}
.quiz {margin: 3rem 0; padding: 1rem; box-shadow: 0 0 1rem 0 #ddd;}
.quiz .q {display: inline; color: black;}
.quiz .q b:nth-child(1) {display: inline; background: deeppink; color: white; font-size: 1rem; text-align: center; padding: 0 5px;}
.quiz ul {padding: 0 !important;}
.quiz li {cursor: pointer; display: block; padding-left: 30px; font-weight: 100; color: black;}
.quiz li::before {content: "◯"; text-decoration: none; display: inline-block; background: white; font-size: 1rem; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; color: transparent; border-radius: 0; margin: 10px 10px; padding: 1px; border: 1px solid #000; margin-left: -30px;}
.correct {background: #c6edc6; color: green;}
.incorrect {background: #ffecef; color: red; text-decoration: line-through;}
.correct::before {content: "✓" !important; background: green !important; color: white !important; border: 1px solid white !important;}
.incorrect::before {content: "✕" !important; background: #444 !important; color: white !important; border: 1px solid white !important;}

@media only screen and (max-width: 600px) {

}

/* POPUP */
.popup-overlay {position: fixed;top: 0; left: 0;width: 100%; height: 100%;background: rgba(0, 0, 0, 0.6);display: flex;justify-content: center;align-items: center;z-index: 999;}
.popup-box {background: #fff;padding: 30px;border-radius: 12px;text-align: center;max-width: 400px;width: 90%;box-shadow: 0 0 20px rgba(0,0,0,0.2);}
.popup-box h6 {font-size: 35px;   padding: 0;   margin: 1rem 0;   font-weight: 900;   font-family: verdana, courier, sans-serif;}
.popup-box button {padding: 1rem 0;   margin: 1rem 0;   border: none;   border-radius: 50px;   font-size: 2rem;   cursor: pointer;   width: 150px;}
.btn-yes {background-color: #28a745;color: white;}
.btn-no {background-color: #dc3545;color: white;}

/* MATHJAX */
mjx-container[jax="CHTML"][display="true"] {  text-align: center;  display: inline-block; }

/* QUIZ1 */
.q1 {box-shadow: 0 0 1rem 0 #ddd; padding: 1rem; margin: 2rem 0;}
.q1o {padding: 0;}
.q1o li {display: block; cursor: pointer;}
.q1q b:nth-child(1) {display: inline;   background: black;   color: white;   padding: 0 5px;}
.q1o li::before {content: "."; display: inline-block;   border: 1px solid #000; height: 1.5rem; width: 1.5rem; margin-right: 1rem; text-align: center; font-size: 1rem; line-height: 1.5rem; color: transparent;}
.q1c::before {content: "\2713" !important; display: inline-block; background: green; color: white !important;}
.q1w::before {content: "X" !important; display: inline-block; background: red; color: white !Important;}

/* General */
.content h2 {font-size: 1.2rem;   background: #cee7e8; color: black; margin: 1rem 0; padding: 1rem; border-left: 1rem solid cadetblue;}

/* Flashcard */
.fcs {position: relative;width: 100%;height: 300px;line-height: 300px;margin: 1rem 0; box-shadow: 0 0 1rem 0 #ddd; border: none;text-align: center; border: none;}
.fc {position: absolute;width: 100%;height: 100%;display: none;cursor: pointer;padding: 0;box-sizing: border-box;background: #f0f0f0;text-align: center;font-size: 18px;}
.fcb {display: none; background: white;}
.fcf {font-size: 125%;   color: crimson;   font-weight: 900;   background: #ffc;}
.fcb {font-size: 125%; font-weight: 100;}
.fcnav {text-align: center; background: aliceblue; padding: 1rem 0;}
.fcnav button {display: inline-block;   font-size: 1rem;   background: white;   border: none;   width: 50px;   height: 50px;   border-radius: 50%;   color: black;   cursor: pointer;   font-weight: 900;}
.fcnav button:hover {background: #09f; color: #fff;}