html, body {
    margin: 0;
    padding: 0;
    font-family: normal, serif;
}

* {
    box-sizing: border-box;
}

#app {
    margin: 0 auto;
}

.page-content {
    min-height: calc(100vh - 41px);
}

footer {
    height: 41px;
    --tw-border-opacity: 1;
    border-top-color: #E8F3FF;
    --tw-bg-opacity: 1;
    background-color: #FFFFFF;
    text-align: center;
    font-size: .75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity));
    border-top: 1px solid rgba(48, 48, 48, 0.6)
}

/* list */
.page-content.list-page {
    padding-top: 22.64vw;
}

.list-page .page-title {
    padding: 0 12.565vw;
    font-family: Suez One, sans-serif;
    font-size: 7.22vw;
    line-height: 129.5%;
    letter-spacing: normal;
    color: #000000;
}

.list-page .page-subtitle {
    padding: 0 12.565vw;
    margin-top: 1.25vw;
    font-family: Squada One, sans-serif;
    font-size: 5.83vw;
    font-weight: normal;
    line-height: 129.5%;
    letter-spacing: 0.001389em;
    color: #5E8E19;
}

.list-page .page-gap {
    min-height: 250px;
    margin: 0 auto;
}

.list-page .page-btn {
    width: 54.17vw;
    height: 11.95vw;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13.89vw;
    background: linear-gradient(0deg, #B3FF2F, #B3FF2F), #C0FF01;
    border: 0.56vw solid #000000;
    box-shadow: 0 0.56vw 0 0 #000000;

    font-family: source sans pro, 'sans-serif';
    font-size: 5.83vw;
    font-weight: bold;
    line-height: 5.33vw;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: -0.063894px;
    color: #3D3D3D;
}

.list-page .page-steps {
    margin-top: 5vw;
    padding: 0 12.565vw;
    font-family: source sans pro, 'sans-serif';
    font-size: 4.44vw;
    font-weight: normal;
    line-height: 124.75%;
    letter-spacing: normal;
    color: #2C2C2C;
}

/* quiz */
.page-content.quiz-page {
    padding-top: 8.33vw;
}

.quiz-page .question-content {
    height: auto;
    width: 88.9vw;
    margin: 0 auto;
    background: url("../resources/img/quiz_bg.png") no-repeat;
    background-size: 100% auto;
    aspect-ratio: 654 / 425;
    position: relative;
}

.quiz-page .question-content > img {
    top: -4.44vw;
    left: 1.11vw;
    width: 33.72vw;
    position: absolute;
}

.quiz-page .question-content > .timeSvg {
    top: 3.75vw;
    right: 4.03vw;
    position: absolute;
}

.quiz-page .question-content > .question-title {
    width: 80%;
    font-family: source sans pro, 'sans-serif';
    font-size: 5.83vw;
    font-weight: 600;
    line-height: 7.14vw;
    text-align: center;
    letter-spacing: -0.063894vw;
}

.quiz-page .question-content > .question-schedule {
    bottom: 4.3vw;
    position: absolute;
}

.quiz-page .question-content .question-schedule > :first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.97vw;
}

.quiz-page .question-content .schedule-num {
    color: #3D3D3D;
    font-weight: bold;
    margin-right: 1.46vw;
    font-size: 3.61vw;
    font-family: source sans pro, sans-serif;
}

.quiz-page .question-content .schedule-progress {
    width: 56.95vw;
    height: 2.5vw;
    border-radius: 1.39vw;
    background: rgba(0, 0, 0, 0.34);
    border: 0.28vw solid rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
}

.quiz-page .question-content .schedule-finish {
    height: 1.94vw;
    width: calc(var(--scheduleNum) * 11.39vw);
    border-radius: 1.39vw;
    background: #33F1FF;
    position: relative;
    transition: width 0.5s ease;
}

.quiz-page .question-answer-btn {
    width: 88.9vw;
    height: 13.33vw;
    margin: 4.17vw auto 0;
    border-radius: 13.89vw;
    background: #FFFFFF;
    border: 0.56vw solid #000000;
    box-shadow: 0 0.56vw 0 0 #000000;
    position: relative;
    transition: transform 0.25s ease;
    transform: scale(1);

    font-family: source sans pro, 'sans-serif';
    font-size: 5vw;
    font-weight: 600;
    line-height: 5.33vw;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: -0.063894vw;
    color: #333333;
}

.quiz-page .question-answer-btn:active {
    transform: scale(1.06);
}

.quiz-page .question-answer-btn .answer-tag {
    width: 6.94vw;
    height: 6.94vw;
    right: 6.94vw;
    z-index: 9;
    position: absolute;
}

