/* CSS GERAL*/
html,
body {
    height: 100%;
}

@font-face {
    font-family: "Vonique 43";
    src: url(../fonts/Vonique43F.woff) format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.profile-text {
    font-family: "Vonique 43", sans-serif;
    font-size: 25px;
}

#img-woman-answer {
    max-width: 90%;
    height: auto;
}

#loader {
    position: fixed;
    display: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("../images/bg.jpg") no-repeat top center;
    background-size: cover;
    background-attachment: fixed;
    z-index: 999999;
}

/* CSS personalizado para os botões AVANÇAR e VOLTAR */
.btn-action {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    background-color: #dfdcdc;
    border: none;
    border-radius: 50px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease-in-out;
}

.btn-action button {
    background: none;
    border: none;
    font-size: 18px;
    color: #527c33;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    /* Remove a borda de foco */
}

.btn-action:hover {
    background-color: #d1cccc;
}

body {
    background: url("../images/bg.jpg") no-repeat top center;
    background-size: cover;
    background-attachment: fixed;
    font-family: "Lato", sans-serif;
    color: #fff;
    margin: 20px;
}

.woman-start {
    max-width: 25%;
    height: auto;
    margin-top: -50px;
}

/* CSS para o botão INICIAR */
.btn-start {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    background-color: #dfdcdc;
    border: none;
    border-radius: 50px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease-in-out;
    max-width: 30%;
    height: auto;
    margin-top: -50px;
}

/* CSS para o botão INICIAR */
.btn-start {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 30px;
    background-color: #dfdcdc;
    border: none;
    border-radius: 50px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease-in-out;
}

.btn-start>a {
    font-size: 20px;
    color: #527c33;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-start:hover {
    background-color: #d1cccc;
}


/* CSS para o botão Retornar */
.btn-return {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 30px;
    background-color: #dfdcdc;
    border: none;
    border-radius: 50px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease-in-out;
}

.btn-return>a {
    font-size: 20px;
    color: #527c33;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-return:hover {
    background-color: #d1cccc;
}

/* Questions and Answers */
#question {
    margin-bottom: 30px;
    font-size: 25px;
}

.answer::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    margin-right: 10px;
}

/* Estilo para resposta selecionada */
.answer.selected {
    color: white;
}

/* Estilo para o botão redondo quando a resposta está selecionada */
.answer.selected::before {
    background-color: #527c33;
    border:2px solid #fff
    /* Cor de fundo preta */
}

.answer {
    color: #fff;
    display: block;
    background-color: transparent;
    border: none;
    font-size: 22px;
    text-align: left;
    margin-bottom: 10px;
}

.termometro {
    margin-top: -50px;
}

#result {
    display: none;
    font-size: 21px;
    color: #fff;
    /* height: 500px; */
    margin-top: 30px;
    position: relative;
    /* overflow: auto; */
    line-height: 35px;
}


/* Loading */
.loading {
    /* display: none; */
    position: absolute;
    margin-top: -150px;
    margin-left: -250px;
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
}

@keyframes spinner {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.spinner div {
    left: 198px;
    top: 92px;
    position: absolute;
    animation: spinner linear 1s infinite;
    background: #e33753;
    width: 4px;
    height: 16px;
    border-radius: 2px / 7.04px;
    transform-origin: 2px 108px;
}

.spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -0.9830508474576272s;
    background: #e33753;
}

.spinner div:nth-child(2) {
    transform: rotate(6.101694915254237deg);
    animation-delay: -0.9661016949152542s;
    background: #e33753;
}

.spinner div:nth-child(3) {
    transform: rotate(12.203389830508474deg);
    animation-delay: -0.9491525423728814s;
    background: #e33753;
}

.spinner div:nth-child(4) {
    transform: rotate(18.305084745762713deg);
    animation-delay: -0.9322033898305084s;
    background: #e33753;
}

.spinner div:nth-child(5) {
    transform: rotate(24.406779661016948deg);
    animation-delay: -0.9152542372881356s;
    background: #e33753;
}

.spinner div:nth-child(6) {
    transform: rotate(30.508474576271187deg);
    animation-delay: -0.8983050847457628s;
    background: #e33753;
}

.spinner div:nth-child(7) {
    transform: rotate(36.610169491525426deg);
    animation-delay: -0.8813559322033898s;
    background: #e33753;
}

.spinner div:nth-child(8) {
    transform: rotate(42.71186440677966deg);
    animation-delay: -0.864406779661017s;
    background: #e33753;
}

.spinner div:nth-child(9) {
    transform: rotate(48.813559322033896deg);
    animation-delay: -0.847457627118644s;
    background: #e33753;
}

