/* Everything fits in .exam */
.exam {
    counter-reset: page-total page question;
    color: var(--color-black);
    background-color: var(--color-beige);
}
.MathJax { font-size: 100% !important; }

/* Fonts */
.exam h1, .exam h2, .elective-type {
    font-family: 'Catamaran', sans-serif;
    font-weight: bold;
}
.exam h3, .exam .exam-type {
    font-family: 'Asap Condensed', sans-serif;
}
.exam article { font-family:'PT Serif', Times, serif; }
.exam header::before, .exam article::before, .exam footer, .exam article small {
    font-family: 'Frank Ruhl Libre', serif;
    font-weight: normal;
}
.exam .question-type, .exam .question-type-old, .exam .flavor-sans {
    font-family: 'Roboto', sans-serif;
    font-weight: medium;
}
.exam.old h1, .exam.old h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: normal;
}

/* Page */
.exam section {
    position: relative;
    width: 794px; /* 210mm */
    min-height: 1123px; /* 297mm */
    margin: 32px auto;
    padding: 72px 64px;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    box-shadow: var(--color-shadow) 6px 6px 10px;
    background-color: var(--color-paper);

    /* Grid settings */
    display: grid;
    grid-template-rows: minmax(48px, auto) 1fr 48px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        " header header "
        " col1 col2 "
        " footer footer ";
}
.exam.old section {
    grid-template-rows: minmax(48px, auto) 1fr 0px;
}

/* Header */
.exam header {
    grid-area: header;
    border-bottom: 1px solid var(--color-black);
    
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
}

/* Controlling page number */
.exam header::before {
    counter-increment: page;
    content: counter(page);

    position: absolute;
    top: 8px;
    margin: 0;
    font-size: 34px;
    line-height: 34px;
}
.exam.old header::before {
    top:12px;
}
.exam section:first-child > header::before,
.exam section.question-reset-23 > header::before {
    top: -8px;
}
.exam section:nth-of-type(odd) header::before { right: 0; }
.exam section:nth-of-type(even) header::before { left: 0; }

/* Resetting question or page */
.exam section.question-reset-23 {
    /* used in 2021~ */
    counter-reset: page 0 question 22;
}
.exam section.question-reset-26 {
    /* used in 2006~2013 */
    counter-reset: question 25;
}

/* Title (first page) */
.exam h1 {
    margin: 0;
    font-size: 40px;
}
.exam.old h1 {
    margin: 0 0 4px;
    font-size: 36px;
}
/* Title (all other pages) */
.exam h2 {
    margin: 0 0 -4px;
    font-size: 30px;
}
.exam.old h2 {
    margin: 0 0 2px;
    font-size: 28px;
}
/* Subtitle (first page) */
.exam h3 {
    margin: 0 0 -4px;
    font-size: 20px;
    font-weight: normal;
}
/* Text in rounded div */
.exam .exam-type {
    position: absolute;
    bottom: 6px;
    left: 0;
    
    border: 1px solid var(--color-black);
    border-radius: 100px;
    padding: 2px 8px;

    font-size: 18px;
}
.exam section:nth-of-type(even) .exam-type { left: 30px; }

/* Question container */
.col1, .col2 {
    position: relative;
    overflow: hidden;
}
.col1 {
    grid-area: col1;
    padding-right: 12px;
}
.col2 {
    grid-area: col2;
    border-left: 1px solid var(--color-black);
    padding-left: 12px;
}

/* Question */
.exam article {
    width: 320px;
    min-height: 50%;
    margin-top: 12px;
    padding-left: 12px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    line-height: 20px;

    font-size: 13px;
}
.exam article::before {
    counter-increment: question;
    content: counter(question) ". ";
    margin-left: -12px;
    margin-right: 4px;
    font-size: 15px;
}

/* Question Type */
.exam .question-type {
    display: inline-block;
    margin: 8px 0 0;
    border: 1px solid var(--color-black);
    padding: 2px 16px;

    font-size: 13px;
}
/* Offseting the question after .question-type */
.exam .question-type + article { margin-bottom: -33px; }
/* Elective subject type */
.exam .elective-type {
    margin: 8px 0 16px;
    background-color: var(--color-gray);
    
    text-align: center;
    font-size: 26px;
    line-height: 40px;
}
.exam .elective-type + article { margin-bottom: -53px; }

/* Old question type format */
.exam .question-type-old {
    margin: 40px 25px;
    border: 1px solid var(--color-black);
    padding: 4px;
    background-color: var(--color-gray);

    text-align: center;
    font-size: 18px;
}

