@import url(
    'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'
);


body {

    background-color: #000000;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    vertical-align: baseline;

}


#container {

    width: 100%;
    /*height: 100vh;¨*/

    display: flex;

    align-items: center;
    justify-items: center;

}


#holder {

    width: 870px;
    height: 652px;

    display: block;

    position: relative;

    margin: 0 auto;

    background-color: #ffffff;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}


#background {

    width: 870px;
    height: 652px;

    z-index: 1;

    position: absolute;

}


#background-02 {

    width: 870px;
    height: 652px;

    z-index: 2;

    position: absolute;

}



.txt-instructions {

    display: block;

    position: absolute;

    width: 350px;

    height: auto;

    top: 114px;

    left: 260px;

    color: #9f007f;

    font-family: 'Lato', sans-serif;

    font-size: 18px;

    z-index: 2;

}


.container-form {

    background-color:
        rgba(255,255,255,0.5);

    box-shadow:
        0 4px 10px
        rgba(0,0,0,0.1);

    border-radius: 8px;

    position: absolute;

    width: 765px;

    height: 425px;

    top: 182px;

    left: 52px;

    z-index: 2;

    overflow-y: auto;

    overflow-x: hidden;

}


::-webkit-scrollbar {

    width: 10px;

}


.question {

    color: #751b80;

    font-family: 'Lato', sans-serif;

    font-size: 18px;

    font-weight: bold;

}


.answer {

    color: #4c4c4c;

    font-family: 'Lato', sans-serif;

    font-size: 14px;

}

ul {
    padding-left: 30px;
}

li {

    list-style: none;

}


button {

    border-radius: 8px;

    background-image:
        linear-gradient(
            to right,
            #751c80,
            #9f007f
        );

    width: 100px;

    height: 47px;

    color: #ffffff;

    font-family: 'Lato', sans-serif;

    font-weight: bold;

    margin-top: 12px;

    border: none;

    cursor: pointer;

}


button:hover {

    background-color: #e11f1c;

}


/* ==================================================
   ELEMENTOS OCULTOS
================================================== */

.asnwer-hidden {

    display: none !important;

}


/*
   Esta regla es especialmente importante.

   Las imágenes finales tienen reglas con #final-01,
   #final-02, etc., por lo que necesitamos !important
   para garantizar que .hidden realmente las oculte.
*/

.hidden {

    display: none !important;

}


/* ==================================================
   OPCIONES EXCLUSIVAS DE FEMENINO
================================================== */

#opcionesFemenino {

    margin-top: 10px;

}


/* ==================================================
   RESULTADOS
================================================== */

#final-01,
#final-02,
#final-03,
#final-04,
#final-05,
#final-06 {

    position: absolute;

    width: 870px;

    height: auto;

    top: 0;

    left: 0;

    z-index: 5;

    animation-delay: 0.8s;

}


/* ==================================================
   ANIMACIONES
================================================== */

:root {

    --animate-duration: 1s;

    --animate-delay: 1s;

    --animate-repeat: 1;

}


.animate__animated {

    animation-duration:
        var(--animate-duration);

    animation-fill-mode: both;

}


@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}


.animate__fadeIn {

    animation-name: fadeIn;

}