.quiz-page .question-answer-fail {
    color: rgba(0, 0, 0, 0.41);
    background: linear-gradient(0deg, #FF5682, #FF5682), #FF5783;
}

.quiz-page .question-answer-fail .answer-tag {
    background-image: url("../resources/img/fail_tag.png");
    background-size: 100% auto;
}

.quiz-page .question-answer-success {
    color: rgba(0, 0, 0, 0.41);
    background: #01FED2;
}

.quiz-page .question-answer-success .answer-tag {
    background-image: url("../resources/img/success_tag.png");
    background-size: 100% auto;
}

/* 失败弹窗 */
.fail-popup {
    display: none;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
}

.fail-popup .animate {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.fail-popup .animate > img {
    top: 15.57vw;
    right: 12.78vw;
    position: absolute;
    width: 6.94vw;
    transform: scale(1);
    transition: transform 0.2s ease;
}

.fail-popup .animate > img:active {
    transform: scale(1.1);
}

/* 失败弹窗内容 */
.fail-popup .fail-content {
    width: 91.17vw;
    height: auto;
    margin-top: 6.39vw;
    padding-top: 16.52vw;
    background: url("../resources/img/fail_bg.png") no-repeat;
    background-size: 100% auto;
    aspect-ratio: 665 / 502;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.fail-popup .fail-animation {
    height: 23.7vw;
    position: relative;
}

.fail-popup .fail-animation > :first-child {
    top: 0;
    left: calc(50% - 10.28vw);
    width: 20.56vw;
    position: absolute;
    z-index: 10;
}

.fail-popup .fail-animation > :last-child {
    top: 0;
    left: calc(50% - 16.635vw);
    width: 35.14vw;
    height: 22.64vw;
    position: absolute;
    z-index: 9;
}

.fail-popup .fail-content-title {
    width: 60.14vw;
    font-family: source sans pro, sans-serif;
    font-size: 5vw;
    font-weight: bold;
    line-height: 5.33vw;
    text-align: center;
    margin-top: 4vw;
    letter-spacing: -0.063894vw;
    color: #000000;
}

.fail-popup .fail-content-subtitle {
    width: 66.67vw;
    margin-top: 2.78vw;
    font-family: source sans pro, sans-serif;
    font-size: 3.89vw;
    text-align: center;
    line-height: 100%;
    letter-spacing: -0.063894vw;
    color: #666666;
}

.fail-popup .fail-btn {
    width: 56.67vw;
    height: 13.2vw;
    margin-top: 4.86vw;
    border-radius: 13.89vw;
    background: linear-gradient(0deg, #C2F820, #C2F820), #C0FF01;
    border: 0.56vw solid #000000;
    box-shadow: 0 0.56vw 0 0 #000000;
    transform: scale(1);
    transition: transform 0.25s ease;

    font-family: source sans pro, 'sans-serif';
    font-size: 5.83vw;
    font-weight: 600;
    line-height: 5.33vw;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: -0.063894vw;
    color: #3D3D3D;
}

.fail-popup .fail-btn img {
    width: 5.97vw;
    margin-right: 1.67vw;
}

.fail-popup .fail-btn:active {
    transform: scale(1.06);
}

.fail-popup .fail-retry {
    margin-top: 2.48vw;
    font-family: source sans pro, sans-serif;;
    font-size: 4.44vw;
    font-weight: normal;
    line-height: 5.33vw;
    text-align: center;
    letter-spacing: -0.063894vw;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
    animation-delay: 3s;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* result */
.page-content.finish-page {
    width: 100vw;
    min-height: calc(100vh - 41px);
    display: flex;
    align-items: center;
    flex-direction: column;
}

.finish-page .finish-content {
    width: 97.45vw;
    margin-top: 1.81vw;
    padding-top: 17.5vw;
    background-size: 100% auto;
    aspect-ratio: 705 / 553;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.finish-page .finish-animation {
    position: relative;
    height: 33.75vw;
}

.finish-page .finish-animation > :first-child {
    top: 0;
    left: calc(50% - 14.795vw);
    width: 29.59vw;
    position: absolute;
    z-index: 10;
}

.finish-page .finish-animation > :nth-child(2) {
    top: 0;
    left: calc(50% - 26.875vw);
    width: 53.75vw;
    position: absolute;
    z-index: 9;
}

.finish-page .finish_tag {
    top: -15vw;
    right: -45vw;
    width: 28.34vw;
    position: absolute;
}

.finish-page .finish-title {
    width: 70.84vw;
    margin-top: 2.22vw;
    font-family: Roboto, sans-serif;
    font-size: 5vw;
    font-weight: bold;
    line-height: 7.56vw;
    text-align: center;
    letter-spacing: -0.063894vw;
    color: #000000;
}

.finish-page .finish-subtitle {
    width: 72vw;
    margin-top: 2.78vw;
    font-family: Roboto, sans-serif;
    font-size: 3.89vw;
    font-weight: 500;
    line-height: 5.19vw;
    text-align: center;
    letter-spacing: -0.063894vw;
    color: #333333;
}

.finish-page .finish-btn {
    width: 63.89vw;
    height: 13.2vw;
    margin-top: 4.86vw;
    border-radius: 13.89vw;
    background: linear-gradient(0deg, #C2F820, #C2F820), #C0FF01;
    border: 0.56vw solid #000000;
    box-shadow: 0 0.56vw 0 0 #000000;
    padding-top: 3.8vw;
    transform: scale(1);
    transition: transform 0.2s ease;

    font-family: source sans pro, sans-serif;;
    font-size: 4.44vw;
    font-weight: 600;
    line-height: 5.33vw;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: -0.063894vw;
    color: #000000;
}

.finish-page .finish-btn:active {
    transform: scale(1.01);
}