.spinner div:nth-child(10) {
    transform: rotate(54.91525423728814deg);
    animation-delay: -0.8305084745762712s;
    background: #e33753;
}

.spinner div:nth-child(11) {
    transform: rotate(61.016949152542374deg);
    animation-delay: -0.8135593220338984s;
    background: #e33753;
}

.spinner div:nth-child(12) {
    transform: rotate(67.11864406779661deg);
    animation-delay: -0.7966101694915254s;
    background: #e33753;
}

.spinner div:nth-child(13) {
    transform: rotate(73.22033898305085deg);
    animation-delay: -0.7796610169491526s;
    background: #e33753;
}

.spinner div:nth-child(14) {
    transform: rotate(79.32203389830508deg);
    animation-delay: -0.7627118644067796s;
    background: #e33753;
}

.spinner div:nth-child(15) {
    transform: rotate(85.42372881355932deg);
    animation-delay: -0.7457627118644068s;
    background: #e33753;
}

.spinner div:nth-child(16) {
    transform: rotate(91.52542372881356deg);
    animation-delay: -0.7288135593220338s;
    background: #e33753;
}

.spinner div:nth-child(17) {
    transform: rotate(97.62711864406779deg);
    animation-delay: -0.711864406779661s;
    background: #e33753;
}

.spinner div:nth-child(18) {
    transform: rotate(103.72881355932203deg);
    animation-delay: -0.6949152542372882s;
    background: #e33753;
}

.spinner div:nth-child(19) {
    transform: rotate(109.83050847457628deg);
    animation-delay: -0.6779661016949152s;
    background: #e33753;
}

.spinner div:nth-child(20) {
    transform: rotate(115.9322033898305deg);
    animation-delay: -0.6610169491525424s;
    background: #e33753;
}

.spinner div:nth-child(21) {
    transform: rotate(122.03389830508475deg);
    animation-delay: -0.6440677966101694s;
    background: #e33753;
}

.spinner div:nth-child(22) {
    transform: rotate(128.135593220339deg);
    animation-delay: -0.6271186440677966s;
    background: #e33753;
}

.spinner div:nth-child(23) {
    transform: rotate(134.23728813559322deg);
    animation-delay: -0.6101694915254238s;
    background: #e33753;
}

.spinner div:nth-child(24) {
    transform: rotate(140.33898305084745deg);
    animation-delay: -0.5932203389830508s;
    background: #e33753;
}

.spinner div:nth-child(25) {
    transform: rotate(146.4406779661017deg);
    animation-delay: -0.576271186440678s;
    background: #e33753;
}

.spinner div:nth-child(26) {
    transform: rotate(152.54237288135593deg);
    animation-delay: -0.559322033898305s;
    background: #e33753;
}

.spinner div:nth-child(27) {
    transform: rotate(158.64406779661016deg);
    animation-delay: -0.5423728813559322s;
    background: #e33753;
}

.spinner div:nth-child(28) {
    transform: rotate(164.74576271186442deg);
    animation-delay: -0.5254237288135594s;
    background: #e33753;
}

.spinner div:nth-child(29) {
    transform: rotate(170.84745762711864deg);
    animation-delay: -0.5084745762711864s;
    background: #e33753;
}

.spinner div:nth-child(30) {
    transform: rotate(176.94915254237287deg);
    animation-delay: -0.4915254237288136s;
    background: #e33753;
}

.spinner div:nth-child(31) {
    transform: rotate(183.05084745762713deg);
    animation-delay: -0.4745762711864407s;
    background: #e33753;
}

.spinner div:nth-child(32) {
    transform: rotate(189.15254237288136deg);
    animation-delay: -0.4576271186440678s;
    background: #e33753;
}

.spinner div:nth-child(33) {
    transform: rotate(195.25423728813558deg);
    animation-delay: -0.4406779661016949s;
    background: #e33753;
}

.spinner div:nth-child(34) {
    transform: rotate(201.35593220338984deg);
    animation-delay: -0.423728813559322s;
    background: #e33753;
}

.spinner div:nth-child(35) {
    transform: rotate(207.45762711864407deg);
    animation-delay: -0.4067796610169492s;
    background: #e33753;
}

.spinner div:nth-child(36) {
    transform: rotate(213.5593220338983deg);
    animation-delay: -0.3898305084745763s;
    background: #e33753;
}

.spinner div:nth-child(37) {
    transform: rotate(219.66101694915255deg);
    animation-delay: -0.3728813559322034s;
    background: #e33753;
}

.spinner div:nth-child(38) {
    transform: rotate(225.76271186440678deg);
    animation-delay: -0.3559322033898305s;
    background: #e33753;
}

