/* Alteração do Box Model */
*, *::after, *::before {box-sizing: border-box;}

html {font-size: 14px;}

body {
    background-color: rgb(255, 255, 255);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Fixar o rodapé */
    /* 1) Etapa */
    display: flex; /* body em modo flex */
    flex-direction: column; /* definir altura */
    min-height: 100vh; /* vh como referência */
}
    /* Fixar o rodapé */
    /* 2) Etapa */
    /* Fazer o conteúdo (main) ocupar todo o espaço necessário para empurrar o rodapé para baixo */
    main {flex: 1;}


img {max-width: 100%;}

/* Reset de elementos */
body, h1, h2, h2, p, figure {
    margin: 0;
    padding: 0;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
}

a {text-decoration: none;}

h1 a {
    color: white;
    background-color: black;
    border-radius: 5px;
    padding: 0.3rem 1rem;
}

header {
    background-color: rgb(255, 255, 255);
    text-transform: uppercase;
    /* Manter o header estático */
    position: sticky;
    /* Cordenadas/onde ficará estático */
    top: 0;

    /* a tag a seguir impede que um conteúdo sobreponha o outro */
    /* tag "z-index:;" */
}
/* Regra para o elemento (no caso, uma div) com a classe limitador E dentro do header*/

/* Importante: O Flex configurado aqui, funcionará SOMENTE para a classe limitador aplicada na DIV dentro do HEADER.
Além disso, ela também estará recebendo max-width e margin vindos da regra da classe. */
header .limitador {
    height: 10vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Regra para QUALQUER elemento com a classe limitador */
.limitador {
    max-width: 1100px;
    margin: auto;
    width: 95%;
}
/* Regras para o texto e link MENU */
nav h2 {text-align: right;}
nav h2 a {
    color: rgb(0, 0, 0);
    padding: 1rem;
    font-size: 1.3rem;
    display: inline-block;
}
/* Sempre que utilizar o hover, também utilizar o focus. Permite a navegação pelo teclado. Tem a função de acessibilidade do usuário */
nav h2 a:hover, .links-menu a:hover {
    background-color: gainsboro;
}

.links-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;

    /* Propriedade utilizada para esconder a lista do menu: display: none; */
}

.links-menu a {
    color: rgb(0, 0, 0);
    /* Negrito */
    font-weight: bold;

    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: whitesmoke;
}
/* Esta regra somente irá funcionar quando as duas regras estiverem juntas (links-menu e aberto) sem espaço, tudo junto*/

/* Esta regra será aplicada posteriormente com auxílio do JS*/
.links-menu.aberto {
    /* Neste ponto, usamos o flex para voltar a exibir o menu (quando aberto) */
    display: flex;
    flex-direction: column;
    /* USAMOS POSITION E CORDENADAS PARA GARANTIR O POSICIONAMENTO CORRETO DO MENU QUANDO ABERTO*/
    position: absolute;
    right: 0;
    left: 0;
}

.destaque {
    background-image: url(../imagens/fundo-destaque.jpg);
    color: aliceblue;
    height: 90vh;
    /* vh e vw são medidas para para  área útil do navegador */

    /* Deixa a imagem em 100% da tela*/
    background-size: cover;
    background-attachment: fixed;
    text-align: center;

    display: flex;
    /* Quebra de linha */
    /* Sempre que usar o wrap, precisa de uma definição de tamanho */
    flex-wrap: wrap;
    /* Alinhamento central */
    justify-content: center;
    /* Alinhamento de ítens individualmente */
    align-items: center;
    /* Alinhamento em bloco */
    align-content: center;
}
/* Definição de tamanho do wrap */
.destaque h2, .destaque p {
    width: 100%;
}

.destaque h2 {
    /* SINTAXE COMPLETA */

    /* Fonte responsiva usando a função chamada clamp(tamanho mínimo, tamanho ideal, tamanho máximo) */
    /* sem espaço entre o clamp e o parentes */
    font-size: clamp(2rem, 10vw, 7rem);

    /* 2 etapa para animação- Chamar e configurar a animação */
    animation-name: aparecer;
    animation-duration: 2s;

    /* Mantém a animação piscando */
    /* animation-iteration-count: infinite; */

    /* Reverte a animação */
    /* animation-direction: alternate-reverse; */

    /* SINTAXE ABREVIADA */
    /* animation: aparecer 3s; */
}

.destaque p {
    /* SINTAXE COMPLETA */
    font-size: clamp(1.5rem, 3vw, 4rem);
    font-weight: bold;
    animation-name: aparecer;
    animation-duration: 2s;
    animation-delay: 1s;
    /* Acerta o aparecimento da animação de antes ou depois */
    animation-fill-mode: backwards;

    /* SINTAXE ABREVIADA */
    /* animation: aparecer 3s 2s backwards; */
}

.front-end, .historia, .localizacao {text-align: center;}

article h2 {padding: 1rem;}

/* Primeiro valor (pra cima e para baixo) Segundo valor (para os lados) */
article p {padding: 0.5rem 0;}

.historia {
    background-image:url(../imagens/fundo-madeira.jpg);
    background-attachment: fixed;
    background-size: cover;
}

.historia h2 {
    color:white;
    text-shadow: black 1px 1px 5px;
}

.historia iframe {
    width: 100%;
    max-width: 700px;
}

.conteudo {
    background-color: rgba(0, 0, 0, 0.062);
    padding: .7rem;
    border-radius: 7px;
}

.conteudo h2 {text-align: center;}

table, th,td {
    border:solid 2px black;
    /* Remove os espaços entre as bordas */
    border-collapse: collapse;
}

table {
    width: 80%;
    margin: auto;
    max-width: 600px;
}

caption {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1rem;
    padding-top: 1rem;
}

th {
    color: aliceblue;
    background-color: black;
    font-size: 1.1rem;
    padding: .5rem;
}

td {
    text-align: center;
    font-weight: bold;
}

td:first-child {text-align: left;}

/* Formata somente o último elemento da página */
td:last-child {
    background-color: rgba(0, 128, 0, 0.363);
}
/* Formatando de forma que você escolhe o elemento com base na sua colocação numérica */
td:nth-child(2) {background-color: rgba(0, 255, 255, 0.493);}

/* tr:nth-child(odd (par) ou even (ímpar)
intercala a formatação na planilha*/








footer {
    background-color: black;
    height: 5rem;
    color: white;
    text-align: center;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}




form {
    width: 95%;
    margin: auto;
    padding: 1rem;
    border-radius: 10px;
}
/* ":not" impede a alteração no elemento nele descrito */
input:not([type=radio]):not([type=checkbox]), select, textarea {
    border: none;
    padding: 1%;
    width: 100%;
    height: 40px;
    box-shadow: black 1px 1px 1px;
}




textarea {height: auto;}

button {box-shadow: black 1px 1px 1px;}
button:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
}

@media screen and (min-width:530px) {
    
}

@media screen and (min-width:700px) {
    html {font-size: 18px;}
    header .limitador {height: 15vh;}
    .destaque {height: 85vh;}
}