@property --quizzbox_fading_angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}

#question_pics {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 1em;
  position: relative;
}

.question_pic_container {
  position: relative;
  /*border: 0.1em solid white;*/
  aspect-ratio: 1/1;
  width: calc( 47% - 0.7em );
  margin:0.5em;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  --qpc_color:var(--theme-color);
  filter: drop-shadow(0px 0px 8px var(--qpc_color));

  --qpcg_angle: 1deg;
  --qpcg_scale: 0.98;
  animation: question_pic_container_groovy var(--qpcg_duration) linear infinite;
}
@keyframes question_pic_container_groovy{
  0%{
    transform: rotate(0deg) scale(1);
  }
  12.5%{
    transform: rotate(var(--qpcg_angle)) scale(var(--qpcg_scale));
  }
  25%{
    transform: rotate(calc(var(--qpcg_angle) * 2)) scale(1);
  }
  37.5%{
    transform: rotate(var(--qpcg_angle)) scale(var(--qpcg_scale));
  }
  50%{
    transform: rotate(0deg) scale(1);
  }
  62.5%{
    transform: rotate(calc(var(--qpcg_angle) * -1)) scale(var(--qpcg_scale));
  }
  75%{
    transform: rotate(calc(var(--qpcg_angle) * -2)) scale(1);
  }
  87.5%{
    transform: rotate(calc(var(--qpcg_angle) * -1)) scale(var(--qpcg_scale));
  }
  100%{
    transform: rotate(0deg) scale(1);
  }
}

.question_pic_timer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: -1 !important;
  user-select: none;
  cursor: pointer;

  --quizzbox_timer_color: var(--theme-color);

  /* --question_pic_countdown:5000ms; */ /* value set in js */
  /* --question_pic_uncover:500ms; */ /* value set in js */

  /* Rotation gradient */
  /* Change "100deg" to whatever to affect grandient transparency */
  /* Don't forget to change also keyframe below */
  background: conic-gradient(
    from 360deg,
    var(--quizzbox_timer_color) 0deg,
    var(--quizzbox_timer_color) calc( var(--quizzbox_fading_angle) + 0deg),
    transparent calc( var(--quizzbox_fading_angle) + 20deg)
  );
}

/* Uncovering gradient  */
.question_pic_timer_uncovering{
  animation-play-state: running;
  animation: question_pic_timer_cc_fade var(--question_pic_countdown) linear forwards;
}
.question_pic_timer_uncovering_paused{
  animation-play-state: paused;
}
@keyframes question_pic_timer_cc_fade {
  0% { --quizzbox_fading_angle: 360deg;opacity:1; }
  99.99% { --quizzbox_fading_angle: -20deg;opacity:1; } /* sens antihoraire */
  100%{--quizzbox_fading_angle: -20deg;opacity:0; /* to trigger uncovering */
  }
}
.question_pic_container[uncovered="true"] .question_pic_timer {
  background: transparent;
}

.question_pic_cover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 90%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  font-size:2em;
  opacity: 1;
}
.question_pic_cover div{
  animation: text_breathe 2s ease infinite;
}

.question_pic_answer{
  width: 100%;
  height: 100%;
  transition: filter 1s ease;
  opacity: 0;
}

.question_pic_cover, .question_pic_answer{
  transition: opacity var(--question_pic_uncover) ease;
}

@keyframes text_breathe{
  0%{
    transform:scale(1.0);
  }
  50%{
    transform:scale(1.5);
  }
  100%{
    transform:scale(1.0);
  }
}

/* ------------------------ */
/* ZOOM */

#question_pic_zoom_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#question_pic_zoom_wrapper{
  width: 90%;
  aspect-ratio: 1/1;
}
#question_pic_zoom {
  width: 100%;
  height:100%;
  --qpcg_angle: 1deg;
  --qpcg_scale: 0.98;
  animation: question_pic_container_groovy var(--qpcg_duration) linear infinite;
  background: white;
}

/* ------------------------- */
/* Buttons */

#question_next {
  max-width: 100%;
  position: relative;
  outline: 1px solid var(--theme-color);
  margin: 0.5em;
  width: auto;
}
#question_next_bg{
  width: 0%;
  background: rgba(0,255,0,0.03);
  top: 0;
  left: 0;
}
.question_next_delay_running{
  animation-play-state: running;
  animation: qndr_filling var(--question_next_delay) linear forwards;
}
@keyframes qndr_filling{
  from{ width: 0%;}
  to{ width: 100%;}
}
.question_next_delay_stop{
  animation-play-state: paused;
}
#question_btns{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.question_btn{
  font-size:3em;
  width:2em;
  color:#2b2b2b;
  filter: drop-shadow(0px 0px 1px var(--theme-color)) drop-shadow(0px 0px 1px var(--theme-color)) drop-shadow(0px 0px 1px var(--theme-color));
}

/* ------------------------- */
/* Question summary */

.edition_menu {
  height: 90%;
}
#questions_list {
  padding: 0.5em 0em 1em 0.5em;
  height: 85%;
  overflow: scroll;
  scroll-behavior: smooth;
  margin-top: 0.5em;
}
.questions_button {
  position: relative;
  font-size: 2em;
  margin: 0.5em 1em;
  width: 6em;
  height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  overflow: hidden;
  filter: drop-shadow(0px 0px 0.15em var(--theme-color));
  background:black;
}
.bg.questionButtonBg {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.question_parameter_choice_container{
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.question_parameter_choice {
  padding: 0.5em;
}
.question_parameter_choice_selected{
  outline:1px solid yellow;
}


#tips_zone1{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
}
.tipType{
  padding-right: 0.5em;
  text-decoration: underline;
  font-weight: bold;
  white-space: nowrap;
}
.tip{
  text-transform: capitalize;
  /*border: 1px dotted var(--theme-color);*/
  display: flex;
  justify-content: start;
  align-items: start;
  padding:0.5em;
  font-size: 0.8em;
  font-family: Next_Sunday;
}


.question_pic_unzoom_icon{
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1em;
}
.question_pic_unzoom_icon_content{
  filter: drop-shadow(0px 0px 0.0em);
}
.question_pic_unzoom_icon_glowing{
  animation: qpui_glow 2s ease infinite;
}
@keyframes qpui_glow{
  0%{filter: drop-shadow(0px 0px 0.0em) drop-shadow(0px 0px 0.0em) drop-shadow(0px 0px 0.0em) ;}
  50%{filter: drop-shadow(0px 0px 0.2em) drop-shadow(0px 0px 0.2em) drop-shadow(0px 0px 0.2em) ;}
  100%{filter: drop-shadow(0px 0px 0.0em) drop-shadow(0px 0px 0.0em) drop-shadow(0px 0px 0.0em) ;}
}