/* apply a natural box layout model to all elements, but allowing components to change */

:root {
    --light: #f4f4f4;
    --dark: #343434;
    --amarillo: #FFE53F;
    --mainFont: "canada-type-gibson", sans-serif;
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

#inicio {
    font-family: var(--mainFont);
    background-image: url('https://exa.tv/wp-content/uploads/2024/10/sams-club-bg1_ART_001_9_16_SL.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

@media(min-width:1024px){
#inicio{
    background-image: url('https://exa.tv/wp-content/uploads/2024/10/sams-club-bg1_ART_001.png');
}
}
body {
    font-size: 62.5%;
    font-family: var(--mainFont);
    background-image: url('https://exa.tv/wp-content/uploads/2024/10/sams-club-bg4ok_ART_002_SL.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
}

a {
    all: unset;
}

p {
    margin: 0;
    font-size: 1.5rem;
}


.timer{
    background: #e7e7e7;
    padding: .5rem;
    max-width: 250px;
    height: auto;
    margin: 3rem auto;
    font-family: "Orbitron", sans-serif;
    border-radius: 3rem;
}
.timer,
#score,
#totalTime {
    color: black;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
}
.quiz-container{
      position:absolute;
    top: 50%;
    left: 50%;
    transition: translate(-50%,-50%);
}

#quiz-container {
    /* From https://css.glass */
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    max-width: 650px;
    height: auto;
    border-radius: 2rem;
    padding: 0rem;

}

#question {
    font-size: 1.6rem;
    text-align: center;
    background: black;
    color:white;
    width:100%;
    border-radius: 2rem 2rem 0 0;
}

.hide {
    display: none;
}

.show {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.next-btn {
    /*display: flex!important;*/
    justify-content: end;
    margin-top: 2rem;
    display:none;
}

#options{
    padding: 2rem 0;
}

#options button {
  background-color: #e7e7e7;
    width: 90%;
    height: auto;
    padding: 1rem;
    border-radius: 2rem;
    text-align: start;
}

#options button:hover {
    background-color: #cecece;
    cursor: pointer;
}

#xquestion label {
    font-size: 1.6rem;
    color: var(--light);
}

.result {
    padding: 1rem;
}