@charset "UTF-8";


/* Zera margens padrão do navegador */
* {
    margin: 0px;
    padding: 0px;
}










/* Edição da cor de fundo do site */
body {
    background-color: #2c1a13;
}










/* Edição do cabeçalho */
header {
    display: flex;
    margin: auto;
}

/* Logotipo do restaurante */
header img {
    margin: auto;
    width: 250px;
    height: 250px;
}










/* Menu de Navegação */
nav {
    text-align: center;
    background-color: rgba(112, 26, 15);
    width: 100%; /* ocupa toda a largura da tela */
    max-width: 800px; /* não deixa passar do limite da tela*/
    box-sizing: border-box;
    margin: auto;
    border: 1px solid rgba(237, 205, 126, 0.829);
    border-radius: 8px;
    overflow-x: auto; /* cria rolagem horizontal se precisar */
    /*position: sticky;
    top: 0; deixa o menu etático, ele se movimenta junto da página */ 
}

/* Edição dos links do Menu de Navegação */
nav a {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    padding: 5px 12px; 
    text-decoration: none;
    color: rgba(237, 205, 126, 0.884);
    border: 0.1px solid transparent;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Faz um estilo ao passar o mouse no Menu de Navegação */
nav a:hover {
    background-color: #2c1a13;
    border: 0.1px solid;
    border-color: rgba(237, 205, 126, 0.884);
}
























/* Ajuste de onde está o conteúdo principal da página */
main {
    text-align: center;
    padding: 20px;
    min-width: 100px;
    max-width: 800px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #2c1a13;
    border: 1px solid rgba(237, 205, 126, 0.829);
    border-radius: 10px;
}





/* Título do main - "Nossa História" em h1 */
.titulo-historia-restaurante {
    font-family: "Dancing Script", cursive;
    font-weight: bolder;
    font-size: 50px;
    text-align: center;
    color: rgba(237, 205, 126, 0.829);
    margin-top: 15px;
    /*background-color: rgba(112, 26, 15);
    border-radius: 20px 0 20px 0;
    border: 1px solid rgba(237, 205, 126, 0.829);*/
}


/* Parágrafo da história do restaurante */
.descricao-historia-do-restaurante {
    text-align: justify;
    font-size: 20px;
    color: rgba(237, 205, 126, 0.829);
    min-width: 100px;
    max-width: 800px;
    margin: 5px;
    margin-top: 20px;
}





/* Ajuste dos títulos h2 */
.titulos-cardapios {
    font-family: "Dancing Script", cursive;
    color: rgba(237, 205, 126, 0.829);
    background-color: rgba(112, 26, 15);
    border-radius: 20px 0 20px 0;
    border: 1px solid rgba(237, 205, 126, 0.829);
    font-weight: bolder;
    font-size: 40px;
    text-align: center;
    margin-top: 70px;
    display: inline-block;
    padding: 10px 20px;
}















/* Container de cada prato */
.container-prato {
    text-align: justify;
    display: flex;
    align-items: center; /* centraliza verticalmente */
    gap: 10px; /* espaço entre a foto e o texto */
    margin: 24px 0;
    max-width: 800px;
}

/* Imagem dos pratos do cardápio */
.container-prato img {
    width: 200px;
    height: auto;
    border-radius: 50%;
    border: 3px solid rgba(237, 205, 126, 0.829);
    margin-top: 30px;
}

/* Edição dos nomes dos pratos em h3 */
.nome-pratos {
    text-align: center;
    color: rgba(237, 205, 126, 0.829);
    background-color: rgba(112, 26, 15);
    border-radius: 20px 0 20px 0;
    border: 1px solid rgba(237, 205, 126, 0.829);
    margin: 0 0 8px 0;
    font-size: 24px;
}

/* Edição da descrição dos pratos */
.descricao-dos-pratos {
    color: rgba(237, 205, 126, 0.829);
}

















/* Nome dos Chef's em h3 */
.nome-chef {
    text-align: center;
    color: rgba(237, 205, 126, 0.829);
    margin-top: 20px;
}

/* Biografia Chef 1 - Churrasco */
.biografia_chef {
    text-align: justify;
    color: rgba(237, 205, 126, 0.829);
    margin: auto;
    margin-top: 15px;
    min-width: 100px;
    max-width: 800px;
}

/* Edição imagem dos Chef's */
.imagem-chef {
    display: block;
    margin: 20px auto;
    margin-top: 5px;
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 50%;
    border: 3px solid rgba(237, 205, 126, 0.829);
}











/* Faz uma rolagem suave ao clicar nos links do menu */
html {
    scroll-behavior: smooth;
}






/* Nome dos campos para reserva */
.formulario {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-weight: bolder;
    color: rgba(237, 205, 126, 0.829);
    margin-top: 25px;
}

/* Tamanho do campo onde será digitado as informações para reserva */
.campoDigito {
    min-width: 100px;
    max-width:200px;
}

/* Botão para realizar a reserva 
.botao {
    background-color: rgba(112, 26, 15);
    color: rgba(237, 205, 126, 0.829);
    border: 1px solid rgba(237, 205, 126, 0.829);
    border-radius: 10px;

    margin-right: 650px;
    margin-top: 10px;
}*/










/* Edição da imagem dos contatos */
.imagem-contatos {
    width: 25px;
    height: 25px;
    margin-top: 3px;
    border: 1px solid rgba(237, 205, 126, 0.829);
    border-radius: 8px;
}

.cor-texto-contatos {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(237, 205, 126, 0.829);
    margin: 6px;
}



.teste {
    border-radius: 50%;
    max-width: 300px;
    border: 3px solid rgba(237, 205, 126, 0.829);
}