.quiz-container {
    padding: 1em;
}
.quiz {
    width: 95%;
    display: block;
    margin: 1em auto 2em;
    background-image: repeating-linear-gradient(135deg, rgba(79, 79, 79,0.01) 0px, rgba(79, 79, 79,0.01) 14px,rgba(94, 94, 94,0.01) 14px, rgba(94, 94, 94,0.01) 28px,rgba(109, 109, 109,0.01) 28px, rgba(109, 109, 109,0.01) 42px,rgba(124, 124, 124,0.01) 42px, rgba(124, 124, 124,0.01) 56px,rgba(139, 139, 139,0.01) 56px, rgba(139, 139, 139,0.01) 70px,rgba(154, 154, 154,0.01) 70px, rgba(154, 154, 154,0.01) 84px,rgba(169, 169, 169,0.01) 84px, rgba(169, 169, 169,0.01) 98px,rgba(184, 184, 184,0.01) 98px, rgba(184, 184, 184,0.01) 112px),repeating-linear-gradient(45deg, rgba(221, 221, 221,0.01) 0px, rgba(221, 221, 221,0.01) 14px,rgba(207, 207, 207,0.01) 14px, rgba(207, 207, 207,0.01) 28px,rgba(192, 192, 192,0.01) 28px, rgba(192, 192, 192,0.01) 42px,rgba(178, 178, 178,0.01) 42px, rgba(178, 178, 178,0.01) 56px,rgba(164, 164, 164,0.01) 56px, rgba(164, 164, 164,0.01) 70px,rgba(150, 150, 150,0.01) 70px, rgba(150, 150, 150,0.01) 84px,rgba(135, 135, 135,0.01) 84px, rgba(135, 135, 135,0.01) 98px,rgba(121, 121, 121,0.01) 98px, rgba(121, 121, 121,0.01) 112px),linear-gradient(90deg, #ffffff,#ffffff);
}

.main dl.quiz dd {
    margin-left: 1.25em;
}
.main dl.quiz p {
    font-weight: 300;
    padding: .5em;
    color: teal;
}
.main dl.corrected dd {
    display: list-item;
    list-style-type: disc;
    list-style-position: inside;
}
.main div#quiz-progress {
    z-index: 1;
    position: fixed;
    right: 0.5em;
    bottom: 10px;
    width: 30%;
    color: white;
    padding: 5px;
    height: 25px;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* Subtle shadow */
    overflow: hidden;
    background-image: linear-gradient(135deg, rgba(76, 76, 76, 0.04) 0%, rgba(76, 76, 76, 0.04) 10%,rgba(149, 149, 149, 0.04) 10%, rgba(149, 149, 149, 0.04) 100%),linear-gradient(90deg, rgba(196, 196, 196, 0.04) 0%, rgba(196, 196, 196, 0.04) 59%,rgba(68, 68, 68, 0.04) 59%, rgba(68, 68, 68, 0.04) 100%),linear-gradient(45deg, rgba(39, 39, 39, 0.01) 0%, rgba(39, 39, 39, 0.01) 9%,rgba(218, 218, 218, 0.01) 9%, rgba(218, 218, 218, 0.01) 100%),linear-gradient(0deg, rgba(26, 26, 26, 0.04) 0%, rgba(26, 26, 26, 0.04) 33%,rgba(90, 90, 90, 0.04) 33%, rgba(90, 90, 90, 0.04) 100%),linear-gradient(135deg, rgba(37, 37, 37, 0.07) 0%, rgba(37, 37, 37, 0.07) 46%,rgba(50, 50, 50, 0.07) 46%, rgba(50, 50, 50, 0.07) 100%),linear-gradient(90deg, rgb(8, 28, 65),rgb(16, 173, 226));
}

