@media screen and ( min-width: 212px){
    html {font-size: 32.0048309178744%;}
}
@media screen and ( min-width: 319px){
    html {font-size: 48.158212560386474%;}
}
@media screen and ( min-width: 359px){
    html {font-size: 54.19685990338164%;}
}
@media screen and ( min-width: 383px){
    html {font-size: 57.820048309178745%;}
}
@media screen and ( min-width: 399px){
    html {font-size: 60.235507246376805%;}
}
@media screen and ( min-width: 414px){
    html {font-size: 62.5%;}
}
@media screen and ( min-width: 423px){
    html {font-size: 63.85869565217392%;}
}
@media screen and ( min-width: 479px){
    html {font-size: 72.31280193236715%;}
}
@media screen and ( min-width: 539px){
    html {font-size: 81.3706829468599%;}
}
@media screen and ( min-width: 639px){
    html {font-size: 96.46739130434783%;}
}
@media screen and ( min-width: 640px){
    html {font-size: 96.61835748792271%;}
}

@media all and (orientation : landscape) { 

  h2{color:red;}
  .main-container {
    width: 56.25%;
    display: inline-block;
  }
  .left-side {
    right: 22%;
    width: 15vw;
  }
  .quizzes {
    top: -5rem
  }
  body {
    text-align: center;
  }
  .game-container span {
    font-size: .8rem;
  }
  .game-section .section-head span {
    font-size: 1rem;
  }
} 


