@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap'); /*fonte do googlefonts*/

/* configuração pra adicionar o padding e margem na largura total
e deixar grudado tudo pra dps arrumar margin: 0;*/

/*geral*/
*{
    box-sizing: border-box;
    margin: 0;
}

/*corpo*/
body{
    background-color: #F4F0EA;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
}

/*cabeçalho*/
header{
    background-color: #171616;
    color: #f7df1e;
    padding: 2rem;
    text-align: center;
}

/*parte principal da pag*/
main{
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* perguntas divididas*/
section{
    display: flex;
    flex-direction: column;
    background-color: #d6d6d6;
    border-radius: 1rem;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.25);
    padding: 1rem;
    gap: 0.4rem;
}

/* titulo perguntas*/
h2{
    color: #171616;
    font-size: 1.25rem;
}

/*perguntas texto*/
p{
    color: #171616;
    margin: 0.3rem;
    margin-left: 0;
}

/*textos que aparecem dps da interação*/
.resultado{
    margin: 1rem;
    margin-left: 0
}

/*botoes*/
button{
    width: 10rem;
    margin: 0;
    padding: 0.5rem;
    background-color: #f7df1e;
    border: none;
    border-radius: 1rem;
    font-weight: 600;
    cursor: pointer;
}

/*areas de coleta de dados pelo usuario*/
input[type="text"],input[type="number"]{
    width: 100%;
    margin: 0.3rem;
    padding: 0.5rem;
    border-style: none;
    border-radius: 1rem;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    outline: none;
}


/*formulario*/
.opcoes{
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 1rem;
}

/* checkbox e texto na mesma linha e alinhados */
.opcoes label {
    display: flex;
    align-items: center; /* quadrado verticalmente com o texto */
    justify-content: flex-start; /* tudo começa na esquerda */
    cursor: pointer;
    width: fit-content; /*label ocupa espaço certo */
}

/*input da multipla escolha*/
input[type="checkbox"]{
    accent-color: #f7df1e;
    margin: 0;
    margin-right: 0.8rem; /* Espaço entre o quadrado e o texto ao lado */
    width: 1rem;        /* Tamanho fixo para garantir que apareça bem */
    height: 1rem;
    flex-shrink: 0;     /* Impede que o checkbox "esmague" em telas menores */
    cursor: pointer;
}

/*Criando o farol redondo*/
.farol{
    height: 2rem;
    width: 2rem;
    background-color: rgb(67, 67, 67);
    border-radius: 50%;
    display: flex;
    margin: 0.3rem;
}

/*colocando o botão do lado do farol*/
.parte-vermelha{
    display: flex;
}

.parte-amarela{
    display: flex;
}

.parte-verde{
    display: flex;
}