/* --- Overwrite of the Main Content --- */
.mainContent {
    font-size: 120%;
}
/* --- Page Title --- */
.page-title {
    margin-bottom: 6rem;
}
/* --- Page Description --- */
.page-description {
    margin-bottom: 2rem;
    padding: 0.5rem 0.4rem;
    /* width: fit-content; */ /* I'm not sure what I prefer*/

    background-color: antiquewhite;
    border: 1px solid black;
    outline: 2px solid #c49a30;
}
/* --- Nav buttons --- */
.wiki-nav {
    position: relative;
    height: 100px; /* enough to contain the buttons */
}
.wiki-nav .mw-frame {
    
    min-width: 15rem;
}

.wiki-nav .nav-prev {
    position: absolute;
    left: 10%;
}
.wiki-nav .nav-next {
    position: absolute;
    right: 10%;
}
.nav-button{
    background-color: #110e08;
    text-decoration: none;
}
.nav-button:hover,
.nav-button.active {
    background: #261a07;
    color: #f0c040;
    border-color: #c49a30;
}
/* --- Section Title --- */
.text-content h2 {
}
.text-content h2::before {
    content: "᯼    ";
    font-size: 0.8rem;
}
.text-content h2::after {
    content: "    ᯼";
    font-size: 0.8rem;
}

/* --- Section Subitle --- */
.text-content h3 {
}
/* --- Line separator '---' --- */
/* moving top down trangles
.text-content hr {
    border: none;
    height: 20px;
    background:
        linear-gradient(135deg, #8c7a5b 25%, transparent 25%) -10px 0,
        linear-gradient(225deg, #8c7a5b 25%, transparent 25%) -10px 0;
    background-size: 20px 20px;
    background-repeat: repeat-x;
    animation: wave 7s linear infinite;
}
@keyframes wave {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: 120px;
    }
}
*/
.text-content hr {
    border: none;
    margin: 2rem 0;
}
hr::after {
    content: "ᛟ ᛞ ✧ ᛞ ۞ ᛞ ✧ ᛞ ᛟ";
    display: block;
    text-align: center;
    font-size: 1.2rem;
    color: #997b22;
    letter-spacing: 0.6em;
    opacity: 0.9;
}

/* --- Blockquote --- */
.text-content blockquote {
    padding-left: 1rem;
    font-style: italic;

    background: #EBE0C8;
    border-left: 3px solid #CEC4AF;
    border-radius: 5px;
    padding: 1em;
    margin: 0 0 0.5em 0.5em;
    display: table;
}

/* --- Image with Optional Description --- */
/* Useful styles:
float: left / right  posiziona l'immagine di fianco al testo
*/
.mainContent .image-frame {
    display: table;             /* shrinks to image width, lets caption wrap */
    margin-bottom: 2rem;        

    border: 3px solid black;
    outline: 4px solid #8b6a2f;
}

.mainContent .image-frame img {
    display: block;
    height: auto; 
    width: 100%;
    box-sizing: border-box;
    
    background-color: #110e08a9;
    border: 3px solid #8b6a2f;
    padding: 3px 3px;
    outline: 2px solid black;
}

.mainContent .image-frame figcaption {
    padding: 2px;
    margin-top: 2px;            /* to make space for the outline of the figure*/
    width: 0;                   /* caption contributes 0 to parent sizing to avoid going over image width */
    min-width: 100%;            /* but then fills the parent once established */

    background-color: antiquewhite;
    border: 3px solid #8b6a2f;
    outline: 2px solid black;

    font-size: 0.9rem;
    line-height: 1.3;
    box-sizing: border-box;
    word-wrap: break-word;      /* handles very long unbroken words */
}