/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* ==========================================================
   BRAVADO
   Main Stylesheet
   ========================================================== */

/* ---------- Color Palette ---------- */

:root{
    --background: #141414;
    --panel: #1f1f1f;
    --panel-light: #292929;
    --gold: #C8A54D;
    --gold-light: #E6C66A;
    --text: #EFE8D8;
    --accent-color: #8C2F39;
}

/* ---------- Reset ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ---------- Page ---------- */

body{

    background: #141414;

    color:#EFE8D8;

    font-family:'EB Garamond', serif;

    line-height:1.8;

    font-size:20px;

}
a{

    color:#C8A54D;
    text-decoration:none;
    transition:0.3s;

}

a:visited{

    color:#C8A54D;

}

a:hover{

    color:#E6C66A;

}

/* ---------- Header ---------- */

header{

    text-align:center;

    padding:70px 20px 40px;

}

header h1{

    font-family:'Cinzel', serif;

    font-size:4rem;

    letter-spacing:8px;

    color: #C8A54D;

}

.tagline{

    margin-top:15px;

    color:#d4c8aa;

    font-style:italic;

}

/* ---------- Main ---------- */

main{

    width:min(900px,90%);

    margin:auto;

}

/* ---------- Sections ---------- */

section{

    background:#1F1F1F;

    margin:35px 0;

    padding:40px;

    border:1px solid rgba(200,165,77,.25);

    border-radius:12px;

}

/* ---------- Headings ---------- */

h2{

    font-family:'Cinzel', serif;

    color: #C8A54D;

    margin-bottom:20px;

}

/* ---------- Cover ---------- */

.hero{

    text-align:center;

}

.cover{

    width:280px;

    max-width:100%;

    border-radius:8px;

    border:3px solid #C8A54D;

    margin-bottom:30px;

}

/* ---------- Button ---------- */

.button{

    display:inline-block;

    background:#C8A54D;

    color:#111111;

    padding:15px 40px;

    text-decoration:none;

    font-family:'Cinzel', serif;

    border-radius:8px;

    transition:.3s;

    font-weight:bold;

}

.button:visited{

    color:#111111;

}

.button:hover{

    background:#E6C66A;

    color:#111111;

    transform:translateY(-3px);

}

.button:active{

    color:#111111;

}

/* ---------- Chapter List ---------- */

.chapters ul{

    list-style:none;

}

.chapters li{

    margin:15px 0;

}

.chapters a{

    color:#EFE8D8;

    text-decoration:none;

    transition:.3s;

}

.chapters a:hover{

    color: #C8A54D;

    padding-left:12px;

}

/* ---------- Navigation Links ---------- */

.extras{

    display:flex;

    justify-content:center;

    gap:40px;

    flex-wrap:wrap;

}

.extras a{

    color: #C8A54D;

    text-decoration:none;

    font-family:'Cinzel', serif;

}

.extras a:hover{

    color:white;

}

/* ---------- Footer ---------- */

footer{

    text-align:center;

    padding:40px;

    color:#8d8d8d;

    font-style:italic;

}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#141414;

}

::-webkit-scrollbar-thumb:hover{

    background:#E6C66A;

}

/* ============================= */
/* Chapter Navigation            */
/* ============================= */

.chapter-nav{

    display:flex;

    justify-content:space-between;

    margin-top:40px;

    gap:20px;

    flex-wrap:wrap;

}

.chapter-nav a{

    color:#C8A54D;

    text-decoration:none;

    font-family:'Cinzel', serif;

    transition:.3s;

}

.chapter-nav a:hover{

    color:#E6C66A;

}

.chapter-nav .disabled{

    color:#666666;

    font-family:'Cinzel', serif;

    cursor:default;

}

/* ============================= */
/* Story Text                    */
/* ============================= */

.story{

    max-width:700px;

    margin:auto;

    font-size:1.3rem;

    line-height:1.8;

}

.story p{

    margin-top:0;

    margin-bottom:2em;

    text-indent:2em;

}


/* ---------- Mobile ---------- */

@media (max-width:700px){

    header h1{

        font-size:2.7rem;

        letter-spacing:4px;

    }

    section{

        padding:25px;

    }

    body{

        font-size:18px;

    }

    .button{

        width:100%;

    }

}