.section {
    border: 2px solid grey;
    border-left: 12px solid var(--c);
    border-radius: 5px;
    padding: 0 12px 12px 12px;
    background-color: white;
    color: #000;
    margin-bottom: 24px;
    min-width: 80vw;
    max-width: 80vw;
}
.section h2 { counter-increment: heading-counter 1; }
.section h2::before { content: "" counter(heading-counter) ". ";}
.section h4 {
    border-top: 1px solid var(--c);
    border-left: 1px solid var(--c);
    border-right: 1px solid var(--c);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 5px 12px;
    margin: 24px 0 0 0;
    text-align: left;
    background-color: var(--c);
    color: white;
    font-size: 22px;
    font-weight: bold;
    /* width: fit-content; */
}
.section div {
    border: 1px solid black;
    border-collapse: collapse;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    margin: 0 0 20px 0;
    list-style-type: none;
    padding: 5px 5px 5px 5px;
    box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
}
.section div span {
    display: list-item;
    list-style-type: disc;
    list-style-position: outside;
    margin: 6px 0px 6px 32px;
}
.section div span::marker {
    color: var(--c);
    font-size: larger;
}
.section div span a {
    counter-increment: question-counter 1; 
    display: inline-flex;
    /* border: 1px solid #090707; */
    background-color: #48474708; 
    border-radius: 16px;
    padding: 1px 6px;
    margin: 1px;
}
.section div span a:hover,
.section div span a:hover::after { background-color: #484748; color: white;}
.section div span a::after { 
    content: "#"  counter(question-counter) "";
    color: red;
    padding: 0 0 0 4px;
    vertical-align: super;
    font-size: small;
    font-weight: bold;
}
.section div span button {
    background-color: #e6aff3; 
    padding: 1px 6px;
    margin: 1px 0 0 0;
    border-bottom-right-radius: 16px;
    border-top-right-radius: 16px;
    border: 1px solid #090707;
    font: 20px sans-serif;
}
.section div span button:hover, 
.section div span button:active { background-color: rgb(60, 3, 114); color: white; }

.section .capsule { border: 1px solid #090707; background-color: #e3e3f5; border-bottom-right-radius: 0; border-top-right-radius: 0; margin-right: -6px; }
.section .green, .green { border: 1px solid #090707; background-color: rgb(138, 197, 138); }
.section .red, .red { border: 1px solid #090707; background-color: rgb(245, 173, 173); }
.section .yellow, .yellow { border: 1px solid #090707; background-color: rgb(245, 237, 167);}
.section .bold, .bold { border: 1px solid #090707; font-weight: bold; }

.section .capsule::after,
.section .green::after,
.section .red::after,
.section .yellow::after,
.section .bold::after { color: #000; font-weight: 500;}