/* 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 */
} /* fecha as regras do corpo */
 
/* ---------- menu ---------- */
/* Regras para o cabeçalho do topo (onde fica o menu) */
header {
    padding: 20px 40px; /* espaço de dentro: 20px em cima e embaixo, 40px nos lados */
    border-bottom: 1px solid #333; /* desenha uma linha fina cinza-escura embaixo do cabeçalho */
} /* fecha as regras do cabeçalho */
 
/* Regras para a barra de navegação */
nav {
    display: flex; /* ativa o flexbox, que coloca os links um ao lado do outro, na horizontal */
    justify-content: center; /* centraliza os links na horizontal */
    align-items: center; /* alinha os links no meio, na vertical */
    gap: 40px; /* deixa 40px de espaço entre um link e outro */
} /* fecha as regras da barra de navegação */
 
/* Regras para os links dentro da barra de navegação */
nav a {
    color: white; /* deixa a letra dos links branca */
    text-decoration: none; /* tira o sublinhado dos links */
    font-size: 12px; /* define o tamanho da letra em 12px */
    font-family: Arial, sans-serif; /* usa a letra Arial (sem serifa) nos links */
} /* fecha as regras dos links do menu */
 
/* Regras para quando o mouse passa por cima de um link do menu */
nav a:hover {
    color: #b8864b; /* a letra muda para um tom de marrom dourado */
} /* fecha as regras do mouse em cima do link */
 
/* Regras para o link que tem a class "ativo" (a página atual) */
nav .ativo {
    color: #d4a63c; /* deixa o link ativo dourado, para se destacar dos outros */
} /* fecha as regras do link ativo */
 
/* Regras para o link RESERVAR, que parece um botão */
.botao-menu {
    border: 1px solid #d4a63c; /* desenha uma borda fina e dourada em volta do link */
    padding: 5px 15px; /* espaço de dentro: 5px em cima e embaixo, 15px nos lados */
    color: #d4a63c; /* deixa a letra dourada */
} /* fecha as regras do botão do menu */
 
/* ---------- conteudo ---------- */
/* Regras para a parte principal da página */
main {
    display: flex; /* ativa o flexbox, para colocar a foto e o texto lado a lado */
    width: 1000px; /* define a largura da parte principal em 1000px */
    margin: 0 auto; /* 0 em cima e embaixo, e "auto" nos lados, o que centraliza na tela */
} /* fecha as regras da parte principal */
 
/* lado da foto */
/* Regras para a caixa do lado esquerdo, onde fica a foto */
.lado-foto {
    width: 35%; /* ocupa 35% da largura da parte principal */
    position: relative; /* permite posicionar a setinha dentro dessa caixa */
} /* fecha as regras do lado da foto */
 
/* Regras para a imagem que está dentro do lado da foto */
.lado-foto img {
    width: 100%; /* a imagem ocupa 100% da largura da caixa */
    height: 100%; /* a imagem ocupa 100% da altura da caixa */
    object-fit: cover; /* a imagem preenche todo o espaço sem ficar esticada, cortando as sobras */
    background-color: #3a2a1a; /* cor quando a imagem nao carrega */
    display: block; /* faz a imagem se comportar como um bloco, tirando um pequeno espaço vazio embaixo dela */
} /* fecha as regras da imagem */
 
/* 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: 20px; /* coloca a setinha a 20px do topo da caixa */
    left: 20px; /* coloca a setinha a 20px 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 */
    text-align: center; /* centraliza a setinha na horizontal dentro da bolinha */
    line-height: 26px; /* ajusta a altura da linha para a setinha ficar centralizada na vertical */
    text-decoration: none; /* tira o sublinhado padrão dos links */
    color: white; /* deixa a cor da setinha branca */
} /* fecha as regras da setinha */
 
