/*badge*/
.badge {
    padding-top: 20pt;
}
.badge h1 {
    line-height: 2em;
}
.badge .badge_logo {
    margin: 0 auto 0 auto;
    width: 70%;
    aspect-ratio: 1/1;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
}
.badge .badge_logo img {
    margin: 10%;
}

.badge .badge_user::first-line { color: #999; line-height: 2em;}
.badge .badge_user img {
    vertical-align: middle;
    height: 32pt; border-radius: 100px;
    margin-right: 10px;
}

/* career */
.career{margin:3%; margin-top: 5%;}
.career .cover {
    color: white;
    border-radius: 5pt; overflow: hidden;
    position: relative;
}
.career .cover img { width: 100%; }
.career .cover .career_info { 
    position:absolute;
    left: 0; bottom: 0;
    padding: 5%; text-align: left;
    margin: 5%;
    border-radius: 8pt;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.career .cover .career_info h2 { text-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }
.career .cover .career_info small {opacity: 0.8;  line-height: 1.4em; display: block; margin-top: 10pt;}
.career .cover .career_reward { font-weight: 500; text-align: right; margin-top: 20pt;}
.career .cover .career_reward i { margin-right: 10pt;}

/* module */
.module{margin:3%; margin-top: 5%;}
.module .cover {
    color: white;
    border-radius: 5pt; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.module .cover img { width: 100%; }

.module .cover .module_info { 
    background-color: #333;
    padding: 5%; text-align: left;
    margin-top: -1%;
    position: relative;
}
.module .cover img.banner { 
    position: absolute; top:-100pt; left: 20pt; 
    height: 80pt; width: auto;
}

.module .cover .module_info h2 { text-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }
.module .cover .module_info small {opacity: 0.8;  line-height: 1.4em; display: block; margin-top: 10pt;}
.module .cover .module_reward { font-weight: 500; text-align: right; margin-top: 20pt;}
.module .cover .module_reward i { margin-right: 10pt;}


/* predict */
.predict{margin:3%; margin-top: 5%;}
.predict .cover,
.predict .winners>div {
    border-radius: 5pt; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    margin-bottom: 4pt;
    background-color: #333;
    color: white;
}
.predict .cover .cover_img { width: 100%; }

.predict .cover .predict_info { 
    padding: 5%; text-align: left;
}
.predict .cover .predict_info .anouncement { text-align: right; }
.predict .cover .predict_info .prize { font-size: 90%; margin-top: 8pt; }
.predict .cover .predict_info .jackpot { 
    margin-bottom: 5pt; 
    text-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.counter { font-family:monospace; font-weight: 700;}

.predict .winners { text-align: left;}
.predict .winners .users { padding:10pt }
.predict .winners .reff { color: #999; font-size: 90%; padding-top: 10pt; text-align: right;}


.predict .winners>div img { vertical-align: middle; border-radius: 100pt; margin: 0 5pt 0 5pt }
.predict .winners .users img { width: 32pt; height: 32pt; }
.predict .winners .reff img {  width: 12pt; height: 12pt; }

.predict .winners>div span { font-weight: 700; padding: 10pt; }
.predict .winners .users span { font-size: 14pt; float: right; line-height: 1em;}
.predict .winners .reff {margin-right: 10pt; line-height: 1em; font-size: 9pt; font-weight: 300; float: none;}

/*quiz result*/
.q_result {margin:3%; margin-top: 5%;}
.q_result section {
    text-align: left;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    padding-bottom: 10pt;
}
.q_result section .cover {
    background-size: cover;
    line-height: 1.6em;
    width: 100%;
    height: 330px;
    color: white;
    text-shadow: 0px 0px 15px black;
}
.q_result section .cover .overlay { 
    width: 100%; height: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
}
.q_result section .cover h1 { padding: 5% 20px 0 5%; font-size: 150%; line-height: 1.1em; font-weight: 500; }
.q_result section .cover p { padding: 0 5% 0 5%; font-size: 80%; font-weight: 300;}

.q_result section .text { text-align: center; font-weight: 300; margin: 5%; padding: 10px 0 20px 0; line-height: 2.8em; border-bottom: 1px solid #DDD;  }
.q_result section .text b { vertical-align: middle; font-weight: 700; color: #00b400; font-size: 260%;}
.q_result section .text img { 
    vertical-align: middle;
    background-color: white;
    padding: 1px; 
    border-style: solid; 
    border-width: 3px;
    border-radius: 50%;
    width: 1.3em;
    height: 1.3em;
    object-fit: cover;
    margin: 0 5pt 0 0;
}
.q_result section .date { font-weight: 300; margin: 5%; padding: 20px 0 20px 0; font-size: 80%; color:#666 } 
.q_result section .date img { height: 1.4em; float: right; vertical-align:middle; }

.q_result section a {
    display: block;
    background-color: #00b400;
    color: white;
    text-align: center;
    text-decoration: none;
    line-height: 3.6em;
    margin: 5%;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    border-radius: 8px;
    font-weight: 500;
}

.q_result section a:hover {
    transform: scale(1.0.5);
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


header.quiz { 
  text-align: left; width: 450pt; margin: 8pt auto 4pt auto; 
  min-height: 42pt;
  padding: 10pt; border-radius: 6pt;
}
header.quiz .creator { text-align: left; margin-top: 1em;}
header.quiz h1 { height: 1.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header.quiz img { float: left;  height:42pt;  margin:0 4pt 0 10pt; border-radius: 6pt }


/* user */
.user_view {
    margin-top: 00px;
    max-width: 600pt;
    aspect-ratio: 1 / 1;
    position: relative; /* If you want text inside of it */
    overflow: hidden;
    margin: 1% auto 1% auto;
    border-radius: 2%;
    background-color: black
}
.user_view .background  {
    position: absolute;
    top:-10%;
    left: -10%;
    filter: blur(20px);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    opacity: 0.4;
    height: 160%;
    width: 160%;
    background-size: 100% 100%;
}
.user_view .avatar {
    position: absolute;
    top:5%; left: 5%;
    height: 35%;
    width: 35%;
    border-radius: 50%;
    border: 2px solid white;
    background-size: 100% 100%;
    box-shadow: 0.2em 0.2em 1em rgba(0,0,0,0.6);
}
.user_view .details {
    position: absolute;
    top:50%;
    left: 5%;
    width:60%;
    color: white;
    overflow: hidden;
    line-height: 1.4em;
    text-align: left;
}
.user_view .details .name {
    font-size: 200%;
    line-height: 1.2em;
    margin-bottom: 12pt;
}
.user_view .details .id {
  margin-bottom: 12pt;
}

.user_view .details .bio {
  display: block;
  line-height: 1.2em;
}

.user_view .user-data {
    margin: 0; padding: 0;
    position: absolute;
    top:5%;
    right:7%;
    color: white;
    line-height: 1.6em; 
    list-style: none;
    width: 25%;
    text-align: right;
    font-size: 90%;
}

.user_view .user-data li { display: block; margin-bottom: 12pt;  }
.user_view .user-data li i { display: block; color: rgba(255, 255, 255, 0.7); font-style: normal; }
.user_view .user-data li b { display: block; font-size: 120%}








/* vote share*/
.vote_share { margin: 1% auto 1% auto; max-width: 600pt; }
.vote_share .post_preview{ margin: 0px; }

/* quiz */
.quiz .main_q_view {
  flex: 1; 
  background-size: cover;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap:10pt;
  overflow: hidden;
}

.quiz .carusel { 
  position: relative; 
  width: 340pt;
  margin-top: 20pt;
  margin-bottom: 20pt;
  height: 350pt;
}

.quiz .carusel .post {
  position: absolute;
  top:0; left: 0;
  width: 100%;
  border-radius: 5pt;
  padding: 1px;
  box-shadow: 0 19pt 38pt rgba(0,0,0,0.30), 0 15pt 12pt rgba(0,0,0,0.22);
}

.quiz .dots {
  width: 100%; text-align: center;
  color: #EEE;
  margin: 40pt 0 20pt 0;
}
.quiz .dots span { 
  font-size:0pt;
  border-radius: 50pt;
  margin: 6pt;
  background-color: #eee;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  padding:4pt
}
.quiz .dots span.big { padding: 8pt; }
.quiz .dots span.red_dot { background-color: lightsalmon; }
.quiz .dots span.green_dot { background-color: lightgreen; }

.quiz .squere { 
  aspect-ratio : 1 / 1;
  background-size: cover;
  border-radius: 4pt;
}

.quiz .quad { display: flex; flex-wrap: wrap;}
.quiz .quad>div {
  aspect-ratio : 1 / 1;
  background-size: cover;
  min-width: 40%;
}

.quiz .double-horizontal { flex-direction: column; display: flex; }
.quiz .double-horizontal>div {
  aspect-ratio : 2 / 1;
  min-height: 200px;
  background-size: cover;
  width: 100%
}

.quiz .double-vertical { flex-direction: row; display: flex;}
.quiz .double-vertical>div {
  aspect-ratio : 1 / 2;
  background-size: cover;
  width: 50%
}

.quiz .triple-horizontal { flex-direction: column; display: flex; }
.quiz .triple-horizontal>div {
  aspect-ratio : 3 / 1;
  background-size: cover;
  width: 100%
}

.quiz .triple-vertical { flex-direction: row; display: flex; }
.quiz .triple-vertical>div {
  aspect-ratio : 1 / 3;
  background-size: cover;
}

.quiz .triple-horizontal, 
.quiz .triple-vertical,
.quiz .double-vertical ,
.quiz .double-horizontal,
.quiz .quad,
.quiz .squere { 
  margin: 4pt; gap:4pt;
}

.quiz .triple-horizontal>div, 
.quiz .triple-vertical>div,
.quiz .double-vertical>div,
.quiz .double-horizontal>div,
.quiz .quad>div,
.quiz .squere>div { 
  border-radius: 6pt;
  flex-grow: 1;
  flex-basis: 0;
}

.quiz .image-tags { 
  display: flex;  
  justify-content:center;
  align-items:flex-end;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  cursor: pointer;
}
.quiz .image-tags:hover { 
  box-shadow: 
  inset 0 0 0 2pt rgba(0,90,0,1),
  inset 0 0 0 3pt rgba(255,255,255,1),
  inset 0 0 0 500pt rgba(255,255,255,0.2);
}

.quiz .image-tags:hover span { 
  background-color: rgba(50,150,50,0.70);
}

.quiz .image-tags span { 
  color:white; 
  text-align: center;
  background-color: rgba(0,0,0,0.7); backdrop-filter: blur(8pt);  
  border-radius: 6pt 6pt;
  margin: 5pt 5pt 20pt 5pt;
  font-size: 90%;
  padding: 3pt 12pt 2pt 12pt;
  line-height: 1.5em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.quiz .image-tags span::first-line { font-size: 80%;}

.quiz .single-image-tags { 
  display: flex;  
  justify-content:center;
  align-items:flex-end;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.quiz .single-image-tags span {
  text-align: center;
  color:white; 
  background-color: rgba(0,0,0,0.7); backdrop-filter: blur(8pt);  
  border-radius: 6pt 6pt;
  margin: 5pt 5pt 30pt 5pt;
  font-size: 75%;
  padding: 3pt 12pt 2pt 12pt;
  cursor: pointer;
  line-height: 1.5em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.quiz .single-image-tags span:hover { 
  background-color: rgba(50,150,50,0.70);
}



.quiz .text-ansers {
  aspect-ratio: 1 / 1;
  color: white;
  display: flex;
  justify-content:right;
  align-items:center
}
.quiz .text-ansers ul {
  background-color: rgba(0,0,0,0.7);
  backdrop-filter: blur(8pt);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 6pt 0 0 6pt;
  border-right: none;
  max-width: 50%;
  min-width: 20%;
  list-style-type: none;
  margin: 0; padding: 0;
}
.quiz .text-ansers ul li { 
  text-align: left;
  border-top: 1pt solid rgba(255,255,255,0.3);
  font-size: 60%;
  padding: 12pt 20pt 12pt 12pt;
  line-height: 1.4em;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  font-weight: 300;
}
.quiz .text-ansers ul li::first-line { line-height: 1.3em; font-size: 160%; font-weight: 300;}
.quiz .text-ansers ul li:first-child { border:none}
.quiz .text-ansers ul li:hover { background-color: rgba(50,150,50,0.70); }

.quiz .quiz-name {padding: 10pt; font-weight: 300; font-size: 60%; border-bottom: 1pt solid rgba(0,0,0,0.22);}
.quiz .post-title { padding: 10pt; font-weight: 400; }
.quiz .progress { padding: 10pt; font-weight: 100; font-size: 50%; color:grey}

.quiz .single-image-tags span,
.quiz .image-tags span,
.quiz .text-ansers ul li {
  text-shadow: 0 0 8pt rgba(0,0,0,0.7);
}

.quiz footer {
  flex:0;
  text-align:  left;
  padding: 20pt;
  font-weight: 300;
  color: #666;
}

.quiz .lottie {
  position: fixed;
  z-index: 5;
  top:calc(36vh - 100pt );
  left: calc(50vw - 100pt);
  margin: auto;
}
.quiz #lottie_player {
  width: 200pt; height: 200pt;
}

.quiz .popup {
  z-index: 10;
  position: fixed;
  top:-700pt;
  left: calc(50vw - 150pt);
  width: 300pt;
  background-color: white;
  color: black;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  text-align: center;
}

.quiz .popup h3 { font-weight: 300; font-size: 150%; padding: 10pt;}
.quiz .popup .sub-title {  padding-top: 25pt; display: block; }
.quiz .popup a.button {cursor: pointer; display: block; padding: 5pt; padding-bottom: 20pt; font-weight: 500;}
.quiz .popup a.button:hover { text-decoration: underline;}

.quiz .popup .popup-store-buttons { display: block; text-align: center; padding: 10pt;}
.quiz .popup .popup-store-buttons img {cursor:pointer; height: 40pt;}

@media screen and (orientation:portrait) {

header.quiz { 
width: calc( 100% - 20pt ); margin: 0 0 4pt 0; 
  min-height: 26pt;
}
header.quiz img { height: auto; width: 100%; margin: 0 0 1em 0;}

  .quiz .carusel { 
    width: 90vw;
    margin-top: 4vh;
  }
  .quiz .popup { width: 70vw; left: 15vw; }
  .quiz .popup a.button { 
    padding: 5pt;
    font-weight: 300; 
    color: white;
    background-color: #00BF40;
    border-radius: 12pt;
    margin: 20pt;
    line-height: 2.4em;
    text-shadow: 0 0 30pt green;
  }
  .quiz .popup a.button:hover { text-decoration: none; background-color: green; }

  .user_view, .vote_share 
  { margin: 1%;}
}

.quiz .tutorial_holder { 
  aspect-ratio : 2 / 1.1;
  overflow: hidden; width: 100%; position: relative;
}
.quiz .tutorial {
  position: absolute;top:0; left: 0;
  display: flex;
  gap: 4pt;
  margin:1%;
  width: 98%;
  height: 95%;
  text-align: center;
}

.quiz .tutorial>div:first-child{ 
  background-image: url('/gfx/tutorial2.jpg');
  background-color:teal;
}
.quiz .tutorial>div {
  background-image: url('/gfx/tutorial1.jpg');
  background-size: cover;
  flex-grow: 1;
  flex-basis: 0;
  background-color: #00BF40;
  border-radius: 6pt;
  padding-bottom: 10pt;
}
.quiz .tutorial_holder .tutorial-lottie {
  position: absolute; top:0pt; left:0;
  width: 50%;
  transition: all 0.25s cubic-bezier(.25,.1,.25,1);
}
.quiz .tutorial_holder .tutorial-lottie.reversed {
  left:50%
}

.quiz .big-shadow {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22),
  0 0 2000pt 2000pt rgba(0,0,0,0.4);
}


.quiz_preview { 
  text-align: left;
  border-top: 1px solid #889;
  padding: 0;
}
.quiz_preview article {
  clear: both;
  min-height: 80pt;
  border-bottom: 1px solid #DDE;
  padding: 10pt;
}

.quiz_preview h3 { font-weight: 400; font-size: 14pt; line-height: 1.1em; padding-bottom: 4pt;}
.quiz_preview img { float: left; height: 80pt; width: 80pt; object-fit: cover; border-radius: 5pt; margin-right: 10pt ;}
.quiz_preview a { text-align: right; display: block;}


.clicky { cursor: pointer;}
.clicky a { font-weight: 400;}
.clicky:hover a { text-decoration: underline;}
.clicky>img { transition: all 0.3s cubic-bezier(.25,.8,.25,1);}
.clicky:hover>img { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
.clicky small { line-height: 16pt; display: flex;}
.clicky small>img  { height: 12pt; width: 12pt; border-radius: 12pt; margin: 2pt 4pt 2pt 0;}