.main div#quiz-progressbar {
    height: 100%;
    width: 0%; /* Starts from 0 */
    transition: width 0.5s ease-in-out; /* Smooth width transition */
    border-radius: 10px; /* Matches container */
    background-image: linear-gradient(216deg, rgba(77, 77, 77,0.05) 0%, rgba(77, 77, 77,0.05) 25%,rgba(42, 42, 42,0.05) 25%, rgba(42, 42, 42,0.05) 38%,rgba(223, 223, 223,0.05) 38%, rgba(223, 223, 223,0.05) 75%,rgba(36, 36, 36,0.05) 75%, rgba(36, 36, 36,0.05) 100%),linear-gradient(44deg, rgba(128, 128, 128,0.05) 0%, rgba(128, 128, 128,0.05) 34%,rgba(212, 212, 212,0.05) 34%, rgba(212, 212, 212,0.05) 57%,rgba(25, 25, 25,0.05) 57%, rgba(25, 25, 25,0.05) 89%,rgba(135, 135, 135,0.05) 89%, rgba(135, 135, 135,0.05) 100%),linear-gradient(241deg, rgba(55, 55, 55,0.05) 0%, rgba(55, 55, 55,0.05) 14%,rgba(209, 209, 209,0.05) 14%, rgba(209, 209, 209,0.05) 60%,rgba(245, 245, 245,0.05) 60%, rgba(245, 245, 245,0.05) 69%,rgba(164, 164, 164,0.05) 69%, rgba(164, 164, 164,0.05) 100%),linear-gradient(249deg, rgba(248, 248, 248,0.05) 0%, rgba(248, 248, 248,0.05) 32%,rgba(148, 148, 148,0.05) 32%, rgba(148, 148, 148,0.05) 35%,rgba(202, 202, 202,0.05) 35%, rgba(202, 202, 202,0.05) 51%,rgba(181, 181, 181,0.05) 51%, rgba(181, 181, 181,0.05) 100%),linear-gradient(92deg, hsl(214,0%,11%),hsl(214,0%,11%));
}

.main div#quiz-progresstext {
    position: relative;
    top: -25px;
    text-align: center; /* Centered text */
    font-size: 1.25em;
    font-weight: 100;
    color: white;
}

.main div#quiz-correction {
    padding-left: 75px;
    background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg version='1.1' viewBox='-150 -0 662 512' height='65px' width='65px' xmlns='http://www.w3.org/2000/svg'%3E %3Cpolygon points='303.22 303.22 464.78 141.67 417.56 78.702 248.14 263.88' fill='%23BD1515'/%3E %3Cpolygon points='248.14 263.88 425.43 86.573 370.33 47.216 208.78 208.78' fill='%23F2484B'/%3E %3Cpolygon points='141.67 464.78 303.23 303.23 256.01 256.01 78.713 417.57' fill='%23185F8D'/%3E %3Cpolygon points='86.584 425.44 256.01 256.01 208.78 208.78 47.228 370.34' fill='%236DA8D6'/%3E %3Cpolygon points='441.17 23.608 512 0 488.39 70.834 449.04 62.962' fill='%23BD1515'/%3E %3Cpolygon points='464.78 141.67 488.39 70.834 441.17 23.608 370.33 47.215' fill='%23F2EBD9'/%3E %3Cpolygon points='23.608 441.17 0 512 70.834 488.39 62.962 449.04' fill='%23185F8D'/%3E %3Cpolygon points='141.67 464.78 70.834 488.39 23.608 441.17 47.215 370.33' fill='%23F2EBD9'/%3E %3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left;
}
.main del.quiz-error {
    color: red;
}

/* Hide the default radio button */
input[type="radio"] {
    appearance: none; /* Removes default radio button styling */
    width: 18px;
    height: 18px;
    border: 1px solid teal;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    margin-right: 5px; /* Space between the radio and the text */
    background-color: khaki; /* Default background color */
    outline: none; /* Removes outline */
}

/* Style when the radio button is checked */
input[type="radio"]:checked {
    background-color: teal; /* Background color when checked */
    border: 2px solid darkorange; /* Border color when checked */
}

/* Inner circle indicating selection */
input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: transparent; /* Color of the inner circle */
}