@font-face {
    font-family: 'MElleHK';
    src: url('../fonts/MElleHK-Light.otf');
    font-weight: 400;
}
@font-face {
    font-family: 'MElleHK';
    src: url('../fonts/MElleHK-Bold.otf');
    font-weight: 700;
}
@font-face {
    font-family: 'Noto Sans TC';
    src: url('../fonts/NotoSansCJKtc-Regular.otf');
    font-weight: 400;
}
@font-face {
    font-family: 'Noto Sans TC';
    src: url('../fonts/NotoSansCJKtc-Medium.otf');
    font-weight: 700;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto.ttf');
}
@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica.ttf');
}

:root {
    --burgundy-color:#8b2942;
    --sharp-magenta-color:#99004a;
    --tinted-magenta-color:#ad336e;
    --light-magenta-color:#c26692;
    --yellow-color:#e2a650;
    --sharp-yellow-color:#efaa21;
    --tinted-yellow-color:#f2bb4a;
    --light-yellow-color:#f5cc7a;
    --pink-color:#f05165;
    --tinted-pink-color:#f4919d;
    --light-pink-color:#f7acb6;
    --silver-color:#c7c8ca;
    --grey-color:#6e6e73;
    --dark-grey-color:#3a3a3c;
    --gold-color:#9b9483;
    --tinted-gold-color:#cfc5af;
    --light-gold-color:#e2dccf;
    --bs-white:#ffffff;

    --bs-btn-color: #fff;
    --bs-btn-bg: var(--light-gold-color);
    --bs-btn-border-color: var(--light-gold-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tinted-gold-color);
    --bs-btn-hover-border-color: var(--tinted-gold-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tinted-gold-color);
    --bs-btn-active-border-color: var(--tinted-gold-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--light-gold-color);
    --bs-btn-disabled-border-color: var(--light-gold-color);

    --header-chinese-font: 'MElleHK', sans-serif;
    --header-english-font: 'Roboto', sans-serif;
    --body-chinese-font: 'Noto Sans TC', sans-serif;
    --body-english-font: 'Helvetica', sans-serif;
}

html,
body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: 'MElleHK', sans-serif;
    background-color: #ece9e1;
}
.chinese-header {
    font-family: var(--header-chinese-font); /* Chinese header font */
    font-weight: 700;
}
.chinese-body {
    font-family: var(--body-chinese-font); /* Chinese header font */
}
.english-header {
    font-family: var(--header-english-font); /* Chinese header font */
    font-weight: 700;
}
.english-body {
    font-family: var(--body-english-font); /* Chinese header font */
}
.full-screen {
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}
.hidden {
    display: none !important; /* Hide elements with this class */
}

.btn {
    min-width: 400px;
    border-radius: 20px;   
    border: var(--bs-btn-border-width) solid var(--light-gold-color);
}
.btn.chinese {
    font-family: 'Noto Sans TC', sans-serif; /* Chinese font */
}
.btn-primary {
    background-color: var(--light-gold-color);
    color:var(--dark-grey-color);
    font-size: 72px;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible,
.btn-primary:checked+.btn, .btn-primary.active, .btn-primary.show, .btn-primary:first-child:active, :not(.btn-primary)+.btn:active {
    color:var(--bs-white);
    background-color: var(--tinted-magenta-color);
    border: var(--bs-btn-border-width) solid var(--light-gold-color);
}


.btn-secondary {
    background-color: var(--burgundy-color);
    color:var(--bs-white);
    font-size: 72px;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:focus-visible,
.btn-secondary:checked+.btn, .btn-secondary.active, .btn-secondary.show, .btn-secondary:first-child:active, :not(.btn-secondary)+.btn:active {
    color:var(--bs-white);
    background-color: var(--tinted-magenta-color);
    border: var(--bs-btn-border-width) solid var(--tinted-magenta-color);
}

#language-selection {
    background: var(--burgundy-color)
}
.p1-title {
    width: 100%;
    height: auto;
    max-width: 92%;
    margin:60px auto 100px;
    display: block;
}
.bg-main {
    overflow: hidden;
    background:url(../img/bg-2.webp) no-repeat center center / cover;
}

img.panda-img {
    width: 100%;
    max-width: 380px;
    object-fit: cover;
    aspect-ratio: 1/1;
    margin: 40px auto;
}
#instruction {
    padding-top:320px;
}
.hkcma-logo {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 368px;
    height: auto;
}
#instruction-title {
    font-size:83px;
    font-weight: 700px;
    color:var(--burgundy-color);
    margin-bottom: 40px;
}
#instruction-text {
    font-size:28px;
    color:var(----dark-grey-color);
    margin-bottom: 100px;
}
.cube {
    position: absolute;
    width: 190px;
    height: 190px;
    z-index: 6;
    animation: float-sm 1.6s ease-in-out infinite;
}
.cube-1 {
    width: 174px;
    height: 174px;
    top: 1150px;
    left: 590px;
    animation: float-sm 1.65s ease-in-out infinite;
}
.cube-2 {
    width: 280px;
    height: 280px;
    top: 720px;
    left: -40px;
    animation: float-sm 1.55s ease-in-out infinite;
}
.cube-3 {
    width: 190px;
    height: 190px;
    top: 988px;
    left: 64px;
    animation: float-sm 1.5s ease-in-out infinite;
}
.cube-4 {
    width: 262px;
    height: 262px;
    top: 1062px;  
    left: 824px;
    z-index: 1;
}
.p2-panda-stamp {
    position: absolute;
    width: 253;
    height: 269px;
    top: 1480px;
    left: 333px;
    z-index: 3;
    transform-origin: 50% 100%;
    animation: swing infinite 1.6s alternate ease-in-out;
}
.p2-panda-swing {
    position: absolute;
    width: 498px;
    height: 616px;
    top: 1252px;
    left: 516px;
    z-index: 3;
    transform-origin: 90% 0%;
    animation: swing infinite 1s alternate ease-in-out;
}
@keyframes swing {
    from {
        transform: rotate(-6deg);
    }
    to {
        transform: rotate(6deg);
    }
}

