/* O asterisco escolhe TODOS os elementos da página de uma vez */
* {
    margin: 0; /* tira o espaço de fora (margem) padrão de todos os elementos */
    padding: 0; /* tira o espaço de dentro (preenchimento) padrão de todos os elementos */
    box-sizing: border-box; /* faz a largura e a altura já contarem a borda e o espaço de dentro, para os tamanhos não "estourarem" */
} /* fecha o bloco de regras de todos os elementos */
 
/* Regras para o corpo da página (tudo que aparece na tela) */
body {
    background-color: black; /* deixa o fundo da página preto */
    font-family: Georgia, serif; /* usa a letra Georgia; se o computador não tiver, usa outra letra com serifa */
    color: white; /* deixa a cor das letras branca */
    padding: 40px 0; /* dá 40px de espaço em cima e embaixo, e 0 nos lados */
} /* fecha as regras do corpo */
 
/* caixa do meio */
/* Regras para a caixa principal, a que fica no meio da página */
.caixa {
    position: relative; /* permite que itens dentro dela (como a setinha) sejam posicionados em relação a ela */
    width: 650px; /* define a largura da caixa em 650 pixels */
    margin: 0 auto; /* 0 em cima e embaixo, e "auto" nos lados, o que centraliza a caixa na tela */
    padding: 40px 50px 30px 50px; /* espaço de dentro: 40px em cima, 50px direita, 30px embaixo e 50px esquerda */
    border: 1px solid #d4a63c; /* desenha uma borda fina, sólida e dourada em volta da caixa */
    box-shadow: 0 0 15px rgba(212, 166, 60, 0.3); /* faz um brilho dourado suave em volta da caixa (o 0.3 deixa a cor meio transparente) */
    text-align: center; /* centraliza os textos dentro da caixa */
} /* fecha as regras da caixa */
 
/* Regras para a setinha de voltar */
.voltar {
    position: absolute; /* tira a setinha do fluxo normal e deixa colocar ela em um lugar exato da caixa */
    top: 15px; /* coloca a setinha a 15px do topo da caixa */
    left: 15px; /* coloca a setinha a 15px da esquerda da caixa */
    width: 30px; /* define a largura da setinha em 30px */
    height: 30px; /* define a altura da setinha em 30px (igual à largura, para ficar um quadrado) */
    border: 2px solid white; /* desenha uma borda branca de 2px em volta */
    border-radius: 50%; /* arredonda os cantos em 50%, transformando o quadrado em uma bolinha */
    line-height: 26px; /* ajusta a altura da linha para a setinha ficar centralizada na bolinha */
    text-decoration: none; /* tira o sublinhado padrão dos links */
    color: white; /* deixa a cor da setinha branca */
} /* fecha as regras da setinha */
 
/* Regras para quando o mouse passa por cima da setinha */
.voltar:hover {
    border-color: #d4a63c; /* a borda muda para dourado */
    color: #d4a63c; /* a setinha também muda para dourado */
} /* fecha as regras do mouse em cima da setinha */
 
/* bolinha com o check */
/* Regras para a bolinha com o símbolo de certo */
.check {
    width: 60px; /* define a largura da bolinha em 60px */
    height: 60px; /* define a altura da bolinha em 60px */
    margin: 0 auto 15px auto; /* 0 em cima, auto nos lados (centraliza), 15px embaixo */
    border: 2px solid #d4a63c; /* desenha uma borda dourada de 2px */
    border-radius: 50%; /* arredonda os cantos para virar uma bolinha */
    color: #d4a63c; /* deixa o símbolo de certo dourado */
    font-size: 30px; /* define o tamanho do símbolo em 30px */
    line-height: 56px; /* ajusta a altura da linha para o símbolo ficar no meio da bolinha */
} /* fecha as regras da bolinha */
 
/* Regras para o título principal */
h1 {
    color: #d4a63c; /* deixa o título dourado */
    font-size: 28px; /* define o tamanho da letra em 28px */
    font-weight: normal; /* tira o negrito que o título tem normalmente */
} /* fecha as regras do título */
 
/* Regras para o parágrafo do enfeite (a estrelinha) */
.enfeite {
    color: #d4a63c; /* deixa a estrelinha dourada */
    margin: 8px 0 20px 0; /* espaço de fora: 8px em cima, 0 nos lados e 20px embaixo */
} /* fecha as regras do enfeite */
 
/* Regras para todos os parágrafos */
p {
    font-size: 15px; /* define o tamanho da letra em 15px */
    line-height: 24px; /* define a altura de cada linha em 24px, deixando o texto mais arejado */
    margin-bottom: 15px; /* dá 15px de espaço embaixo de cada parágrafo */
} /* fecha as regras dos parágrafos */
 
/* Regras para o parágrafo em destaque */
.destaque {
    font-size: 18px; /* deixa a letra maior (18px) que a dos outros parágrafos */
} /* fecha as regras do destaque */
 
/* Regras para a linha horizontal */
hr {
    border: none; /* tira a borda padrão da linha */
    border-top: 1px solid #d4a63c; /* desenha só a borda de cima, fina, sólida e dourada, que vira a linha */
    margin: 25px 0; /* dá 25px de espaço em cima e embaixo da linha */
} /* fecha as regras da linha */
 
/* Regras para a frase final */
.frase-final {
    color: #d4a63c; /* deixa a frase dourada */
    font-size: 16px; /* define o tamanho da letra em 16px */
    font-style: italic; /* deixa a letra inclinada (itálico) */
} /* fecha as regras da frase final */
 
/* botao */
/* Regras para o botão VOLTAR AO INÍCIO */
.botao {
    display: inline-block; /* faz o link se comportar como um bloco que fica na linha, aceitando tamanho e espaços */
    background-color: #b8864b; /* deixa o fundo do botão em um tom de marrom dourado */
    color: white; /* deixa a letra do botão branca */
    text-decoration: none; /* tira o sublinhado do link */
    padding: 10px 35px; /* espaço de dentro: 10px em cima e embaixo, 35px nos lados */
    margin-top: 10px; /* dá 10px de espaço em cima do botão */
    font-size: 13px; /* define o tamanho da letra em 13px */
    font-family: Arial, sans-serif; /* usa a letra Arial (sem serifa) no botão */
} /* fecha as regras do botão */
 
/* Regras para quando o mouse passa por cima do botão */
.botao:hover {
    background-color: #8a6234; /* o fundo do botão fica mais escuro */
} /* fecha as regras do mouse em cima do botão */
 
/* Regras para a imagem do logo */
.logo {
    display: block; /* faz a imagem ocupar uma linha inteira, para poder centralizar */
    height: 50px; /* define a altura do logo em 50px (a largura se ajusta sozinha) */
    margin: 30px auto 0 auto; /* 30px em cima, auto nos lados (centraliza), 0 embaixo */
} /* fecha as regras do logo */