body {
    background-color: yellow;
}

main {
    /* padding-top: 10rem; */
    /* height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
}

/* Lógica trivia */
#container-formulario {
    /* padding-top: 3rem; */
}

#container-main > div.myprofile > p{
    display: none;
}

.cmp-container>.container>.cmp-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cmp-button {
    padding: 10px;
    border: none;
    cursor: pointer;
    width: 30%;
    /* min-width: 450px; */
    color: #512C1D;
    background-color: #FFFEF9;
    font-family: 'KelloggsSansBold';
    border-radius: 10px;
    font-size: calc(1rem + .5vw) !important;
    text-align: center !important;
}

.cmp-button.selected {
    background-color: #F60B45;
    color: white;
    border: 2px solid white;
}

.button {
    margin-top: 20px;
    width: 100%;
    text-align: center;
}

#pregunta1-text,
#pregunta2-text,
#pregunta3-text {
    font-size: calc(1rem + 1vw);
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#pregunta1-text>img,
#pregunta2-text>img,
#pregunta3-text>img {
    max-width: 600px;
}

#trivia-terminada_imggracias>img {
    width: 60%;
}


#trivia-terminada_imgforresp>img {
    width: 60%;
}

#contenido_trivia-terminada>.image>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.eggo_wafllogo-img {
    max-width: 200px;
}

.pregunta-opcion.selected {
    background-color: #F60B45;
    color: white;
    border: 2px solid white;
}

/* Fondos */
#pregunta1 {
    background-image: url(../assets/03_Cloud-_-Pregunta-1_05.png);
}

#pregunta2 {
    background-image: url(../assets/04_Cloud-_-Pregunta-2_01.png);
}

#pregunta3 {
    background-image: url(../assets/05_Cloud-_-Pregunta-3_01.png);
}

#trivia_terminada-container {
    background-image: url(../assets/06CloudCompletadofondo.png);
}

#pregunta1,
#pregunta2,
#pregunta3,
#trivia_terminada-container {
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 100vh;
    padding-top: 5rem;
}

.KSTL-Registration .pod {
    border: none !important;
    padding: 0 !important;

}

#KSTL-Registration-wrapper-ProfileHeaderCopy1,
#KSTL-Registration-wrapper-EggoMailDropdown4,
#KSTL-Registration-wrapper-EggoMailDropdown3,
#KSTL-Registration-wrapper-EggoMailDropdown2,
#KSTL-Registration-wrapper-AcctHeader,
#KSTL-Registration-wrapper-ProfileHeader,
#myaccount-v6 > div > div:nth-child(1),
#KSTL-Registration-wrapper-ProfileButton{
    display: none;
}
/* Trivia Terminada */
.trivia_terminada-container {}

.contenido_trivia-terminada {}

.trivia-terminada_imggracias {}

.trivia-terminada_imgforresp {}

@media(max-width: 768px) {
    .cmp-button {
        width: 60%;
    }

    #pregunta1-text>img {
        content: url(../assets/a/pregunta1/03_Cloud-_-Pregunta-1_mobile_02.png);
    }

    #pregunta2-text>img {
        content: url(../assets/a/pregunta2/04_Cloud-_-Pregunta-2_mobile_02.png);
    }

    #pregunta3-text>img {
        content: url(../assets/a/pregunta3/05_Cloud-_-Pregunta-3_mobile_02.png);
    }

    #pregunta1 {
        background-image: url(../assets/03_Cloud-_-Pregunta-1_mobile_01.png);
    }

    #pregunta2 {
        background-image: url(../assets/04_Cloud-_-Pregunta-2_mobile_01.png);
    }

    #pregunta3 {
        background-image: url(../assets/05_Cloud-_-Pregunta-3_mobile_01.png);
    }

    #trivia_terminada-container {
        background-image: url(../assets/06CloudCompletadomobileassets.png);
    }

    #trivia-terminada_imggracias>img {
        width: 70%;
    }

    #trivia-terminada_imgforresp>img {
        width: 70%;
    }

    #pregunta1-text>img, #pregunta2-text>img, #pregunta3-text>img {
        max-width: 100%;
    }
}

@media(max-width: 468px) {
    .cmp-button {
        width: 80%;
    }
}

@media(max-width: 768px) {

    #button1>img,
    #button2>img,
    #button3>img {
        max-width: 250px;
    }
}