/* Choices */
.exam article > ol, .exam .select {
    margin: 16px 0;
    padding: 0;
    display: flex;

    justify-content: space-between;
    align-items: baseline;
    /* list-style-type: symbols(cyclic "①" "②" "③" "④" "⑤"); */
    list-style-type: none;
}
.exam ol.col-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.exam ol.col-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.exam ol.col-1 {
    display: block;
}
.exam :is(article > ol, .select) li { margin-bottom: 8px; }
.exam ol.col-1 li {
    margin-bottom: 4px;
    margin-left: 22px;
    text-indent: -22px;
}
.exam ol.col-1 li::before {
    margin-right: 6px;
}
.exam :is(article > ol, .select) li:nth-child(1)::before { content: "① "; }
.exam :is(article > ol, .select) li:nth-child(2)::before { content: "② "; }
.exam :is(article > ol, .select) li:nth-child(3)::before { content: "③ "; }
.exam :is(article > ol, .select) li:nth-child(4)::before { content: "④ "; }
.exam :is(article > ol, .select) li:nth-child(5)::before { content: "⑤ "; }
.exam :is(article > ol, .select)::after { content: ""; }


/* Various elements inside questions */
/* "[N points]" element */
.exam article > small {
    margin-left: 4px;
    letter-spacing: -0.2px;
}
.exam article small.right {
    display: block;
    text-align: right;
}
/* a paragraph tabbed in */
.exam .tab, .exam .tab-short { margin-left: 32px; }
.exam .box .tab, .exam .box .tab-short { margin-left: 20px; }
/* a paragraph centered */
.exam .center {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* a box with outline */
.exam .box, .exam .box-list {
    margin-right: 8px;
    border: 1px solid var(--color-black);
    padding: 6px 10px;
}
/* the <List> box */
.exam .box-list { position: relative; }
.exam .box-list::before {
    content: "< L i s t >";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-11px);
    padding: 0 1px;
    text-align: center;
    background-color: var(--color-paper);
}
.exam .tab, .exam .center, .exam .box, .exam .box-list {
    margin-top: 1em;
    margin-bottom: 1em;
}
/* Used in 'questions 13-14' in 2014-2016 */
.exam .flavor-sans {
    margin-top: 4px;
    margin-left: 12px;
    text-indent: -12px;
    font-size: 13px;
}

/* table */
.exam table {
    border-collapse: collapse;
}
.exam th, .exam td {
    border: 1px solid var(--color-black);
    text-align: center;
    padding: 4px 8px;
}
.exam table.no-border th, .exam table.no-border td { border: none; }
.exam table.short th, .exam table.short td {
    padding: 0px 8px;
}

/* Lists */
/* (A) (B) (C) - used in .box on its own */
.exam ol.upper {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    list-style-type: none;
    /* Why is ::marker not supported on my phone? */
}
.exam ol.upper > li { margin: 2px 0 2px 24px; }
.exam ol.upper > li::before {
    display: inline-block;
    letter-spacing: -0.5px;
    width: 24px;
    margin-left: -24px;
}
.exam ol.upper > li:nth-child(1)::before { content: "(A)"; }
.exam ol.upper > li:nth-child(2)::before { content: "(B)"; }
.exam ol.upper > li:nth-child(3)::before { content: "(C)"; }

/* (i) (ii) (iii) - used in .box between paragraphs */
.exam ol.roman {
    padding-inline-start: 0;
    list-style-type: none;
}
.exam ol.roman > li { margin: 2px 0 2px 22px; }
.exam ol.roman > li::before {
    display: inline-block;
    letter-spacing: -0.7px;
    width: 22px;
    margin-left: -22px;
}
.exam ol.roman > li:nth-child(1)::before { content: "(i)"; }
.exam ol.roman > li:nth-child(2)::before { content: "(ii)"; }
.exam ol.roman > li:nth-child(3)::before { content: "(iii)"; }
.exam ol.roman > li:nth-child(4)::before { content: "(iv)"; }
.exam ol.roman > li:nth-child(5)::before { content: "(v)"; }

/* a. b. c. - used in .box-list */
.exam ol.alpha {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 14px;
    list-style-type: lower-alpha;
}
.exam ol.alpha > li { margin: 2px 0; }

/* Images */
.exam img {
    max-width: 100%;
    mix-blend-mode: multiply; /* remove white background */
}

/* Other */
.u {
    text-decoration: underline;
}


/* letter spacing */
.exam .shrink-1 {
    letter-spacing: -0.2px;
}
.exam .shrink-2 {
    letter-spacing: -0.5px;
}

/* vertical spacing */
.exam .space { margin-bottom: 8px;}

/* Footer */
.exam footer {
    grid-area: footer;
    justify-self: center;
    align-self: center;
    width: 48px;
    height: 15px;
    
    border: 1px solid var(--color-black);
    padding: 9px 4px 0;
    position: relative;

    font-size: 12px;
    text-align: right;
}
.exam footer::before {
    float: left;
    margin-top: -9px;
    counter-increment: page-total;
    content: counter(page-total);
}
.exam footer::after {
    position:absolute;
    bottom: -1px;
    left: 0;
    width:61px;
    border-top:1px solid var(--color-black);
    transform: rotate(-23.2deg);
    transform-origin: 0% 100%;
    content: "";
}