body{font-size:17px;}
body:before,body:after{width:100%;height:100%;position:fixed;top:0;left:0;content:'';}
body:before{background:rgba(0,0,0,0.2);z-index:1;}
body:after{background-image:url(../imgs/quiz/sports-equipment-d.webp);background-repeat:no-repeat;background-position:center;background-size:100% auto;z-index:0;}
header{margin-bottom:1em!important;}
canvas{z-index:100000000000;}

#brand,span.copy-link-icon,.toggle-btn{line-height:1.4;}
#brand,span.copy-link-icon{font-size:0.9em;}
.toggle-btn,span.span.copy-link-icon{top:0.8em;}

#wrapper{display:flex;align-items:center;}
.sub{font-size:1.4em;font-weight:500;}
.tagline{font-size:1.2em;margin-bottom:0.8em;width:auto;font-weight:700;color:var(--theme-ui-colors-main);display:inline-flex;align-items:center;position:relative;background:#fff;}
.tagline:before,.tagline:after{width:8px;height:8px;border-radius:50%;margin:0.2em 0.4em;background:var(--theme-ui-colors-main);content:'';display:inline-block;}
.btn-text,.btn-main{padding:0.4em 1em;margin:0.6em auto;border-radius:50px;color:#fff;display:table;}
.btn-text{background:var(--theme-ui-colors-secondary);}
.btn-main{margin-top:0!important;font-weight:700;font-size:1.2em;background:var(--theme-ui-colors-main);}

#quiz-form,#result-content{background:#fdffea;color:#000;}
#quiz-container{position:relative;margin:1em auto;z-index:10;border-radius:0.8em;overflow:hidden;background:none;backdrop-filter:blur(1em);color:#fff;border:2px solid rgba(255,255,255,0.3);display:flex;align-items:center;}
.question-card{}
#current-question-card{padding:1.2em;transition:opacity 0.1s ease-in-out;}
.option-letter{width:30px;height:30px;margin-right:0.4em;font-weight:900;border:1px solid #000;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:0.5s;}
.quiz-option{margin:0!important;border-radius:0.4em;}
.quiz-option:hover{color:#000;background:#fff;}
.quiz-option:hover .option-letter{background:var(--theme-ui-colors-main);border-color:transparent;color:#fff;}
.quiz-option input[type="radio"]{display:none;}
.quiz-option label{padding:0.4em;transition:all 0.2s ease-in-out;cursor:pointer;display:flex;align-items:center;@apply flex items-center p-4 bg-white border border-gray-200 rounded-xl shadow-sm hover:bg-emerald-50 transform;}
.quiz-option label .text-base{line-height:1.3;}

.question-card h3{margin-bottom:0.6em;color:#000;display:flex;line-height:1.3;align-items:center;}
.question-card h3 em{width:40px;height:40px;margin-right:0.4em;font-weight:900;background:var(--theme-ui-colors-main);color:#fff;display:inline-flex;border-radius:50%;justify-content:center;align-items:center;transition:0.5s;}
.question-card h3 span{font-size:1.4em;}
.desc{text-align:left;}
.quiz-option .selected{@apply bg-emerald-100 border-emerald-600 ring-4 ring-emerald-300 text-gray-900 font-bold shadow-md scale-[1.01];}
#progress-bar{background:var(--theme-ui-colors-main)!important;}
.option-letter{color:#000;}
.quiz-option .selected .option-letter{@apply bg-emerald-700;}
#status-message{margin:0 auto 0.4em auto;}
#progress-indicator{padding:0 1em;}
#progress-track{background:var(--theme-ui-colors-secondary);}
#status-message{color:#000;}

#result-area,#result-content{padding:0;}
#result-content{overflow:hidden;padding:0;}
#result-content h2{font-size:1.2em;line-height:1.4;}
#result-content h3{line-height:1.4;margin-bottom:0.4em;}
#result-content h3 em,#result-content h3 span{display:block;line-break:1.4;}
#result-content h3 em{color:var(--theme-ui-colors-main);}
#result-content h3 .en{font-size:0.5em;text-transform:uppercase;font-weight:500;}
#result-content .capsule{width:100%;padding:1em 2em;margin:0;display:flex;align-items:center;}
#result-content .capsule .capsule-header{width:35%;text-align:left;}
#result-content .capsule .desc{width:65%;}

#Team.capsule{width:100%;padding:1em 2em;margin:0 auto;display:flex;align-items:center;}
#Team .capsule-img{width:40%;display:flex;position:relative;}
#Team img{width:100%;height:fit-content;}
#Team .capsule-detail{width:100%;padding:0 1em;text-align:left;}
#Team .capsule-logo{width:160px;margin:0 auto 0.6em auto;display:block;}
#Team .img-label{padding:0.6em 0.8em;font-size:0.9em;bottom:4em;color:#fff;position:absolute;backdrop-filter:blur(0.6em);-webkit-backdrop-filter:blur(0.6em);-moz-backdrop-filter:blur(0.6em);-ms-transform:translate(-50%, 0);transform:translate(-50%, 0);white-space:nowrap;font-weight:500;}
#Team .sub{font-size:1em;font-weight:normal;}

@media screen and (min-width:1000px){
#quiz-container{display:flex;}
#current-question-card{padding:3em 2em;}
header{width:40%;}
#quiz-form,#result-area{width:60%;}
.quiz-option{padding:0 0 0 3em;}
.btn-text{font-size:1em;}
}

@media screen and (min-height:500px) and (max-height:900px) and (orientation:landscape){
#wrapper{display:block;height:100vh;}
#quiz-container{display:flex;margin:10% auto;}
}

@media screen and (min-width:320px) and (max-width:900px){
body:after{background-image:url(../imgs/quiz/sports-equipment-m.webp);}
#wrapper{padding:1em;height:100%}
.sub{font-size:1.2em;}
.tagline{font-size:1em;margin-bottom:0.6em;}
#quiz-container{padding:1em 0 0 0;margin:4em auto;top:auto;left:auto;transform:none;position:relative;display:block;}
.question-card h3 span{font-size:1.3em;}
#result-content .capsule{display:block;}
#result-content .capsule .capsule-header{text-align:center;}
#result-content .capsule .capsule-header,#result-content .capsule .desc{width:100%;}
#Team .capsule-detail{padding:0;}
}