/* lado do texto */
/* Regras para a caixa do lado direito, onde ficam os textos */
.lado-texto {
    width: 65%; /* ocupa 65% da largura da parte principal (35% da foto + 65% do texto = 100%) */
    padding: 30px 40px; /* espaço de dentro: 30px em cima e embaixo, 40px nos lados */
} /* fecha as regras do lado do texto */
 
/* Regras para os títulos h1 e h2 ao mesmo tempo (a vírgula junta os dois) */
h1, h2 {
    color: #d4a63c; /* deixa os títulos dourados */
    text-align: center; /* centraliza os títulos */
    font-weight: normal; /* tira o negrito que os títulos têm normalmente */
} /* fecha as regras dos títulos */
 
/* Regras só para o título principal */
h1 {
    font-size: 24px; /* define o tamanho da letra em 24px */
} /* fecha as regras do h1 */
 
/* Regras só para o subtítulo */
h2 {
    font-size: 18px; /* define o tamanho da letra em 18px (menor que o h1) */
    margin-top: 30px; /* dá 30px de espaço em cima do subtítulo */
} /* fecha as regras do h2 */
 
/* Regras para o parágrafo do enfeite (a estrelinha) */
.enfeite {
    text-align: center; /* centraliza a estrelinha */
    color: #d4a63c; /* deixa a estrelinha dourada */
    margin-bottom: 15px; /* dá 15px de espaço embaixo */
} /* fecha as regras do enfeite */
 
/* Regras para os parágrafos que estão dentro do lado do texto */
.lado-texto p {
    font-size: 13px; /* define o tamanho da letra em 13px */
    line-height: 17px; /* define a altura de cada linha em 17px */
    margin-bottom: 4px; /* dá 4px de espaço embaixo de cada parágrafo */
} /* fecha as regras dos parágrafos */
 
/* 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 */
 
/* contatos */
/* Regras para a lista de contatos */
.contato {
    list-style: none; /* tira as bolinhas padrão da lista */
} /* fecha as regras da lista de contatos */
 
/* Regras para cada item da lista de contatos */
.contato li {
    font-size: 13px; /* define o tamanho da letra em 13px */
    line-height: 18px; /* define a altura de cada linha em 18px */
    margin-bottom: 15px; /* dá 15px de espaço embaixo de cada item */
    padding-left: 15px; /* dá 15px de espaço de dentro à esquerda */
} /* fecha as regras dos itens */
 
/* Regras para um enfeite colocado ANTES do conteúdo de cada item (o ::before cria um conteúdo extra) */
.contato li::before {
    content: "• "; /* escreve uma bolinha seguida de um espaço antes do texto de cada item */
    color: #d4a63c; /* deixa a bolinha dourada */
} /* fecha as regras da bolinha */
 
/* Regras para o link (o e-mail) dentro dos contatos */
.contato a {
    color: white; /* deixa o link branco */
} /* fecha as regras do link de contato */
 
/* Regras para o parágrafo de reservas */
.reservas {
    color: #d4a63c; /* deixa o texto dourado */
} /* fecha as regras das reservas */
 
/* Regras para a frase final */
.frase-final {
    color: #d4a63c; /* deixa a frase dourada */
    font-size: 16px !important; /* define a letra em 16px; o !important faz essa regra ganhar de qualquer outra que mande diferente */
    line-height: 22px !important; /* define a altura da linha em 22px; o !important também faz essa regra ganhar das outras */
} /* fecha as regras da frase final */
 
/* ---------- rodape ---------- */
/* Regras para o rodapé (a parte de baixo da página) */
footer {
    text-align: center; /* centraliza o conteúdo do rodapé */
    padding: 20px; /* dá 20px de espaço de dentro em todos os lados */
    border-top: 1px solid #333; /* desenha uma linha fina cinza-escura em cima do rodapé */
} /* fecha as regras do rodapé */
 
/* Regras para a imagem dentro do rodapé */
footer img {
    height: 50px; /* define a altura do logo em 50px (a largura se ajusta sozinha) */
} /* fecha as regras da imagem do rodapé */