/* QUIZ
/////////////////////////////////////////////////////// */

body {
    counter-reset: points; }

.quiz {
    width: 55vw;
    height: 85vh;
    left: 50%;
    perspective: 500px;
    transform-style: preserve-3d;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    position: relative;  }
  
.quiz__container {
    width: 100%;
    height: 100%;
    transform: 
    rotateY(calc(var(--offset) * 45deg)) 
    scaleY(calc(1 + var(--abs-offset) * -0.4))
    translateZ(calc(var(--abs-offset) * -30rem))
    translateX(calc(var(--direction) * -5rem));
    position: absolute;
    transition: all 0.3s ease-out;
    opacity: var(--opacity); }
  
.slide { 
    width: 100%;
    height: 100%;
    padding: 0 3em;
    border-radius: var(--border-radius); 
    border: var(--border-solid);
    border-color: var(--white);
    background: var(--orange);
    transition: all 0.3s ease-out; }

.slide__head {
    width: auto;
    top: 1.5em;
    left: 1.5em;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700; 
    font-size: 22px;
    line-height: 1em;
    letter-spacing: -0.0125em;
    text-align: center;
    position: absolute; }

.slide__body {
    width: 100%;
    height: auto;  
    top: 46%; 
    opacity: var(--active);
    transition: all 0.3s ease-out;
    position: relative;
    -webkit-transform: translateY(-54%);
            transform: translateY(-54%); }

.slide__body--question {
    width: 100%;
    height: auto; 
    margin-bottom: 10vh;
    position: relative; }

.slide__body--answer {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px 20px;
    padding: 0;
    position: relative; }

.slide__body--answer li {
    width: 100%;
    height: auto;
    position: relative; }

label {
    width: 18vw;
    border-radius: var(--border-radius-buttons);
    border: var(--border-solid);
    border-color: var(--white);
    background: var(--orange);
    position: relative;
    float: left; }

.slide__body--answer li:nth-child(1) label,
.slide__body--answer li:nth-child(3) label {
    float: right; }

label .alphabet::after {
    content: ":";
    margin-right: 14px; }

label:hover {  
    cursor: pointer; }

.prev--slide,
.next--slide {
    width: 10vw;
    bottom: 6vh;
    border-radius: var(--border-radius-buttons);
    border: var(--border-solid);
    position: absolute;
    z-index: 2;
    cursor: pointer; }

.prev--slide {
    left: calc(50% - 10vw - 10px); }

.next--slide {
    right: calc(50% - 10vw - 10px); }

/* CHEKED
/////////////////////////////////////////////////////// */

.icon {
    width: 22px;
    height: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    top: 54%;
    right: 40px;
    color: transparent;
    -webkit-transform: translateY(-46%);
            transform: translateY(-46%);
    position: absolute; }

[type=radio] {
    width: 1px;
    height: 1px;
    top: 30px;
    left: 30px;
    position: absolute;
    z-index: -9999999;
    cursor: default; }

/* CHECKED TRUE FALSE */

.radio--input--true:checked {
    counter-increment: points;}

.radio--input--true:checked+label .icon::before,
.radio--input--false:checked+label .icon::before {
    width: 100%;
    font-size: 6vw;
    line-height: 0;
    text-align: center;
    top: -3px;
    right: 1vw;
    position: absolute; }

.radio--input--true:checked+label,
.radio--input--true:checked+label .alphabet,
.radio--input--true:checked+label .icon {
    color: var(--true);
    border-color: var(--true); }

.radio--input--false:checked+label,
.radio--input--false:checked+label .alphabet,
.radio--input--false:checked+label .icon {
    color: var(--false);
    border-color: var(--false); }

/* CHECKED FALSE */

.radio--input--false:checked+label .icon::before {
    content:"X"; }

/* CHECKED TRUE */

.radio--input--true:checked+label .icon::before {
    content: "\2713"; }

/* LES NO CHEKED and CHEKED */

input:valid+label {
    pointer-events: none; }

/* HOVER
/////////////////////////////////////////////////////// */

.prev--slide:hover,
.next--slide:hover,
input:invalid+label:hover {
    border: var(--border-dashed);}

/* LAST SLIDE QUIZ
/////////////////////////////////////////////////////// */

.quiz-over  {
    width: 100%;
    height: auto;
    top: 48%;
    -webkit-transform: translateY(-52%);
        -ms-transform: translateY(-52%);
         -o-transform: translateY(-52%);
            transform: translateY(-52%);
	position: relative; }

.quiz-score {
    width: 100%;
    height: auto;
    margin: 1.5em auto;
    position: relative; }

.quiz-score p::after {
    margin-left: 15px;
    content: counter(points) "0 de 50"; }

.play-again {
    width: auto;
	left: 50%;
	-webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
    position: relative; }

.play-again:hover {
    text-decoration: underline; }

/* QUIZ
/////////////////////////////////////////////////////// */

.slide__body--question h3 {
    font-family: "Style Script", cursive;
    font-weight: 400; 
    font-size: 4.25vw;       
    line-height: 1em; 
    letter-spacing: -0.0125em;
    text-align: center;
    color: var(--white) }

label {
    font-family: "Inter", sans-serif;
    font-weight: 800; 
    font-size: 1.25vw;
    line-height: 1em;
    letter-spacing: -0.025em;
    text-align: center;
    padding: 1vw 0;}

.prev--slide p,
.next--slide p,
.button-words {
    font-family: "Inter", sans-serif;
    font-weight: 600;
	font-size: 1vw;    
	line-height: 1em; 
    letter-spacing: -0.0125em;
	text-align: center; 
    padding: 16px 0; }

.quiz-over p {
    font-family: "Inter", sans-serif;
    font-weight: 800; 
    font-size: 2vw;
	line-height: 1.250em; 
    letter-spacing: -0.0125em;
    text-align: center; }

.quiz-score p {   
    font-family: "Style Script", cursive;
    font-weight: 400; 
	font-size: 5.5vw;
    color: var(--green); }
  
/* STYLE
/////////////////////////////////////////////////////// */