.spinner div:nth-child(39) {
    transform: rotate(231.864406779661deg);
    animation-delay: -0.3389830508474576s;
    background: #e33753;
}

.spinner div:nth-child(40) {
    transform: rotate(237.96610169491527deg);
    animation-delay: -0.3220338983050847s;
    background: #e33753;
}

.spinner div:nth-child(41) {
    transform: rotate(244.0677966101695deg);
    animation-delay: -0.3050847457627119s;
    background: #e33753;
}

.spinner div:nth-child(42) {
    transform: rotate(250.16949152542372deg);
    animation-delay: -0.288135593220339s;
    background: #e33753;
}

.spinner div:nth-child(43) {
    transform: rotate(256.271186440678deg);
    animation-delay: -0.2711864406779661s;
    background: #e33753;
}

.spinner div:nth-child(44) {
    transform: rotate(262.3728813559322deg);
    animation-delay: -0.2542372881355932s;
    background: #e33753;
}

.spinner div:nth-child(45) {
    transform: rotate(268.47457627118644deg);
    animation-delay: -0.23728813559322035s;
    background: #e33753;
}

.spinner div:nth-child(46) {
    transform: rotate(274.5762711864407deg);
    animation-delay: -0.22033898305084745s;
    background: #e33753;
}

.spinner div:nth-child(47) {
    transform: rotate(280.6779661016949deg);
    animation-delay: -0.2033898305084746s;
    background: #e33753;
}

.spinner div:nth-child(48) {
    transform: rotate(286.77966101694915deg);
    animation-delay: -0.1864406779661017s;
    background: #e33753;
}

.spinner div:nth-child(49) {
    transform: rotate(292.8813559322034deg);
    animation-delay: -0.1694915254237288s;
    background: #e33753;
}

.spinner div:nth-child(50) {
    transform: rotate(298.9830508474576deg);
    animation-delay: -0.15254237288135594s;
    background: #e33753;
}

.spinner div:nth-child(51) {
    transform: rotate(305.08474576271186deg);
    animation-delay: -0.13559322033898305s;
    background: #e33753;
}

.spinner div:nth-child(52) {
    transform: rotate(311.1864406779661deg);
    animation-delay: -0.11864406779661017s;
    background: #e33753;
}

.spinner div:nth-child(53) {
    transform: rotate(317.2881355932203deg);
    animation-delay: -0.1016949152542373s;
    background: #e33753;
}

.spinner div:nth-child(54) {
    transform: rotate(323.3898305084746deg);
    animation-delay: -0.0847457627118644s;
    background: #e33753;
}

.spinner div:nth-child(55) {
    transform: rotate(329.49152542372883deg);
    animation-delay: -0.06779661016949153s;
    background: #e33753;
}

.spinner div:nth-child(56) {
    transform: rotate(335.59322033898303deg);
    animation-delay: -0.05084745762711865s;
    background: #e33753;
}

.spinner div:nth-child(57) {
    transform: rotate(341.6949152542373deg);
    animation-delay: -0.03389830508474576s;
    background: #e33753;
}

.spinner div:nth-child(58) {
    transform: rotate(347.79661016949154deg);
    animation-delay: -0.01694915254237288s;
    background: #e33753;
}

.spinner div:nth-child(59) {
    transform: rotate(353.89830508474574deg);
    animation-delay: 0s;
    background: #e33753;
}

.loading-spinner {
    width: 400px;
    height: 400px;
    display: inline-block;
    overflow: hidden;
    background: rgba(NaN, NaN, NaN, 0);
}

.spinner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    margin-top: -280px;
    margin-left: -200px;
    left: 50%;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
    /* see note above */
}

.spinner div {
    box-sizing: content-box;
}

.btn-start-position {
    margin-top: 70px;
}

/* X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .titulo {
        margin-top: -80px;
    }

    .termometro {
        margin-top: -80px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .btn-start>a {
        font-size: 34px;
    }

    .titulo {
        margin-top: -100px;
    }

    .btn-start-position {
        margin-top: -150px;
    }

    btn-start>a {
        font-size: 54px;
    }

    .titulo {
        margin-top: -180px;
    }

    .termometro {
        margin-top: -180px;
    }
}

@media (max-width: 576px) {
    .titulo {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .answer {
        font-size: 16px;
    }

    .answer::before {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #fff;
        margin-right: 10px;
    }

    #question {
        font-size: 18px;
    }

    .btn-start {
        padding: 8px 16px;
        font-size: 14px;
    }

    .btn-return {
        padding: 8px 16px;
        font-size: 14px;
    }

    #pointer {
        margin-bottom: 40px;
    }

    .img-woman {
        max-width: 45%;
        height: auto;
    }

    #img-woman {
        max-width: 45%;
        height: auto;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}