/* ----------------- Questions ----------------- */

#questionScroller {
    display: flex;
    align-items: flex-start;
    margin-left: 0;
    width: calc(100% + 6rem);
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--clr-bg-blue);
}

#questionScroller::-webkit-scrollbar {
    display:none;
}

#questionScroller .item {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    scroll-snap-align: start;
    margin: 0;
    width: 100%;
}

#questionScroller .slide {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    padding: 0 4.2rem;
    scroll-snap-align: start;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#questionScroller .qLeft {
    display: none;
    margin-bottom: 2rem;
    font-size: 2.4rem;
    line-height: 2.4rem;
    font-weight: 700;
}

#questionScroller .qBox {
    width: 100%;
}

#questionScroller .question {
    width: 120%;
    left: 50%;
    margin-bottom: 3.2rem;
    color: var(--clr-white);
    font-size: 3.0rem;
    line-height: 3.8rem;
    font-weight: 900;
    letter-spacing: -0.06rem;
    transform: translateX(-50%);
}

#questionScroller .question .important {
    color: var(--clr-yellow);
    font-size: 5.0rem;
    line-height: 8.8rem;
}

#questionScroller .questionNote {
    margin-bottom: 1.4rem;
    color: var(--clr-white);
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: 400;
}


/* ----------------- Answers ----------------- */

#questionScroller .answerBox {
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1.0rem;
}

#questionScroller .answerBox.compact {
    display: grid;
    width: 100%;
    grid-template-columns: 50% 50%;
    justify-items: stretch;
}

#questionScroller .answer .text {
    color: var(--clr-black);
    font-size: 1.6rem;
    line-height: 2.0rem;
    font-weight: 400;
}

#questionScroller .answered .answer {
    opacity: 0.4;
}


#questionScroller .answer {
    padding: 1.5rem;
    width: 100%;
    height: fit-content;
    color: var(--clr-white);
    font-size: 1.6rem;
    line-height: 2.0rem;
    font-weight: 400;
    background-color: var(--clr-blue-light);
    border-radius: 10.0rem;
    transition: background-color 0.5s, color 0.5s;
}

#questionScroller .answer.big {
    display: flex;
    height: 15.0rem;
    border-radius: 2.5rem;
    align-content: center;
    justify-content: center;
}

#questionScroller .openWithNote {
    width: 100%;
}

#questionScroller .openWithNote .openNote {
    margin-bottom: 0.2rem;
    padding: 1.5rem;
    width: 100%;
    color: var(--clr-white);
    font-size: 1.6rem;
    line-height: 2.0rem;
    font-weight: 400;
    background-color: var(--clr-blue-light);
    border-radius: 2.5rem 2.5rem 0 0;
}

#questionScroller .openWithNote .answer.open {
    border-radius: 0 0 2.5rem 2.5rem;
}

#questionScroller .answer.correct,
#questionScroller .answered .answer.correct,
#questionScroller .openWithNote .openNote.correct{
    background-color: var(--clr-yellow);
    color: var(--clr-blue-light);
    opacity: 1;
}


#questionScroller input[type=text] {
    margin: 0;
    padding: 0;
    background-color: transparent;
    text-align: center;
    color: var(--clr-white);
    font-size: 1.6rem;
    line-height: 2.0rem;
    font-weight: 400;
    outline: none;
}

#questionScroller input[type=text]::placeholder {
    color: #00319c;
}

#questionScroller .button {
    margin-top: 1.6rem;
    padding: 1.6rem 5.3rem;
    color: var(--clr-blue);
    font-size: 1.6rem;
    line-height: 2.0rem;
    font-weight: 900;
    background-color: var(--clr-white);
    border: none;
    text-transform: uppercase;
    border-radius: 5.0rem;
}

#questionScroller .answerBox.compact .button {
    width: calc(200% + 1rem);
}

#questionScroller #sendData.button {
    
    background-color: var(--clr-yellow);
}