/*
  , __                _           ______
 /|/  \      o       | |         (_) |
  | __/ ,_       __, | |   _|_      _|_  __,   _  _  _|_  __,   ,
  |   \/  |  |  /  | |/ \   |      / | |/  |  / |/ |  |  /  |  / \_|   |
  |(__/   |_/|_/\_/|/|   |_/|_/   (_/   \_/|_/  |  |_/|_/\_/|_/ \/  \_/|/
                  /|                                                  /|
                  \|                                                  \|
Bright Fantasy; A theme by Oneriwien (Damion Otter)*/


/* ====== */
/* GLOBAL */
/* ====== */

* {
    --heading-font: Metamorphous;

    --primary-color: RGB(10, 10, 10);
    --alt-color: RGB(70, 65, 60);
    --header-color: RGB(30, 30, 30);
    --secondary-color: rgb(212, 145, 39);
    --highlight-color: rgb(167, 105, 6);
    --darken-color: rgb(147, 96, 14);
    --border-color: RGB(200, 150, 100);

    --box-background: RGBA(161, 147, 81, 0.2);
    --light-background: RGBA(181, 167, 101, 0.3);
    --dark-background: RGBA(131, 117, 51, 0.3);
}

/* ===== */
/* FONTS */
/* ===== */

@font-face {
    font-family: Metamorphous;
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/metamorphous/v7/Wnz8HA03aAXcC39ZEX5y133EOyqs.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: CrimsonText;
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/crimsontext/v8/wlp2gwHKFkZgtmSR3NB0oRJfbwhT.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== */
/* BODY */
/* ==== */

.page {
    font-family: var(--primary-font);
    color: var(--font-color);
    font-size: 16px;
    border: 6px var(--border-color) solid;
    font-family: Times;
}

.tooltipster-content {
    font-family: var(--primary-font);
    color: var(--font-color);
    font-size: 16px;
    border: 6px var(--border-color) solid;
    font-family: Times;
    background: url(https://wa-cdn.nyc3.cdn.digitaloceanspaces.com/assets/themes/bright/images/bg-dark.jpg);
}

.presentation-interface {
    background: RGB(0, 0, 0);
    background-image: url(https://wa-cdn.nyc3.cdn.digitaloceanspaces.com/assets/themes/bright/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: var(--font-color);
    font-family: Times;
    font-size: 16px;
}

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

.user-css h2, .user-css-extended h2,
.user-css h3, .user-css-extended h3,
.user-css h4, .user-css-extended h4,
.user-css h5, .user-css-extended h5 {
    margin-bottom: 4px;
    color: var(--header-color);
    font-family: var(--heading-font);
}

.user-css h1, .user-css-extended h1 {
    font-family: var(--heading-font);
    font-size: 60px;
    background: -webkit-linear-gradient(rgb(215, 195, 80), RGB(195, 175, 110), RGB(175, 155, 100), RGB(175, 145, 100), RGB(175, 155, 100));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.user-css h2, .user-css-extended h2 {
    font-size: 36px;
    line-height: 32px;
    border-bottom: 2px black solid;
}

.user-css .world-content h2 {
    font-size: 30px;
    line-height: 26px;
    margin-bottom: 6px;
}

.user-css h3, .user-css-extended h3 {
    font-size: 30px;
    line-height: 26px;
    border-bottom: 2px black dashed;
}

.user-css h4, .user-css-extended h4 {
    font-size: 24px;
}

.user-css h5, .user-css-extended h5 {
    font-size: 18px;
}

/* ==== */
/* TEXT */
/* ==== */

.user-css b, .user-css-extended b {
    color: var(--secondary-color);
}

.user-css a, .user-css a:focus,
.user-css-extended a, .user-css-extended a:focus {
    color: var(--secondary-color);
    transition: color 0.4s;
}

.user-css a:hover,
.user-css-extended a:hover {
    color: var(--highlight-color);
    text-decoration: underline;
}

.user-css .text-danger,
.user-css-extended .text-danger {
    color: var(--secondary-color);
}

.user-css .world-content {
    font-size: 16px;
}

/* ================== */
/* CAMPAIGN FORMATING */
/* ================== */

.user-css .campaign-protagonists {
    background: var(--lightborder-color);
}

.user-css .campaign-subtitle {
    font-size: 24px;
}

/* ========= */
/* FORMATING */
/* ========= */

.user-css hr, .user-css-extended hr {
    border: 1px var(--border-color) dashed;
}

.user-css blockquote {
    background: var(--box-background);
    padding: 20px;
    margin: 10px;
    border-left: 6px var(--border-color) solid;
    font-size: 22px;
    font-family: var(--secondary-font);
    color: var(--primary-color);
}

.user-css blockquote a, .user-css blockquote a:hover, .user-css blockquote b {
    font-family: var(--secondary-font);
}

.user-css blockquote .author {
    display: block;
    font-size: 18px;
    font-family: var(--secondary-font);
    font-style: normal;
    color: var(--primary-color);
}

.user-css-extended .nav-tabs {
    border-bottom: 1px solid #000;
}

/* ===== */
/* ALOUD */
/* ===== */

.user-css .aloud {
    background: var(--light-background);
    color: var(--highlight-color);
    border: 1px solid var(--highlight-color);
}

/* ========== */
/* SIDE PANEL */
/* ========== */

.user-css .panel {
    background: var(--box-background);
    border: none;
}

.user-css .panel b,
.user-css .panel h2,
.user-css .panel h3,
.user-css .panel h4,
.user-css .panel h5 {
    color: var(--darken-color);
}

.user-css .panel a {
    color: var(--darken-color);
}

.user-css .panel a:hover {
    color: var(--highlight-color);
    text-decoration: underline;
}

/* === */
/* ToC */
/* === */

.category-list h5,
.category-list h5 a {
    color: var(--highlight-color);

}

.category-list h5:hover,
.category-list h5 a:hover {
    color: var(--darken-color);

}

/* ============= */
/* ARTICLE PANEL */
/* ============= */

.user-css .article-panel {
    background: var(--box-background);
    border: none;
    padding: 14px;
    transition: all 0.3s;
}

.user-css .article-panel:hover {
    background: var(--dark-background);
}

.user-css .article-panel img {
    border-radius: 0px;
}

.user-css .divider {
    border-radius: 0px;
    box-shadow: none;
}

.article-panel .heading {
    color: var(--highlight-color);
}

.article-panel:hover .heading {
    color: var(--darken-color);
}

.article-panel .details {
    display: block;
    font-size: 1.2em;
    margin-bottom: 0;
    margin-top: 0;
    color: #222;
}

.article-panel .subheading,
.article-panel .date {
    color: #333;
}

/* ======= */
/* MAP BOX */
/* ======= */

.user-css .map-box {
    background: var(--box-background);
    border: none;
    padding: 14px;
    transition: all 0.3s;
}

.user-css .map-box:hover {
    background: var(--dark-background);
}

.user-css .map-box h3 {
    color: var(--highlight-color);
}

/* ======= */
/* SECRETS */
/* ======= */

.user-css-secret {
    padding: 0px;
    background-color: transparent;
}

/* ======= */
/* SPOILER */
/* ======= */

.spoiler-button {
    background: var(--secondary-color);
    transition: all 0.2s;
}

.spoiler-button:hover {
    background: var(--highlight-color);
}

.user-css .well, .user-css-extended .well {
    background: RGBA(250, 250, 250, 0.2);
    background-color: RGBA(250, 250, 250, 0.2);
    border: 1px var(--border-color) solid;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* ====== */
/* TABLES */
/* ====== */

.page .table-striped th {
    background: var(--highlight-color);
    border: 0px solid;
}

.page .table-striped th:hover {
    background: var(--darken-color);
    border: 0px solid;
}

.page .table td {
    border: none;
    background: transparent;
}

.user-css .table-striped tr:nth-child(odd) {
    background-color: RGBA(175, 117, 24, 0.4);
}

.user-css .table-striped tr:nth-child(even) {
    background-color: RGBA(175, 117, 24, 0.2);
}

/* ============ */
/* MENU CONTROL */
/* ============ */

.user-css .menu-control {
    height: 60px;
    width: 60px;
    right: 30px;
    top: -6px;
    background: RGBA(250, 250, 250, 0.3);;
    border-top: 6px var(--border-color) solid;
    border-left: 1px var(--border-color) solid;
    border-right: 1px var(--border-color) solid;
    border-bottom: 2px var(--border-color) solid;
    box-shadow: var(--box-shadow);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    transition: height 0.6s;
}

.user-css .menu-control:hover {
    height: 90px;
}

.timeline .header-icon {
    font-size: 12px;
}

/* ========== */
/* NAVIGATION */
/* ========== */

.user-css .backtoworld a {
    background: var(--secondary-color);
    color: var(--primary-color);
    box-shadow: none;
    font-size: 1em;
    left: -30px;
    border-radius: 3px;
    transition: all 0.4s;
    top: -40px;
}

.user-css .backtoworld a:hover {
    background: var(--darken-color);
    color: var(--primary-color);
    box-shadow: none;
    font-size: 1em;
    left: -10px;
}

/* ============ */
/* LABEL ROLLER */
/* ============ */

.user-css-presentation .label-roller {
    background: var(--secondary-color);
    transition: all 0.2s;
}

.user-css-presentation .label-roller:hover {
    background: var(--highlight-color);
}

.timeline .header-icon {
    font-size: 12px;
}
.user-css-presentation #world-navigation-sidebar {
    width: 35%;
    scrollbar-color: var(--secondary-color) var(--highlight-color);
    box-shadow: 5px 13px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid #bdb76b;
}
.user-css-presentation .world-navigation-palette-trigger {
    padding: 10px;
    background: #fff;
    color: #89b3ca;
}
.user-css-presentation .world-navigation-palette-trigger:hover {
    color: skyblue;
}
.user-css-presentation #world-navigation-sidebar h6 a {
    color: #8b4513;
}
.user-css-presentation #world-navigation-sidebar h5,
.user-css-presentation #world-navigation-sidebar h5 a {
    font-size: 16px;
    color: #8b4513;
}
.user-css-presentation #world-navigation-sidebar h2 {
    font-size: 32px;
    color: #8b4513;
    border-bottom: 1px solid #8b4513;
    margin-bottom: 20px;
    line-height: 1.5;
}
.timeline li .timeline-panel,
.timeline .timeline-entry-milestone {
    background: #f0f0f0;
}
.timeline li .timeline-panel:after {
    border-left: 14px solid #f0f0f0;
    border-right: 0 solid #f0f0f0;
}