/* Reset e fonte */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --color-text: #fff0c8;
    --color-buttom: #60804d;
    --font-padrao: "Open Sans", Verdana;
}
body {
  font-family: "Open Sans", Verdana;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #306b34;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: #fff0c8;
}
header, footer {
  text-align: center;
  padding: 20px;
}

#logo-img { width: 400px; }
.conteudo-principal { text-align:center; width: 100%; }
.enunciado-principal { margin: 20px auto; font-size: 2rem; }
.input-range { width: 80%; margin: 20px 0; }
.botao-principal { font-size: 1.5rem; padding: 15px; border-radius: 15px; background:#60804d; color:#fff0c8; border:none; cursor:pointer; }
.input-box { display:flex; justify-content:center; gap:30px; margin:20px 0; }
.radio { display:flex; align-items:center; gap:10px; }
.radio input { accent-color:#60804d; width:1.5rem; height:1.5rem; }
.img-pegada { width:150px; margin:20px 0; }
.img-planeta, .img-planetas { width:150px; margin:10px; }
.resultado-div { display:flex; flex-direction:row; justify-content:center; align-items:center; gap:20px; }
.descricao-resultado { font-size:1.5rem; margin:10px 0; }
.qtd-planetas { font-size:1.5rem; font-weight:bold; font-style:italic; }


/* Conteúdo principal */
.conteudo-principal {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Perguntas e enunciados */
.enunciado-principal {
    width: 60%;
    color: var(--color-text);
    font-weight: 500;
    font-size: 2.5rem;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Botões */
button.botao-principal {
    border: none;
    padding: 15px;
    border-radius: 15px;
    color: var(--color-text);
    background: var(--color-buttom);
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
}

/* Inputs */
.input-text, .input-number {
    padding: 15px;
    border-radius: 10px;
    border: none;
    outline: none;
    background: var(--color-buttom);
    color: var(--color-text);
    font-size: 1.5rem;
    text-align: center;
    margin-top: 20px;
}

.input-range {
    width: 80%;
    margin: 20px 0;
    accent-color: var(--color-buttom);
}

.input-box {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 20px 0;
}

.radio label {
    margin-left: 10px;
    font-size: 1.8rem;
}

/* Imagens */
img {
    display: block;
    margin: 20px auto;
    max-width: 100%;
    height: auto;
}

.img-pegada {
    width: 120px;
}
.img-planeta {
    width: 150px;
}
.img-planetas {
    width: 200px;
}

/* Resultado */
.qtd-planetas {
    font-size: 2rem;
    font-weight: bold;
    font-style: italic;
    margin-top: 10px;
}

/* Footer */
footer p {
    text-align: center;
    color: var(--color-text);
    padding: 15px;
}

footer p a {
    color: var(--color-text);
    text-decoration: underline;
}


.popup-tela {
    position: fixed;
    top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.8);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff0c8;
    z-index: 999;
}
.popup-tela input {
    padding: 10px;
    font-size: 1.2rem;
    border-radius: 10px;
    border:none;
    margin-top:10px;
}
.popup-tela button {
    margin-top:15px;
    padding:10px 20px;
    font-size:1.2rem;
    border-radius:10px;
    border:none;
    background:#60804d;
    color:#fff0c8;
    cursor:pointer;
}

body { font-family: "Open Sans", Verdana; display:flex; flex-direction:column; align-items:center; background:#306b34; min-height:100vh; margin:0; color:#fff0c8; }
header, footer { text-align:center; padding:20px; }
#logo-img { width:400px; }
.conteudo-principal { text-align:center; width: 100%; }
.enunciado-principal { margin:20px auto; font-size:2rem; }
.input-range { width:80%; margin:20px 0; }
.botao-principal { font-size:1.5rem; padding:15px; border-radius:15px; background:#60804d; color:#fff0c8; border:none; cursor:pointer; }
.input-box { display:flex; justify-content:center; gap:30px; margin:20px 0; }
.radio { display:flex; align-items:center; gap:10px; }
.radio input { accent-color:#60804d; width:1.5rem; height:1.5rem; }
.img-pegada { width:150px; margin:20px 0; }
.img-planeta, .img-planetas { width:150px; margin:10px; }
.resultado-div { display:flex; flex-direction:row; justify-content:center; align-items:center; gap:20px; }
.descricao-resultado { font-size:1.5rem; margin:10px 0; }
.qtd-planetas { font-size:1.5rem; font-weight:bold; font-style:italic; }

/* Modal */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); justify-content:center; align-items:center; }
.modal-content { background:#60804d; padding:20px; border-radius:15px; text-align:center; color:#fff0c8; font-size:1.5rem; }
.modal-content button { margin-top:10px; padding:10px 20px; border:none; border-radius:10px; background:#fff0c8; color:#60804d; cursor:pointer; font-weight:bold; }


/* Responsivo */
@media(max-width: 475px){
    #logo-img { width: 200px; }
    .img-pegada { width: 80px; }
    .img-planeta { width: 100px; }
    .img-planetas { width: 150px; }
    .enunciado-principal { font-size: 1.5rem; }
    .qtd-planetas { font-size: 1.2rem; }
}