@media all and (orientation : portrait){ 

  h2{color:green;}
  .main-container {
    width: 100%;
  }
  .left-side {
    right: 0;
    width: 27vw;
  }
  .quizzes {
    top: -7rem
  }
  .game-container span {
    font-size: 1.2rem;
  }
  .game-section .section-head span {
    font-size: 1.6rem;
  }
} 
  body {
    background: #3d16c6;
  }
  img {
    width: 100%;
  }
  .list-ad {
    max-width: 300px;
    margin: 0 auto;
  }
  .list-ad,
  .content-head-ad {
    text-align: center;
  }
  .left-side {
    position: fixed;
    z-index: 100;
    top: 100px;
  }
  .ad-container {
    background: #1D0B8F;
    margin: 0 17px;
    min-height: 15rem;
    margin-top: 20px;
  }
  .quizzes {
    background: #fff;
    border-radius: 5px;
    margin: 0 17px;
    padding: 0 1rem;
    padding-bottom: 8px;
    position: relative;
  }
  .quizzes .title {
    color: #fff;
    font-size: 1.76rem;
    margin-bottom: 2rem;
    text-align: left;
  }
  .quizzes .title .sign {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: #3CAFFF;
    border-radius: 50%;
    margin-right: .5rem;
  }
  .lists .pure-g {
    display: block;
    padding: 1rem 0 .125rem 0;
    text-decoration: none;
    text-align: left;
  }

  .lists a img.icon {
    border-radius: 10px;
    height: 80px;
    width: 80px;
    min-width: 80px;
    min-height: 80px;
    border: 1px solid #ADB3EA;
    background: url("./images/default.webp") no-repeat;
    background-size:100% 100%;
  }
  .lists a .page-info {
    display: inline-block;
    position: relative;
    padding-left: 9px;
    top: -15px;
    width: calc(100% - 91px);
  }
  .lists a {
    font-size: 12px;
  }
  .lists a h3 {
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #000;
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    padding: 0 13px 0 0;
    min-height: 38px;
  }
  .lists a span.participants {
    margin: 0;
    font-size: 12px;
    color: #454545;
    padding: 14px 13px 0 0;
  }
  .content-head {
    text-align: left;
    padding: 20px 17px 25px 17px;
  }
  .content-head .title {
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-style: italic;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
  }
  .content-head .back {
    display: inline-block;
    float: right;
  }
  .content-head .back img {
    width: 24px;
  }
  .quizze-content,
  .result-loading,
  .result-content {
    margin: 0 18px;
    padding: 17px 0;
    background: #fff;
    border-radius: 5px;
    text-align: left;
  }
  .result-loading,
  .result-content {
    margin-bottom: 20px;
  }
  .question-info,
  .result-info,
  .progress-tip, 
  .progress-container,
  .button-container {
    padding: 0 17px;
  }

  .question-info .pure-g,
  .result-info .pure-g {
    display: block;
    padding: 1rem 0 .125rem 0;
    text-decoration: none;
    text-align: left;
  }

  .question-info img.icon,
  .result-info img.icon {
    height: 80px;
    width: 80px;
    min-width: 80px;
    min-height: 80px;
    background: #EBEBEB;
  }
  .question-info img.icon {
    border: 1px solid #ADB3EA;
    background: url("./images/default.webp") no-repeat;
    background-size: 100% 100%;
    border-radius: 10px;
  }
  .result-info img.icon {
    border-radius: 50%;
  }
  .question-info .page-info,
  .result-info .page-info {
    display: inline-block;
    position: relative;
    padding-left: 9px;
    width: calc(100% - 95px);
  }
  .question-info .page-info {
    top: -20px;
  }
  .result-info .page-info {
    top: -22px;
  }
  .question-info,
  .result-info {
    font-size: 12px;
    color: #454545;
  }

  .question-info h3,
   .result-info h3 {
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #000;
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    padding: 0 13px 0 0;
    min-height: 38px;
  }

  .question-info span {
    margin: 0;
    padding: 14px 13px 0 0;
  }
  .question-desc,
  .result-desc {
    line-height: 2;
    padding-top: 10px;
  }
  .section-title {
    text-align: left;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    padding: 16px 0 16px 20px;
  }
  .progress-tip {
    text-align: right;
    font-weight: 700;
    font-size: 12px;
  }
  progress {
    height: 5px;
    width: 100%;
    background-color: #E8E9EF;
  }

  progress::-webkit-progress-bar {
    background-color: #E8E9EF;
  }

  progress::-webkit-progress-value {
    background-color: #3721BE;
  }
  .question-option {
    padding-top: 37px;
  }

  .question-option .title {
    font-size: 15px;
    font-weight: 700;
    color: #454545;
    line-height: 1.8;
    padding-bottom: 16px;
    padding-right: 17px;
  }
  .question-option .option {
    padding: 10px 0;
    padding-left: 12.5%;
  }
  .question-option .option.checked {
    background: #f5f5f5;
  }
  .question-option .option img {
    width: 16px;
    position: relative;
    top: 2px;
  }
  .question-option .option span {
    font-size: 15px;
    font-weight: 700;
    color: #454545;
    /* padding-left: 18px; */
  }
  .question-index {
    left: 17px;
    position: relative;
    color: #3721BE;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-style: italic;
    font-size: 18px;
    font-weight: bold;
  }
  .button-container {
    padding-top: 38px;
    text-align: center;
  }
  .button {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    border-radius: 5px;
    padding: 14px 0;
  }
  .common-button {
    background: #3721BE;
    color: #fff;
  }
  .result {
    background: #F5F3FF;
    border: 1px solid #E2E0EE;
    color: #BAB8D1;
  }
  .result.ready {
    background: #FFAE00;
    border: 1px solid #9F6900;
    color: #1D0B8F;
  }
  .common-display-none {
    display: none;
  }
  .share-platform {
    min-height: 70px;
  }
  .share-container p.title {
    color: #454545;
    padding-left: 17px;
    font-size: 12px;
    margin: 0;
    margin-top: 54px;
  }
  .share-platform a {
    display: block;
    float: left;
    width: 20%;
    overflow: hidden;
  }
  .share-platform p.icon {
    text-align: center;
  }
  .share-platform p.icon img {
    width: 8.3vw;
    height: 8.3vw;
    max-width: 60px;
    max-height: 60px;
  }
  .result-loading p {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }
  .result-loading p span {
    color: #3721BE;
  }