/* typefaces */
@font-face {
    font-family: "Alegreya";
    src: url("../fonts/Alegreya-Regular.woff2") format("woff2"),
        url("../fonts/Alegreya-Regular.woff") format("woff");
    font-display: swap;
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "Alegreya";
    src: url("../fonts/Alegreya-Bold.woff2") format("woff2"),
        url("../fonts/Alegreya-Bold.woff") format("woff");
    font-display: swap;
    font-weight: bold;
    font-style: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "Alegreya";
    src: url("../fonts/Alegreya-Italic.woff2") format("woff2"),
        url("../fonts/Alegreya-Italic.woff") format("woff");
    font-display: swap;
    font-weight: normal;
    font-style: italic;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "Alegreya";
    src: url("../fonts/Alegreya-BoldItalic.woff2") format("woff2"),
        url("../fonts/Alegreya-BoldItalic.woff") format("woff");
    font-display: swap;
    font-weight: bold;
    font-style: italic;
    text-rendering: optimizeLegibility;
}


html, body {
    font-family: "Alegreya", Georgia, "Times New Roman", Times, serif;
}

html {
    height: 100%;
    background: url("/-/img/bg-main.jpg") no-repeat no-repeat center fixed;
    background-size: cover;
    background-color: #140a00;
}

body {
    height: 100%;
    min-height: 100%;
    background-color: transparent;
    font-size: 16pt;
}

/* splash */
#root {
    height: 100%;
}

.__splash__ {
    min-height: 100%;
}
    .__hero__ img {
        display: flex;
        height: auto;
        max-width: 800px;;
        margin: 0 auto;
        width: 100%;
    }

    .__splash__ .__buttons__ {
        padding-top: 1rem;
        max-width: 800px;
        margin: 0 auto;
    }

.__caption__ {
    color: #fffbef;
    cursor: default;
}

/* nav styles goes here */
.__header__ {
    display: flex;
    flex-direction: column;
    background: url("/-/img/bg-nav.png");
    background-repeat: repeat-x;
    background-position: center bottom;
    height: 80px;
}

.__header__.expanded {
    height: auto;
}

    .__header__.expanded #nav-menu {
        display: flex;
        justify-content: end;
    }

        .__header__ #nav-menu .nav {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

    .__header__ .__home__ {
        padding: 0.5rem 0;
        color: #fffbef;
        font-size: 3.5rem;
        transition: color 50ms, fill 50ms;
        position: relative;
    }

    .__header__ .wordmark {
        display: flex;
        width: 297px;
        height: 56px;
        background-color: transparent;
        background-image: url("../img/nav-wordmark.png");
        background-size: 297px 112px;
        background-repeat: no-repeat;
    }

    .__header__ .wordmark:hover {
        background-position: 0 100%;
    }

    .__header__ .crossbones {
        display: flex;
        position: relative;
        width: 34px;
        height: 56px;
        background-color: transparent;
        background-image: url("../img/nav-wordmark.png");
        background-size: 297px 112px;
        background-position-x: 193px;
    }

        /* .__header__ .crossbones svg #shadow {
            color: #000;
        } */

    .__header__ .crossbones:hover:before {
        content: "";
        background-color: transparent;
        position: absolute;
        width: 50%;
        height: 50%;
        border-radius: 50%;
        top: 25%;
        left: 25%;
        box-shadow: 0 0 50px 5px #fffbef;
    }

    .__header__ .__navlink__ {
        color: #fff;
    }

    .__header__ .__navlink__:hover {
        text-shadow: 0 0 50px #fffbef;;
        text-decoration: underline;
    }

    .__header__ a {
        font-weight: bold;
    }

    .__header__ a:active {
        margin-top: 1px;
        margin-bottom: -1px;
    }

    .__header__ a.active {
        color: #000;
        background: url("../img/bg-navlink.svg") 0 0/100% 100% no-repeat;
        pointer-events: none;
        text-shadow: 0 1px 0 #fffbef;
    }

    .__header__ button.__menu__ {
        margin: 0;
        padding: 0;
        border: 0;
        background-color: transparent;
        height: 56px;
        width: 56px;
        color: #fffbef;
    }

    .__header__ button.__menu__ #close {
        display: none;
    }

    .__header__ button.__menu__ #hamburger {
        display: inline;
    }

    .__header__ button.__menu__.expanded #close {
        display: inline;
    }

    .__header__ button.__menu__.expanded #hamburger {
        display: none;
    }