@keyframes float-sm {
    0% {
        transform: translate(0,0);
    }
    50% {
        transform: translate(0,-10px);
    }
    100% {
        transform: translate(0,0);
    }
}
@keyframes float {
    0% {
        transform: translate(0,0);
    }
    50% {
        transform: translate(10px,-20px);
    }
    100% {
        transform: translate(0,0);
    }
}
@keyframes float-lg {
    0% {
        transform: translate(0,0);
    }
    50% {
        transform: translate(5px,-40px);
    }
    100% {
        transform: translate(0,0);
    }
}

#quiz {
    padding-top:320px;
}
#question {
    font-family: var(--header-chinese-font);
    font-size:83px;
    font-weight: 700;
    width: 90%;
    color:var(--burgundy-color);
    margin-bottom: 40px;
}
#question span {
    white-space: nowrap;
}
#options {
    /*position: absolute;*/
    width: 100%;
    /*top: 45dvh;*/
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 30px;
    z-index: 99;
}
#man,
#feedback-man,
#man-result {
    position: absolute;
    width: 915px;
    height: 933px;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}
#man img,
#feedback-man img,
#man-result img {
    width: 100%;
    height: auto;
    z-index: 10;
}
.line {
    position: fixed;
    bottom: -1px;
    left: 0;
    width: 100%;
    right: 0;
    height: 20px;
    z-index:1003;
}
#feedback {
    padding-top:320px;
}

#feedback-title {
    font-size: 83px;
    font-weight: 700;
    color: var(--bs-white);
    margin-bottom: 40px;
    width: 84%;
    padding: 60px 10px;
    box-sizing: border-box;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
#feedback-title.correct {
    background-color: var(--sharp-magenta-color);
}
#feedback-title.incorrect {
    background-color: var(--gold-color);
}
.feedback-icon {
    height: 83px;
    width: auto;
    margin-right: 20px;
}
body.english #result-explanation {    
    width: 80%;
    font-size: 36px;
    color: var(--dark-grey-color);
    margin-bottom: 40px;
}
body.chinese #result-explanation {    
    width: 80%;
    font-size: 46px;
    color: var(--dark-grey-color);
    margin-bottom: 40px;
}
#result-explanation span {
    white-space: nowrap;
}

#disclaimer, #quiz-disclaimer {
    position: absolute;
    width: 60%;
    font-size: 28px;
    color: var(--dark-grey-color);
    right: 30px;
    bottom: 60px;
    z-index: 20;
    text-align: left;
    text-shadow: 1px 1px 4px #fff;
}
#btn-next,#btn-home,#btn-home2,#btn-home3,#btn-home4,#btn-home5 {
    z-index: 99;
}
#result {
    padding-top:420px;
}
#thankyou-msg{
    font-size: 83px;
    font-weight: 700;
    width: 90%;
    color: var(--burgundy-color);
    margin-bottom: 40px;
}
#score {
    font-size:83px;
    font-weight: 700;
    width: 90%;
    color:var(--burgundy-color);
    margin-bottom: 40px;
}
#terms {
    font-size: 28px;
    color: var(--dark-grey-color);
    margin-bottom: 40px;
}
#panda-mode {
    font-size:83px;
    font-weight: 700;
    width: 90%;
    color:var(--burgundy-color);
    margin-bottom: 40px;
}
#ad-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-direction: row;
    margin: 40px auto;
}
#qr-code {
    width: 170px;
    height: auto;
}
#btn-oneclick {
    width: 324px;
    height: auto;
}

body.english #instruction-title,
body.english #question,
body.english #options button,
body.english #feedback-title,
body.english #btnStart,
body.english #btn-next,
body.english #btn-home,
body.english #btn-home2,
body.english #btn-home3,
body.english #btn-home4,
body.english #btn-home5,
body.english #score,
body.english #panda-mode {
    font-family: var(--header-english-font);
    font-weight: 700;
}
body.chinese #instruction-title,
body.chinese #question,
body.chinese #options button,
body.chinese #feedback-title,
body.chinese #btnStart,
body.chinese #btn-next,
body.chinese #btn-home,
body.chinese #btn-home2,
body.chinese #btn-home3,
body.chinese #btn-home4,
body.chinese #btn-home5,
body.chinese #score,
body.chinese #panda-mode {
    font-family: var(--header-chinese-font);
    font-weight: 700;
}

body.english #instruction-text,
body.english #result-explanation,
body.english #disclaimer,
body.english  #quiz-disclaimer {
    font-family: var(--body-english-font);
}
body.chinese #instruction-text,
body.chinese #result-explanation,
body.chinese #disclaimer,
body.chinese  #quiz-disclaimer {
    font-family: var(--body-chinese-font);
}

.cover-ad {
    display: none;
}


#btn-home2, #btn-home3, #btn-home4, #btn-home5 {
    display: none;
}
#btn-home-icon {
    position: fixed;
    top: 60px;
    left: 60px;
    cursor: pointer;
    z-index: 99;
    display: none;
    padding: 0;
    font-size: 36px;
    align-items: center;
    justify-content: center;
    min-width: unset;
    padding:8px;
}

#btn-home-icon svg {
    width: 32px;
    height: 32px;
}