@font-face {
    font-family: 'Pirata One';
    src: url(../fontes/PirataOne-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
    }
    @font-face {
    font-family: 'Uncial Antiqua';
    src: url(../fontes/UncialAntiqua-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Pirata One',serif;
    }
    p{
        text-indent: 30px;
        font-size: 1.3em;
    }
    body{
        background-image: url(imagens/fundo01.png);
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-color: #f3debe;
    }
    abbr{
        text-decoration: none;
    }
    h2, h3 {
        font-family: 'Uncial Antiqua',serif;
        font-size: 2em;
        color: #4B2D0D;
    }
    h1{
        font-size: 50px;
        color: #4B2D0D;
        letter-spacing: 6px;
    }
    a{
        color: #5C3A1E;
        text-decoration: underline;
        font-size: 20px;
    }
    a:hover{
        text-shadow: 0 0 10px rgba(255, 223, 186, 0.8);
        filter: brightness(1.8);
    }
    h2 a {
        font-family: 'Uncial Antiqua',serif;
        text-decoration: none;
        color: #4B2D0D;
        font-size: 1.0em;
    }
    header{
        background-image: linear-gradient(45deg, #c4a48477, #b89b7280);
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.418);
        transition: all 0.3s ease;
    }
    header:hover{
        transition: all 0.3s ease;
        filter: brightness(1.1);
    }
    .tituloHeader {
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .menuHeader{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    button{
        background-color: #4b2d0db6;
        width: 130px;
        height: 50px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 15px;
        transition: all 0.3s ease;
        font-size: large;
    }
    button:hover{
        text-shadow: 0 0 10px rgba(255, 223, 186, 0.8);
        filter: brightness(1.3);
        transition: all 0.3s ease;
    }
    button:active {
        transform: scale(0.95);
    }
      /*Rodapé da página*/
    footer {
        margin-top: 80px;
        background-image: linear-gradient(45deg, #c4a4847a, #b89b7280);
        padding: 10px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.418);
        text-align: center;
        transition: all 0.3s ease;
    }
    footer:hover{
        transition: all 0.3s ease;
        filter: brightness(1.2);
    }
      /*onde colocar os pergaminhos inteiros*/
    main {
        margin-top: 50px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 20px;
        gap: 100px;
    }
      /*Pergaminho inteiro com o texto*/
    .item {
        transition: all 0.3s ease;
        position: relative;
        width: 700px;
        height: auto;
        border-radius: 5px;
        overflow: hidden;
    }
    .item-imagem {
        transition: all 0.3s ease;
        position: relative;
        width: 250px;
        height: 330px;
        border-radius: 5px;
        overflow: hidden;
    }
    .item h2 {
        text-align: center;
    }
    .item ol {
        margin-top: 10px;
        list-style-type: disc;
        padding-left: 20px;
    }
    .item li{
        margin-top: 5px;
    }
      /*Pergaminho sozinho(imagem)*/
    .pergaminho {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;

    }
      /*Texto no pergaminho*/
    .textoNoPergaminho {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #4B2D0D;
        font-size: 16px;
        padding: 10px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 75%;
    }
    @media (max-width: 768px) {
        .menuHeader {
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        .item {
            width: 100%;
            height: auto;
        }
    }