/* article */
.__article__ {
    border: 14px solid #eadeca;
    border-image: url("../img/bg-parchment.svg");
    border-image-slice: 60 30 28;
    border-image-repeat: stretch repeat;
    position: relative;
    margin: 0 0 1.5rem;
}

.__article__:before {
    content: "";
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    box-shadow: 0 0 80px #140e00;
    z-index: -1;
}

    .__article__ .content {
        background-color: #eadeca;
        color: #2e1200;
    }

    .__article__ table {
        border-color: var(--bs-border-color-translucent);
    }

        .__article__ table tbody tr:last-child,
        .__article__ table tbody tr:last-child td {
            border-bottom: none;
        }

    .__article__ h2:hover {
        text-decoration: underline;
    }

    .__article__ h2:before {
        content: "▲";
        font-size: 0.5em;
        display: inline-block;
        padding-inline-end: 0.4em;
        vertical-align: middle;
        margin-block-start: -0.4em;
    }

    /* hide collapsed article content */
    .__article__ .collapsed {
        display: none;
    }

    /* don't hide the collapsed h2 */
    .__article__ h2.collapsed {
        display: block;
        margin-bottom: 1.75rem;
    }

    .__article__ h2.collapsed:before {
        content: "▼";
    }

    /* general article elements */
    .__article__ a {
        color: #0051ca;
        text-shadow: 0 1px 0px rgba(255, 255, 255, 0.25);
        font-weight: bold;
    }

    .__article__ a:hover {
        color: #000972;
    }

    .__article__ a:visited {
        color: #8000ca;
    }

    .__article__ a:visited:hover {
        color: #3e0052;
    }


    .__article__ h1 {
        text-align: center;
    }

    .__article__ h1,
    .__article__ h2,
    .__article__ h3,
    .__article__ h4,
    .__article__ h5,
    .__article__ code {
        font-weight: bold;
    }

    .__article__ h1,
    .__article__ h2,
    .__article__ h3,
    .__article__ p,
    .__article__ ol,
    .__article__ ul {
        margin-bottom: 1rem;
    }




/* section header */
.__title__ {
    padding-block: 1.5rem;
}

    .__title__ > img {
        max-width: 100%;
        max-height: 200px;
    }


/* article links */
.__articlelinks__ {
    padding-block-end: 1.5rem;
}

    .__articlelinks__ a {
        color: #fff;
        padding: 0 2rem;
        font-size: 2rem;
    }

    .__articlelinks__ a {
        font-weight: bold;
        text-decoration: none;
    }

    .__articlelinks__ a:hover {
        text-shadow: 0 0 50px #fffbef;;
        text-decoration: underline;
    }

    .__articlelinks__ a:active {
        margin-top: 1px;
        margin-bottom: -1px;
    }

    .__articlelinks__ a.active {
        color: #000;
        background: url("../img/bg-articlelink.svg") 0 0/100% 100% no-repeat;
        pointer-events: none;
        text-shadow: 0 0 2px #fffbef;
    }

/* game article alignment override */
.__session__ p {
    text-align: center;
}

/* generic hr */
hr {
    border: none;
    height: 1px;
    opacity: 0.5;
    margin: 2em 0;
    background: linear-gradient(to right, rgba(46, 18, 0, 0), rgba(46, 18, 0, 1), rgba(46, 18, 0, 1), rgba(46, 18, 0, 0));
}