h1 {
    font-size: 1.7em;
    background-color: orange;
    color: white;
    text-align: center;
    margin: 0px;
    padding: 0.5em 1em;
}

h2 {
    width: 100%;
    font-size: 1.2em;
    border-bottom: 2px solid orange;
    margin-top: 0.8em;
    margin-bottom: 0.2em;
}

.container {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.container>div {
    width: 100%;
}

.title {
    margin-top: 1em;
    margin-bottom: 0px;
    color: gray;
}

.title>span {
    display: inline-block;
    margin-right: 1em;
}

button {
    border-radius: 0.2em;
    border: 2px solid orange;
    background-color: white;
    padding: 0.8em 1em;
}

button:hover {
    background-color: orange;
    color: white;
}

footer {
    margin-top: 1rem;
    padding: 0.8rem 0px;
}

/*
 * For filter
 */
input[type=radio], input[type=checkbox] {
    display: none;
}

input[type=radio]+label, input[type=checkbox]+label {
    cursor: pointer;
    display: flex;
    padding: 0.1em 0px;
}

input[type=radio]+label::before, input[type=checkbox]+label::before {
    content: "";
    display: block;
    height: 1.2em;
    width: 1.2em;
    min-width: 1.2em;
    margin-right: 0.2em;
    background-color: white;
    border: 2px solid orange;
    border-radius: 0.2em;
}

input[type=radio]:checked+label::before, input[type=checkbox]:checked+label::before {
    content: "";
    text-align: center;
    color: white;
    display: block;
    height: 1.2em;
    width: 1.2em;
    min-width: 1.2em;
    margin-right: 0.2em;
    background-color: orange;
    border: 2px solid orange;
    border-radius: 0.2em;
}

.check-all {
    margin: 0.3em 0px;
    cursor: pointer;
    text-decoration: underline orange;
}

/*
 * For info
 */
.info-area {
    margin: 0.3em 0px;
    display: flex;
    justify-content: center;
    text-align: center;
}

.link-button {
    width: 100%;
    border-radius: 0.2em;
    border: 2px solid orange;
    background-color: white;
    margin: 0.2em 0px;
    padding: 0.8em 1em;
    color: black;
    text-align: center;
    text-decoration: none;
}

.link-button:hover {
    background-color: orange;
    color: white;
}

.right-button {
    margin-left: 0.5em;
}

.left-button {
    margin-right: 0.5em;
}


/*
 * For answer
 */
.answer-area {
    display: grid;
    justify-items: center;
    height: fit-content;
}

.answer-area>div {
    width: 100%;
    display: flex;
    justify-content: center;
}

.input-area>label {
    width: 30%;
    max-width: 4em;
    padding: 0.2em;
    text-align: center;
}

.input-area>select, .input-area>input {
    width: 70%;
    max-width: 16em;
    margin: 0.3em 0px;
    padding: 0.2em;
    border: 2px solid orange;
    border-radius: 0.2em;
}

.answer-area>button {
    width: 100%;
    max-width: 22em;
    margin: 0.3em 0px;
}

.answer-area>table {
    width: 80%;
    max-width: 30em;
    text-align: center;
    margin-top: 0.2em;
    border-collapse: collapse;
    border: none;
}

.answer-area td, .answer-area th{
    border: none;
    border-left: 2px solid orange;
    border-top: 2px solid orange;
    padding: 0.2em 0.5em;
}

.answer-area td:first-child, .answer-area th:first-child{
    border-left:none;
}


/*
 *  For text of question/explain
 */
.text-area {
    display: inline;
    text-align: left;
}

.text-area p {
    margin: 0px;
}

.figure {
    text-align: center;
}

.figure>img {
    width: 100%;
    min-width: 250px;
    margin: 0.4em 0px;
}

.box {
    font-size: 0.8em;
    padding: 0px 1em;
    margin: 0px 2px;
    border: solid 1px;
}

.circle {
    font-size: 0.7em;
    padding: 0px 0.3em;
    margin: 0px 2px;
    border: solid 1px;
    border-radius: 50%;
}

.dot {
    text-emphasis: dot;
}

.under-line {
    border-bottom: solid 1px;
}

.text-area .indent-1 {
    margin-left: 1em;
}

.text-area .indent-2 {
    margin-left: 2em;
}

.text-area .formula {
    margin: 0.7em 2em;
    margin-right: 0px;
}

.choices>span {
    display: inline-block;
    margin: 0px;
    margin-right: 2em;
}

.choices>span:last-child {
    margin-right: 0px;
}