/* Estilo geral */
body {
    font-family: Arial, sans-serif; /* Define a fonte padrão do site */
    font-size: 20px; /* Define o tamanho da fonte */
    color: #ffffff; /* Define a cor do texto como branco */
    margin: 0; /* Remove margens padrão */
    padding: 0; /* Remove padding padrão */
    background-color: #e9e9e9; /* Define a cor de fundo padrão como cinza claro */
    background-image: url("fundo.jpg"); /* Define uma imagem de fundo */
    background-repeat: no-repeat; /* Evita que a imagem de fundo se repita */
    background-attachment: fixed; /* Fixa a imagem de fundo, de modo que não se mova ao rolar a página */
    background-size: cover; /* Faz a imagem de fundo cobrir toda a área da página */
    background-position: fixed; /* Fixa a posição do fundo, mesmo ao redimensionar a janela */
}

/* Cabeçalho */
header {
    background-color: #8b4513; /* Define a cor de fundo do cabeçalho como marrom */
    color: #ffb37c; /* Define a cor do texto do cabeçalho como um tom claro de laranja */
    padding: 20px 0; /* Adiciona 20px de padding na parte superior e inferior do cabeçalho */
    text-align: center; /* Centraliza o texto no cabeçalho */
}

header h1 {
    margin: 0; /* Remove a margem do título dentro do cabeçalho */
}

/* Conteúdo principal */
.conteudo {
    padding: 30px; /* Adiciona 30px de padding em todos os lados */
    margin: 5%; /* Adiciona uma margem de 5% em todos os lados */
    background-color: #00000091; /* Define um fundo semi-transparente preto */
    width: calc(90% - 60px); /* Define a largura como 90% da página menos 60px */
    border-radius: 10px; /* Arredonda os cantos do bloco de conteúdo */
}

h2 {
    color: #ffb37c; /* Define a cor do texto como laranja claro */
    background-color: #8b4513; /* Define a cor de fundo do título como marrom */
    display: inline; /* Define o título como um elemento inline, o que significa que ele não quebra a linha automaticamente */
    padding: 10px; /* Adiciona 10px de padding ao redor do título */
    border-radius: 10px; /* Arredonda os cantos do título */
}

main p {
    margin-bottom: 20px; /* Adiciona um espaçamento inferior de 20px entre os parágrafos */
}

/* Rodapé */
.rodape {
    position: fixed; /* Fixa o rodapé na parte inferior da tela */
    left: 0; /* Alinha o rodapé à esquerda */
    bottom: 0; /* Alinha o rodapé na parte inferior da tela */
    width: 100%; /* Faz o rodapé ocupar 100% da largura da página */
    background-color: #252525; /* Define a cor de fundo do rodapé como cinza escuro */
    color: white; /* Define a cor do texto do rodapé como branco */
    text-align: center; /* Centraliza o texto no rodapé */
    padding: 10px 0; /* Adiciona 10px de padding na parte superior e inferior do rodapé */
}

/* Estiliza o texto do parágrafo dentro do rodapé */
.rodape p {
    margin: 0; /* Remove a margem padrão dos parágrafos no rodapé */
    font-size: 15px; /* Define o tamanho da fonte dos parágrafos no rodapé */
}

/* Alinha o texto ao centro */
.Centro {
    text-align: center; /* Centraliza o texto de qualquer elemento com a classe "Centro" */
}

/* Define a largura de imagens com a classe "foto" */
.foto {
    width: 250px; /* Define a largura da imagem como 250px */
}

/* Define a largura de imagens com a classe "perfumes" */
.perfumes {
    width: 40%; /* Define a largura da imagem como 40% da largura do contêiner pai */
}

/* Define a largura de imagens com a classe "ervas" */
.ervas {
    width: 30%; /* Define a largura da imagem como 30% da largura do contêiner pai */
}

/* Contêiner flexível */
.container {
    display: flex; /* Define o contêiner como flexível, permitindo alinhamento de itens */
    align-items: center; /* Alinha os itens do contêiner verticalmente ao centro */
    justify-content: center; /* Centraliza os itens do contêiner horizontalmente */
}



.center{
    text-align: center;
}

.medieval-button {
    position: relative;
    background-color: #000000;
    padding: 15px 30px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 15px;
    border-style: solid;
    overflow: hidden;
    z-index: 1;
}

.medieval-button::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -10%;
    height: 180%;
    width: 0;
    border-radius: 100%;
    background-color: #420505;

    transition: all 750ms 0.3s;
}

.medieval-button:hover::before {
    width: 120%;
    height: 180%;
    transition: all 750ms 0.7s;
}

.button-text {
    position: relative;
    z-index: 2;
    color: white;
}

.sword {
    position: absolute;
    top: 50%;
    right: -100%;
    transform: translateY(-50%);
    transition: right 0.5s ease;
    z-index: -1;
    height: 40px;
}

.medieval-button:hover .sword {
    right: calc(25%);
}