/* ============================================================
   CHARACTER WIKI PAGE
   ============================================================ */


/* ============================================================
   EASY-TO-CHANGE COLORS
   ============================================================ */

:root {

    --background:
        #12091c;

    --background-light:
        #181024;

    --text:
        #f2edf5;

    --muted-text:
        #aaa2ae;

    --heading:
        #f3edf5;

    --line:
        #403449;

    --box-border:
        #4b3d52;

    --box-background:
        rgba(18, 9, 28, 0.45);

    --hover:
        #bca7ff;

    --sidebar-button:
        #30243d;

}



/* ============================================================
   RESET
   ============================================================ */

* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.65;

}


/* ============================================================
   LINKS
   ============================================================ */

a {

    color:
        var(--text);

    text-decoration:
        none;

}


a:hover {

    color:
        var(--hover);

}



/* ============================================================
   LEFT SIDEBAR
   ============================================================ */

.wiki-sidebar {

    position:
        fixed;

    left:
        4px;

    top:
        20px;

    width:
        44px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    z-index:
        1000;

}


.side-button {

    width:
        44px;

    height:
        44px;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--sidebar-button);

    color:
        white;

    font-size:
        25px;

    cursor:
        pointer;

}


.side-button:hover {

    background:
        #47345b;

}



/* ============================================================
   MAIN PAGE
   ============================================================ */

.wiki-page {

    width:
        100%;

    max-width:
        1180px;

    margin:
        0 auto;

    padding:
        20px 45px 80px;

}



/* ============================================================
   HEADER
   ============================================================ */

.wiki-header {

    min-height:
        100px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    position:
        relative;

}


.character-title {

    margin:
        0;

    font-size:
        48px;

    line-height:
        1.1;

    font-weight:
        900;

    letter-spacing:
        -1px;

    /*
       If you have the same rounded font used by your wiki,
       you can put its font-family here.
    */

}


.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding-top:
        4px;

}


.header-button {

    border:
        0;

    background:
        transparent;

    color:
        var(--text);

    font-size:
        16px;

    font-weight:
        700;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    cursor:
        pointer;

}


.header-button:hover {

    color:
        var(--hover);

}


.header-button:first-child {

    font-size:
        25px;

}


.header-divider {

    width:
        1px;

    height:
        28px;

    background:
        var(--line);

}



/* ============================================================
   TWO COLUMN ARTICLE
   ============================================================ */

.article-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, 0.85fr);

    gap:
        45px;

    align-items:
        start;

}


.article-content {

    min-width:
        0;

}



/* ============================================================
   INTRO
   ============================================================ */

.intro {

    font-size:
        20px;

    line-height:
        1.8;

    margin-bottom:
        25px;

}


.intro p {

    margin:
        0 0 22px;

}



/* ============================================================
   CONTENTS BOX
   ============================================================ */

.contents-box {

    width:
        430px;

    max-width:
        100%;

    border:
        1px solid
        var(--box-border);

    background:
        var(--box-background);

    margin:
        20px 0 40px;

}


.contents-header {

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    padding:
        0 14px;

    border-bottom:
        1px solid
        var(--box-border);

    font-size:
        20px;

}


.contents-icon {

    margin-right:
        10px;

    font-size:
        22px;

}


.hide-contents {

    margin-left:
        auto;

    border:
        0;

    background:
        transparent;

    color:
        var(--text);

    font-size:
        15px;

    cursor:
        pointer;

}


.contents-list {

    padding:
        14px 18px 18px;

    font-size:
        20px;

}


.contents-list ol {

    margin:
        0;

    padding-left:
        30px;

}


.contents-list li {

    padding:
        2px 0;

}


.contents-list ol ol {

    font-size:
        19px;

}



/* ============================================================
   WIKI SECTIONS
   ============================================================ */

.wiki-section {

    margin:
        0 0 45px;

    scroll-margin-top:
        20px;

}


.wiki-section h2 {

    margin:
        0;

    font-size:
        25px;

    font-weight:
        900;

    letter-spacing:
        .2px;

}


.edit-pencil {

    display:
        inline-block;

    margin-left:
        7px;

    font-size:
        17px;

    cursor:
        pointer;

}


.edit-pencil:hover {

    color:
        var(--hover);

}


.section-line {

    height:
        1px;

    background:
        var(--line);

    margin:
        4px 0 10px;

}


.wiki-section p {

    font-size:
        20px;

    margin:
        0;

}



/* ============================================================
   SUBSECTIONS
   ============================================================ */

.subsection {

    margin:
        16px 0;

}


.subsection h3 {

    margin:
        0 0 8px;

    font-size:
        20px;

    font-weight:
        400;

}


.subsection p {

    font-size:
        18px;

}


.subsection.nested {

    margin-left:
        30px;

}


.subsection.deeply-nested {

    margin-left:
        30px;

}



/* ============================================================
   TRIVIA
   ============================================================ */

.trivia-list {

    margin:
        0;

    padding-left:
        37px;

    font-size:
        19px;

}


.trivia-list li {

    padding:
        2px 0;

}



/* ============================================================
   GALLERY
   ============================================================ */

.gallery {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        15px;

}


.gallery-placeholder {

    width:
        180px;

    height:
        130px;

    border:
        1px solid
        var(--box-border);

    background:
        #21142c;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--muted-text);

}



/* ============================================================
   RIGHT INFOBOX
   ============================================================ */

.character-infobox {

    width:
        100%;

    padding-top:
        15px;

}


.image-tabs {

    display:
        flex;

    justify-content:
        flex-start;

    gap:
        24px;

    margin-bottom:
        8px;

}


.image-tab {

    border:
        0;

    background:
        transparent;

    color:
        #99909f;

    font-size:
        16px;

    font-weight:
        700;

    padding:
        0 0 6px;

    cursor:
        pointer;

}


.image-tab:hover {

    color:
        white;

}


.image-tab.active {

    color:
        white;

}



/* ============================================================
   CHARACTER IMAGE
   ============================================================ */

.character-image-container {

    width:
        100%;

    position:
        relative;

}


.character-image {

    display:
        none;

    width:
        100%;

    max-height:
        430px;

    object-fit:
        cover;

}


.character-image.active-image {

    display:
        block;

}



/* ============================================================
   INFOBOX HEADINGS
   ============================================================ */

.infobox-heading {

    text-align:
        center;

    font-size:
        17px;

    margin:
        8px 0 15px;

    font-weight:
        900;

}



/* ============================================================
   INFOBOX TABLE
   ============================================================ */

.infobox-table {

    width:
        100%;

}


.info-row {

    display:
        grid;

    grid-template-columns:
        105px
        1fr;

    gap:
        12px;

    margin:
        0 0 18px;

}


.info-label {

    font-weight:
        900;

    line-height:
        1.25;

}


.info-value {

    line-height:
        1.5;

}



/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {


    .wiki-page {

        padding:
            15px 25px 60px;

    }


    .article-layout {

        grid-template-columns:
            1fr;

    }


    .character-infobox {

        max-width:
            500px;

        margin:
            0 auto;

        order:
            -1;

    }


    .header-actions {

        display:
            none;

    }


    .character-title {

        font-size:
            40px;

    }

}


@media (max-width: 550px) {


    .wiki-page {

        padding:
            15px 18px 50px;

    }


    .wiki-sidebar {

        display:
            none;

    }


    .character-title {

        font-size:
            34px;

    }


    .intro {

        font-size:
            17px;

    }


    .contents-list {

        font-size:
            17px;

    }


    .wiki-section p {

        font-size:
            17px;

    }


    .info-row {

        grid-template-columns:
            95px
            1fr;

    }

}