/* 
  font-family: "Fredericka the Great", serif;
  font-family: "Cinzel", serif;
/* Variáveis para o style */
:root {
  --corprincipal: red;
  --altocontrastefundo: #000000;
  --altocontrastetexto: #ffffff;
  --altocontrastelink: yellow;
  --tamanhofontebase: 1rem; 
  --fontecorpo: font-family: "Fredericka the Great", serif;
  --fontetitulo: font-family: "Cinzel", serif;
}

/* Corpo e fonte base */
body {
  font-size: var(--tamanhofontebase);
  font-family: var(--fontecorpo);
  margin: 0;
  padding: 0;
}

/* Cabeçalho */
header {
  background-color: rgba(255, 0, 0, 0.493);
}

/* Nav */
.nav-img {
  width: 300px;
  height: 150px;
}

.nav-link {
  color: var(--corprincipal);
  margin: 10px;
  background-color: rgb(255,190,190);
  border-radius: 50px;
}

.nav-link:hover { /* mouse em cima */
  background-color: red;
  color: white;
  box-shadow: 5px 5px 5px silver;
  font-weight: 800;
}

/* Botões e acessibilidade no nav */
.menu-acessibilidade {
position: fixed;
/* → fixa o elemento na tela, ele NÃO se move quando a página rola */
top: 2rem;
/* → distância do topo da janela */
right: 20px;
/* → distância da borda direita da janela */
z-index: 1000;
/* → define prioridade na sobreposição: 1000 é alto, o elemento fica na frente */
}

.rotacao-botao {
  transform: rotate(-90deg);
/* → o botão começa virado 90 graus pra esquerda, tipo deitado */

transform-origin: right center;
/* o ponto que o botão gira é a borda direita, no meio da altura. Isso faz ele girar “em torno desse ponto”, tipo uma dobradiça. Então, quando você clica e muda essa rotação, o botão “vira” pra ficar na vertical, bem no meio */
}

.opcoes-acessibilidade {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

#botao-acessibilidade, #aumentar-fonte, #diminuir-fonte, #alterna-contraste{
background-color: rgba(255,134,134,0.62);
  border: white;
}

/* TROCAR A COR DO MENU ACESSIBILIDADE AO PASSAR O MOUSE NELE */
#botao-acessibilidade:hover, #aumentar-fonte:hover, #diminuir-fonte:hover, #alterna-contraste:hover{
background-color: rgba(255,0,0,0.4);
}

.opcoes-acessibilidade button {
  margin-bottom: 5px;
}

.apresenta-lista {
  display: none;
}

/* Seção "inicio" */
section {
  padding-bottom: 5rem;
}

.inicio-fundo {
  background-image: url('fotoinicial.png');
  background-size: cover;
  background-position: center;
  border-radius: 80px;
  width: 100%;
  height: auto;
  padding: 40px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Se estiver em alto contraste, a foto mudará para: */
body.alto-contraste .inicio-fundo {
  background-image: url('fotoinicialcontraste.png');
}

.esquerda-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.imagem {
  display: flex;
  gap: 50px; /* espaço entre */
  justify-content: center;
  flex-wrap: wrap; /*  faz com que os elementos dentro quebrem de linha quando não couberem mais na mesma linha, tipo uma frase muito grande. */ 
}

.imagem img {
  width: 80%;
  max-width: 500px;
  height: auto;
  margin: 0 auto;
}

.display-4 {
  font-family: var(--fontecorpo);
  color: goldenrod;
  text-align: center;
  margin-bottom: 50px;
  font-size: calc(var(--tamanhofontebase) * 2.5);
}

.botao-inicio {
  background-color: red;
  border-radius: 30px;
  border: none;
  width: 14em;
  height: 3em;
  margin-top: 50px;
  box-shadow: 5px 5px 5px rgb(0, 0, 0);
  color: white;
  font-weight: bold;
  font-size: calc(var(--tamanhofontebase) * 1);
}

.botao-inicio:hover {
  background-color: white;
  color: var(--corprincipal);
  box-shadow: 5px 5px 5px rgb(134, 50, 50);
}

.fonte { /* fonte da imagem */
  font-size: calc(var(--tamanhofontebase) * 0.6);
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 20px;
  background-color: rgba(97, 96, 96, 0.54);
  padding: 5px;
  border-radius: 50px;
  color: white;
  text-decoration: none;
}

.fonte a {
  color: white;
  text-decoration: none;
}


h2 {
  font-family: var(--fontetitulo);
  font-size: calc(var(--tamanhofontebase) * 2.5);
  font-style: normal;
  color: var(--corprincipal);
}

/* Seção "galeria" */
#galeria {
  background-color: #E9A7A78C;
border-radius: 50px;
}

.fundo-galeria {
 background: 
url('borboleta.png') bottom right no-repeat,
url('pássaro.png') top left no-repeat;
background-size: 250px 180px, 250px 100px;
}

/* Imagens da galeria */
.img-fluid {
  max-width: 100%;
  height: auto;
/* defina uma altura se por um acaso suas imagens ficaram muuuito diferentes */
}

/* Seção "contato" */
#contato {
  background-image: url('fundo.png');
border-radius: 50px;
  background-size: cover;
  padding: 4rem 0;
 margin-top: 50px;
}

.formulario {
  background-color: #FFFFFF00;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  font-weight: bold;
  font-size: calc(var(--tamanhofontebase) * 1);
}
.mb-3{
color: goldenrod;
text-align: center;
}

.formulario button {
  background-color: red;
  border: none;
  font-weight: bold;
  font-size: calc(var(--tamanhofontebase) * 1);
}

.formulario button:hover {
background-color: white;
color: red;
box-shadow: 5px 5px 5px black;
}
.form-control {
  background-color: #F1EDEF;
  font-size: calc(var(--tamanhofontebase) * 1);
}

/* Rodapé */
footer {
  text-align: center;
  padding: 1rem;
  font-style: italic;
}

/* Ícones no rodapé */
.bi {
  font-size: 1.5rem;
  margin: 0 5px;
}

/* Alto contraste (acessibilidade) */
.alto-contraste {
  background-color: var(--altocontrastefundo);
  color: var(--altocontrastetexto);
}

.alto-contraste header,
.alto-contraste footer,
.alto-contraste .formulario {
  background-color: var(--altocontrastefundo);
  color: var(--altocontrastetexto);
}

.alto-contraste .nav-link {
  color: white;
  background-color: rgb(255,0,0);
}

.alto-contraste .nav-link:hover {
  color: white;
  font-weight: 800;
  background-color: red;
  box-shadow: 5px 4px 4px white;
}

.alto-contraste .botao-inicio,
.alto-contraste .formulario button {
  background-color: red;
  color: white;
box-shadow: 5px 4px 4px white;
}

.alto-contraste .botao-inicio:hover,
.alto-contraste .formulario button:hover,
.alto-contraste .btn-primary:hover {
background-color: #1E2655;
color: yellow;
box-shadow: 5px 5px 5px yellow;
}

.alto-contraste #onedirection {
  background: none;
}

.alto-contraste #galeria {
  background-color: var(--altocontrastefundo);
}

.alto-contraste .fundo-galeria {
  background: none;
}