/* Regras para o corpo da página (tudo que aparece na tela) */
body{ /* abre as regras do corpo */
position: relative; /* permite que os elementos "absolute" de dentro sejam posicionados em relação ao corpo */
width: 1000px; /* define a largura do corpo em 1000px */
height: 1510px; /* define a altura do corpo em 1510px */

background: #0e0e0e; /* deixa o fundo quase preto */

} /* fecha as regras do corpo */

/* Regras para a caixa q1 (a caixa da foto do MENU) */
.q1{ /* abre as regras da caixa q1 */

position: absolute; /* tira a caixa do fluxo normal e deixa colocar ela em um lugar exato da página */
width: 290px; /* largura de 290px */
height: 390px; /* altura de 390px */
left: 195px; /* fica a 195px da esquerda */
top: 912px; /* fica a 912px do topo */

background: linear-gradient(0deg, #000000, #000000), #000000; /* fundo preto (um degradê de preto para preto, que dá no mesmo, com preto por baixo) */

} /* fecha as regras da caixa q1 */

/* Regras para a foto do MENU */
.menuft{ /* abre as regras da foto do menu */
position: absolute; /* posiciona a foto em um lugar exato */
width: 290px; /* largura de 290px */
height: 390px; /* altura de 390px */


} /* fecha as regras da foto do menu */

/* Regras para o texto MENU em cima da foto */
.MENu  { /* abre as regras do texto MENU */

position: absolute; /* posiciona o texto em um lugar exato */
bottom: 10px; /* fica a 10px da parte de baixo */
left: 100px; /* fica a 100px da esquerda */

font-family: 'Inknut Antiqua'; /* usa a letra Inknut Antiqua (uma fonte elegante do Google Fonts) */
font-style: normal; /* letra normal, sem itálico */
font-weight: 400; /* peso da letra normal (400 é o normal; 700 seria negrito) */
font-size: 26px; /* tamanho da letra em 26px */
line-height: 62px; /* altura da linha em 62px */

color: #FFFBFB; /* cor da letra: branco levemente rosado */

} /* fecha as regras do texto MENU */



/* Regras para a caixa q2 (a caixa da foto de ESPAÇOS) */
.q2{ /* abre as regras da caixa q2 */

position: absolute; /* posiciona a caixa em um lugar exato */
width: 290px; /* largura de 290px */
height: 390px; /* altura de 390px */
left: 1035px; /* fica a 1035px da esquerda */
top: 909px; /* fica a 909px do topo */

background: linear-gradient(0deg, #020202, #000000), #000000; /* fundo quase preto com um degradê bem sutil, e preto por baixo */
} /* fecha as regras da caixa q2 */

/* Regras para a foto de ESPAÇOS */
.espacosft{ /* abre as regras da foto de espaços */

position: absolute; /* posiciona a foto em um lugar exato */
width: 290px; /* largura de 290px */
height: 390px; /* altura de 390px */
left: 1035px; /* fica a 1035px da esquerda */
top: 909px; /* fica a 909px do topo */


} /* fecha as regras da foto de espaços */
/* Regras para o texto ESPAÇOS em cima da foto */
.ESPACOS{ /* abre as regras do texto ESPAÇOS */


position: absolute; /* posiciona o texto em um lugar exato */
bottom: 225px; /* fica a 225px da parte de baixo */
left: 1120px; /* fica a 1120px da esquerda */


font-family: 'Inknut Antiqua'; /* usa a letra Inknut Antiqua */
font-style: normal; /* letra normal, sem itálico */
font-weight: 400; /* peso da letra normal */
font-size: 26px; /* tamanho da letra em 26px */
line-height: 62px; /* altura da linha em 62px */

color: #FFFBFB; /* cor da letra: branco levemente rosado */
} /* fecha as regras do texto ESPAÇOS */


/* Primeira regra da caixa q3 (ela é repetida logo abaixo; a segunda sobrescreve os valores iguais) */
.q3{ /* abre a primeira regra da q3 */

position: absolute; /* posiciona a caixa em um lugar exato */
width: 290px; /* largura de 290px */
height: 390px; /* altura de 390px */
left: 978px; /* fica a 978px da esquerda (depois será trocado pela regra de baixo) */
top: 909px; /* fica a 909px do topo */

} /* fecha a primeira regra da q3 */

/* Segunda regra da caixa q3 (a caixa da foto de HISTORIA); ela vale por último, então o left de 1450px ganha */
.q3{ /* abre a segunda regra da q3 */

position: absolute; /* posiciona a caixa em um lugar exato */
width: 290px; /* largura de 290px */
height: 390px; /* altura de 390px */
left: 1450px; /* fica a 1450px da esquerda */
top: 909px; /* fica a 909px do topo */

background: linear-gradient(0deg, #000000, #000000), #000000; /* fundo preto */

} /* fecha a segunda regra da q3 */
/* Regras para a foto de HISTORIA */
.historiaft{ /* abre as regras da foto de história */

position: absolute; /* posiciona a foto em um lugar exato */
width: 290px; /* largura de 290px */
height: 390px; /* altura de 390px */
left: 1450px; /* fica a 1450px da esquerda */
top: 909px; /* fica a 909px do topo */

} /* fecha as regras da foto de história */
/* Regras para o texto HISTORIA em cima da foto */
.HISTORIA{ /* abre as regras do texto HISTORIA */

position: absolute; /* posiciona o texto em um lugar exato */
bottom: 225px; /* fica a 225px da parte de baixo */
left: 1530px; /* fica a 1530px da esquerda */

font-family: 'Inknut Antiqua'; /* usa a letra Inknut Antiqua */
font-style: normal; /* letra normal, sem itálico */
font-weight: 400; /* peso da letra normal */
font-size: 26px; /* tamanho da letra em 26px */
line-height: 62px; /* altura da linha em 62px */

color: #FFFBFB; /* cor da letra: branco levemente rosado */
} /* fecha as regras do texto HISTORIA */


/* Primeira regra da caixa q4 (repetida logo abaixo; a segunda sobrescreve os valores iguais) */
.q4{ /* abre a primeira regra da q4 */

position: absolute; /* posiciona a caixa em um lugar exato */
width: 290px; /* largura de 290px */
height: 390px; /* altura de 390px */
left: 670px; /* fica a 670px da esquerda (depois será trocado pela regra de baixo) */
top: 912px; /* fica a 912px do topo */
} /* fecha a primeira regra da q4 */


/* Segunda regra da caixa q4 (a caixa da foto de RESERVA); o left de 615px ganha por vir por último */
.q4{ /* abre a segunda regra da q4 */

position: absolute; /* posiciona a caixa em um lugar exato */
width: 290px; /* largura de 290px */
height: 390px; /* altura de 390px */
left: 615px; /* fica a 615px da esquerda */
top: 912px; /* fica a 912px do topo */

background: linear-gradient(0deg, #000000, #000000), #000000; /* fundo preto */
} /* fecha a segunda regra da q4 */


/* Regras para o texto RESERVA em cima da foto */
.RESERVA{ /* abre as regras do texto RESERVA */

position: absolute; /* posiciona o texto em um lugar exato */
bottom: 225px; /* fica a 225px da parte de baixo */
left: 700px; /* fica a 700px da esquerda */


font-family: 'Inknut Antiqua'; /* usa a letra Inknut Antiqua */
font-style: normal; /* letra normal, sem itálico */
font-weight: 400; /* peso da letra normal */
font-size: 26px; /* tamanho da letra em 26px */
line-height: 62px; /* altura da linha em 62px */

color: #FFFBFB; /* cor da letra: branco levemente rosado */
} /* fecha as regras do texto RESERVA */


/* Regras para a foto de RESERVA */
.reservaft{ /* abre as regras da foto de reserva */
position: absolute; /* posiciona a foto em um lugar exato */
width: 290px; /* largura de 290px */
height: 390px; /* altura de 390px */
left: 615px; /* fica a 615px da esquerda */
top: 912px; /* fica a 912px do topo */
} /* fecha as regras da foto de reserva */


/* Regras para um rodapé fixo (a class "footer"; no HTML atual não existe nenhum elemento com essa class) */
.footer { /* abre as regras do rodapé fixo */
  position: fixed; /* prende o elemento na tela, mesmo quando a pessoa rola a página */
  left: 0; /* encosta na esquerda da tela */
  bottom: 0; /* encosta na parte de baixo da tela */
  width: 100%; /* ocupa toda a largura da tela */
  background-color: red; /* fundo vermelho */
  color: white; /* letra branca */
  text-align: center; /* texto centralizado */
} /* fecha as regras do rodapé fixo */

/* Regras para a class "lessence" (minúscula; no HTML atual não existe nenhum elemento com essa class) */
.lessence{ /* abre as regras da class lessence */

position: absolute; /* posiciona em um lugar exato */
width: 274px; /* largura de 274px */
height: 274px; /* altura de 274px */
left: 850px; /* fica a 850px da esquerda */
top: 1370px; /* fica a 1370px do topo */

} /* fecha as regras da class lessence */



/* Primeira regra de LEssence (o nome do restaurante); é repetida logo abaixo */
.LEssence{ /* abre a primeira regra de LEssence */

position: absolute; /* posiciona o texto em um lugar exato */
width: 408px; /* largura de 408px (depois será trocada pela regra de baixo) */
height: 119px; /* altura de 119px (depois será trocada) */
left: 122px; /* fica a 122px da esquerda (depois será trocado) */
top: 302px; /* fica a 302px do topo (depois será trocado) */

font-family: 'Gilda Display'; /* usa a letra Gilda Display (uma fonte elegante do Google Fonts) */
font-style: normal; /* letra normal, sem itálico */
font-weight: 400; /* peso da letra normal */
font-size: 96px; /* tamanho da letra em 96px (depois será trocado) */
line-height: 113px; /* altura da linha em 113px (depois será trocada) */

color: #FFFFFF; /* cor da letra: branco (depois será trocada para dourado) */
} /* fecha a primeira regra de LEssence */


/* Segunda regra de LEssence; como vem por último, estes valores é que valem na tela */
.LEssence{ /* abre a segunda regra de LEssence */

position: absolute; /* posiciona o texto em um lugar exato */
width: 217px; /* largura de 217px */
height: 48px; /* altura de 48px */
left: 39px; /* fica a 39px da esquerda */
top: 87px; /* fica a 87px do topo */

font-family: 'Gilda Display'; /* usa a letra Gilda Display */
font-style: normal; /* letra normal, sem itálico */
font-weight: 400; /* peso da letra normal */
font-size: 48px; /* tamanho da letra em 48px */
line-height: 56px; /* altura da linha em 56px */

color: #BD9B52; /* cor da letra: dourado */
} /* fecha a segunda regra de LEssence */


/* Regras para a frase de apresentação (a class "Mais") */
.Mais{ /* abre as regras da frase de apresentação */

position: absolute; /* posiciona o texto em um lugar exato */
width: 510px; /* largura de 510px */
height: 84px; /* altura de 84px */
left: 113px; /* fica a 113px da esquerda */
top: 506px; /* fica a 506px do topo */

font-family: 'Gilda Display'; /* usa a letra Gilda Display */
font-style: normal; /* letra normal, sem itálico */
font-weight: 400; /* peso da letra normal */
font-size: 24px; /* tamanho da letra em 24px */
line-height: 28px; /* altura da linha em 28px */

color: #FFFFFF; /* cor da letra: branco */

} /* fecha as regras da frase de apresentação */
/* Regras para o slogan (a class "tradicao") */
.tradicao{ /* abre as regras do slogan */

position: absolute; /* posiciona o texto em um lugar exato */
width: 358px; /* largura de 358px */
height: 48px; /* altura de 48px */
left: 113px; /* fica a 113px da esquerda */
top: 435px; /* fica a 435px do topo */

font-family: 'Gilda Display'; /* usa a letra Gilda Display */
font-style: normal; /* letra normal, sem itálico */
font-weight: 400; /* peso da letra normal */
font-size: 20px; /* tamanho da letra em 20px */
line-height: 24px; /* altura da linha em 24px */

color: #DBBB7D; /* cor da letra: dourado claro */

} /* fecha as regras do slogan */

/* Regras para a imagem "ouro" (o enfeite dourado) */
.ouro{ /* abre as regras da imagem ouro */
position: absolute; /* posiciona a imagem em um lugar exato */
width: 200px; /* largura de 200px */
height: 150px; /* altura de 150px */
left: 30px; /* fica a 30px da esquerda */
top: -20px; /* fica 20px acima do topo (o valor negativo puxa a imagem para cima) */
} /* fecha as regras da imagem ouro */

/* Regras para a class "Restaurante" (com R maiúsculo; no HTML a class está escrita "restaurante", em minúsculo, então estas regras não pegam nela) */
.Restaurante{ /* abre as regras da class Restaurante */

position: absolute; /* posiciona o texto em um lugar exato */
width: 217px; /* largura de 217px */
height: 48px; /* altura de 48px */
left: 39px; /* fica a 39px da esquerda */
top: 87px; /* fica a 87px do topo */

font-family: 'Gilda Display'; /* usa a letra Gilda Display */
font-style: normal; /* letra normal, sem itálico */
font-weight: 400; /* peso da letra normal */
font-size: 48px; /* tamanho da letra em 48px */
line-height: 56px; /* altura da linha em 56px */

color: #BD9B52; /* cor da letra: dourado */
} /* fecha as regras da class Restaurante */


/* Regras para a class "qq5" (com dois q; no HTML atual não existe nenhum elemento com essa class) */
.qq5{ /* abre as regras da class qq5 */

position: absolute; /* posiciona em um lugar exato */
width: 113px; /* largura de 113px */
height: 31px; /* altura de 31px */
left: 1680px; /* fica a 1680px da esquerda */
top: 45px; /* fica a 45px do topo */
border-style: solid; /* a borda é uma linha sólida */
border-color: #FFED62; /* a borda é amarela */
background: rgba(255, 119, 0, 0.377); /* fundo laranja meio transparente (o 0.377 é a transparência) */
} /* fecha as regras da class qq5 */

/* Regras para o botão RESERVAR (a class "reservar") */
.reservar{ /* abre as regras do botão reservar */

position: absolute; /* posiciona o texto em um lugar exato */
width: 113px; /* largura de 113px */
height: 31px; /* altura de 31px */
left: 1680px; /* fica a 1680px da esquerda */
top: 45px; /* fica a 45px do topo */

font-family: 'Katibeh'; /* usa a letra Katibeh (uma fonte do Google Fonts) */
font-style: normal; /* letra normal, sem itálico */
font-weight: 400; /* peso da letra normal */
font-size: 22px; /* tamanho da letra em 22px */
line-height: 38px; /* altura da linha em 38px */

color: #FFFFFF; /* cor da letra: branco */

opacity: 0.84; /* deixa o texto um pouco transparente (84% visível) */
} /* fecha as regras do botão reservar */
/* Regras para a imagem da página inicial (a class "pagina") */
.pagina{ /* abre as regras da imagem da página inicial */

position: absolute; /* posiciona a imagem em um lugar exato */
width: 1895px; /* largura de 1895px */
height: 776px; /* altura de 776px */
left: 2px; /* fica a 2px da esquerda */
top: 0px; /* fica a 0px do topo */
margin-top: 100px; /* dá 100px de espaço em cima, empurrando a imagem para baixo */

} /* fecha as regras da imagem da página inicial */
/* Regras para a imagem do negócio */
.negocio{ /* abre as regras da imagem do negócio */
position: absolute; /* posiciona a imagem em um lugar exato */
width: 800px; /* largura de 800px */
height: 400px; /* altura de 400px */
left: 10px; /* fica a 10px da esquerda */
top: 400px; /* fica a 400px do topo */

} /* fecha as regras da imagem do negócio */



/* Regras para o cabeçalho do topo (onde fica o menu) */
header { /* abre as regras do cabeçalho */
    background-color: #1a1a1a; /* fundo cinza muito escuro */
    padding: 15px 40px; /* espaço de dentro: 15px em cima e embaixo, 40px nos lados */
} /* fecha as regras do cabeçalho */
 
/* Regras para a barra de navegação */
nav { /* abre as regras da barra de navegação */
    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 { /* abre as regras dos links do menu */
    color: white; /* deixa a letra dos links branca */
    text-decoration: none; /* tira o sublinhado dos links */
    font-size: 13px; /* define o tamanho da letra em 13px */
    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 { /* abre as regras do mouse em cima do link */
    color: #b8864b; /* a letra muda para um tom de marrom dourado */
} /* fecha as regras do mouse em cima do link */
 
/* Regras para o link RESERVAR, que parece um botão */
.botao-menu { /* abre as regras do botão do menu */
    border: 1px solid #b8864b; /* desenha uma borda fina em marrom dourado em volta do link */
    padding: 6px 18px; /* espaço de dentro: 6px em cima e embaixo, 18px nos lados */
    color: #b8864b; /* deixa a letra em marrom dourado */
} /* fecha as regras do botão do menu */