Bild_2026-06-05_030657156.png

World Styling Editor

SELECT THEME

CUSTOM CSS

/********************************************
*   World of Arceiron Custom Stylesheet     *
*   ©2025   -   Manuel Emminger / Diarioz   *
*   Do not copy                             *
********************************************/
/********************************************
* 1 - Font Import                           *
********************************************/

@font-face {
    font-family: Belmont;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://arceiron.fra1.cdn.digitaloceanspaces.com/World_Anvil_Resources/Fonts/Belmont%20Regular.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Cormorant Garamond;
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/cormorantgaramond/v19/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd58jD-iNM8.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Cormorant Garamond;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/cormorantgaramond/v19/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_v86KnTOig.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Cormorant SC;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/cormorantsc/v18/0yb5GD4kxqXBmOVLG30OGwsuqzAx.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Alegreya;
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/alegreya/v36/4UaSrEBBsBhlBjvfkSLk3abBFkvpkARTPlbgv5qhmSU.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Alegreya;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/alegreya/v36/4UacrEBBsBhlBjvfkQjt71kZfyBzPgNG9hU4-6qj.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Alegreya SC;
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/alegreyasc/v25/taiMGmRtCJ62-O0HhNEa-Z6q6ZIRbQ.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Alegreya SC;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/alegreyasc/v25/taiOGmRtCJ62-O0HhNEa-Z6v2ZA.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/quicksand/v36/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-wg.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Satisfy;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/satisfy/v21/rP2Hp2yn6lkG50LoCZOIHQ.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Courgette;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/courgette/v17/wEO_EBrAnc9BLjLQAUk1VvoK.woff2);
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/********************************************
* 2 - Variables                             *
********************************************/

/* Variable Format inspired by Ember Theme by TJTrewin */

:root {
    /* Primary (Goldgelb) */
    --arceiron-primary: #f4c873;
    --arceiron-primary-l: #ffe6a9;
    --arceiron-primary-d: #b39141;

/* Secondary (Erdiges Braun) */
    --arceiron-secondary: #3d3429;
    --arceiron-secondary-l: #5d5140;
    --arceiron-secondary-d: #2b241b;

/* Success (Tiefes Grün) */
    --arceiron-success: #285737;
    --arceiron-success-l: #3a794e;
    --arceiron-success-d: #1b3f27;

/* Warning (Bronzeton) */
    --arceiron-warning: #a54328;
    --arceiron-warning-l: #c65f41;
    --arceiron-warning-d: #7c2f1a;

/* Danger (Tiefes Rot) */
    --arceiron-danger: #B00020;
    --arceiron-danger-l: #CF6679;
    --arceiron-danger-d: #661717;

/* Light (Textfarbe aus dem Bild) */
    --arceiron-light: #FFFFFF;
    --arceiron-light-l: #f2ddb0;
    --arceiron-light-d: #957f5a;

/* Dark (Kohleschwarz für Hintergrund) */
    --arceiron-dark: #121212;
    --arceiron-dark-l: #292521;
    --arceiron-dark-d: #010101;

/* Fonts */
    --f1: Belmont;     /* Logo */
    --f2: Cormorant SC;     /* Serif */
    --f3: Alegreya;    /* Serif */
    --f4: Alegreya SC;    /* Serif */
    --f5: Quicksand;    /* Sans serif */
    --f6: Courgette;    /* Handwriting */
    --f7: Satisfy;    /* Handwriting */
    --f8: Cormorant Garamond;    /* Serif */
}

/********************************************
* 3 - Typography                            *
********************************************/

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

.user-css .text-justify {
    text-align: justify;
}

/* Links */
.user-css a,
.user-css-extended a,
.user-css-presentation a {
    color: var(--arceiron-primary);
    text-decoration: none;
}

.user-css a:hover,
.user-css-extended a:hover,
.user-css-presentation a:hover {
    color: var(--arceiron-primary-l) !important;
    text-decoration: none;
}

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

.user-css .text-danger:hover,
.user-css-extended .text-danger:hover {
    color: var(--arceiron-danger-l) !important;
}

/* Headings */
.user-css .h1,
.user-css .h2,
.user-css .h3,
.user-css .h4,
.user-css .h5,
.user-css .h6,
.user-css h1,
.user-css h2,
.user-css h3,
.user-css h4,
.user-css h5,
.user-css h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

.user-css h1,
.user-css-extended h1,
.user-css-presentation h1 {
    font-family: var(--f1);
    color: var(--arceiron-primary-l) !important;
    font-size: 38px;
}

.user-css-presentation .template-background-dnd5e h1 {
    font-family: var(--f1);
    color: var(--arceiron-warning) !important;
    font-size: 38px;
}

.user-css h2,
.user-css-extended h2,
.user-css-presentation h2 {
    font-family: var(--f1);
    color: var(--arceiron-primary-l) !important;
    font-size: 38px;
    text-transform: none;
}

.user-css .user-custom-content h2 {
    text-align: center;
    padding-bottom: 10px;
}

.user-css-presentation .template-background-dnd5e h2 {
    font-family: var(--f1);
    color: var(--arceiron-warning) !important;
    font-size: 38px;
    text-transform: none;
}

.user-css h3,
.user-css-extended h3,
.user-css-presentation h3 {
    font-family: var(--f2);
    color: var(--arceiron-primary);
    font-size: 30px;
}

.user-css-presentation .template-background-dnd5e h3 {
    font-family: var(--f2);
    color: var(--arceiron-warning-l);
    font-size: 30px;
}

.user-css h4,
.user-css-extended h4,
.user-css-presentation h4 {
    font-family: var(--f4);
    color: var(--arceiron-primary-d);
    font-size: 22px;
}

.user-css-presentation .template-background-dnd5e h4 {
    font-family: var(--f4);
    color: var(--arceiron-warning-d);
    font-size: 22px;
}

.user-css h5,
.user-css-extended h5,
.user-css-presentation h5 {
    font-family: var(--f4);
    color: var(--arceiron-primary-d);
    font-style: italic;
    font-size: 18px;
}

.user-css-presentation .template-background-dnd5e h5 {
    font-family: var(--f4);
    color: var(--arceiron-warning-d);
    font-style: italic;
    font-size: 18px;
}

/* Bold */
.user-css b {
    color: var(--arceiron-light-d);
}

.user-css small {
    font-size: smaller;
}

/* Dropcap */
.user-css .dropcap,
.user-css-extended .dropcap {
    float: left;
    font-size: 72px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    color: var(--arceiron-primary);
    font-family: var(--f1);
}

/* Tooltip */
.user-css .text-abbreviation {
    text-decoration: underline;
    color: var(--arceiron-warning);
}

.user-css .text-abbreviation:hover {
    text-decoration: underline !important;
    color: var(--arceiron-warning-l)
}

/* Redacted */
.user-css .redacted {
    color: var(--arceiron-danger-d);
}

/********************************************
* 4 - Backgrounds                           *
********************************************/

.user-css {
    background: var(--arceiron-dark-d) !important;
    color: var(--arceiron-light);
    font-family: var(--f5);
    font-size: 16px !important;
}

.user-css-presentation {
    background: var(--arceiron-dark-d) !important;
}

.user-css .row {
    margin-right: -25px;
    margin-left: -25px;
}

.user-css .article-footnotes {
    background: var(--arceiron-dark) !important;
}

/********************************************
* 5 - Global                                *
********************************************/

/* From Codex - Snipped provided by Hannah */
@media (max-width: 992px) {
    .user-css #profile .row {
        display: flex;
        flex-direction: column;
    }

.user-css .article-content-left {
        order: 2;
    }

.user-css #profile .row .row {
        display: block;
    }
}

@media (min-width: 1400px) {
    .user-css-presentation .page {
        width: 1320px
    }
}

/* Thumbnail Image */
.user-css .user-css-image-thumbnail {
    padding: 0px;
}

/* Image Inserts */

/* Article Blocks */
.user-css .article-panel {
    background: var(--arceiron-dark);
    border: 2px solid var(--arceiron-dark-l);
    color: var(--arceiron-primary);
}

.user-css .article-panel:hover {
    box-shadow: 0 0 20px var(--arceiron-primary-l);
    color: var(--arceiron-primary-l);
}

.user-css .article-panel .cover {
    min-height: 150px;
    opacity: 0.75;
    filter: sepia(0.5);
    border-bottom: 2px solid var(--arceiron-dark-l);
}

.user-css .article-panel h5 {
    color: var(--arceiron-light);
    text-align: center;
    font-style: normal;
    padding-top: 5px;
    font-family: var(--f1);
    text-transform: none;
}

.user-css .article-panel:hover h5 {
    color: var(--arceiron-primary-l);
    font-style: italic;
}

.user-css .article-panel .excerpt {
    color: var(--arceiron-light-l);
    text-align: center;
    font-size: 14px;
}

/* Buttons */
.user-css .btn-primary,
.user-css-extended .btn-primary,
.user-css-presentation .btn-primary {
    background: var(--arceiron-warning-d);
}

.user-css .btn-primary:hover,
.user-css-extended .btn-primary:hover,
.user-css-presentation .btn-primary:hover {
    background: var(--arceiron-primary);
    color: var(--arceiron-warning-d) !important
}

/* Quick Edit Button */
.user-css .btn-default {
    display: none !important;
}

/********************************************
* 6 - Homepage                              *
********************************************/

.user-css .card {
    background: var(--arceiron-dark);
    border: 0px;
}

.user-css .card h1 {
    color: var(--arceiron-primary-l);
}

/* Followers */
.user-css-presentation h4 {
    font-family: var(--f1);
    color: var(--arceiron-primary);
}

.user-css .followers-counter a {
    color: var(--arceiron-warning) !important;
}

.user-css .followers-counter a:hover {
    color: var(--arceiron-primary-l) !important;
}

/********************************************
* 7 - Articles                              *
********************************************/

/* Main article content */
.user-css .article-content {
    background: var(--arceiron-dark);
}

.user-css.page-article {
    padding: 0px;
}

.user-css.page-article .row {
    margin: unset;
}

.user-css .article-title h1 {
    padding-bottom: 5px;
    font-family: var(--f1);
    color: var(--arceiron-light-l);
}

.user-css .category-title-icon {
    display: none;
}

.user-css .article-title-icon {
    color: var(--arceiron-warning) !important;
}

.user-css .article-subheading {
    font-family: var(--f3);
    color: var(--arceiron-warning);
}

.user-css-image-thumbnail {
    margin: 10px;
}

/* Sidebar */
.user-css .article-content .panel-default {
    background: var(--arceiron-dark-d);
    border-radius: 8px;
    margin-right: -30px;
    margin-top: 20px !important;
    margin-bottom: 25px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 20px;
    font-size: 13px;
}

.user-css .article-content-right {
    padding-left: 20px;
}

.user-css .article-content .panel-default b,
.user-css .article-content .panel-default .phrase-key {
    color: var(--arceiron-light-d);
}

.user-css .article-content .panel-default a {
    color: var(--arceiron-primary);
}

/* Mark */
.user-css mark {
    color: var(--arceiron-dark);
    background-color: var(--arceiron-primary-l);
}

/* Spoilers */
.user-css .spoiler-content,
.user-css-extended .spoiler-content {
    background: var(--arceiron-dark-d);
    color: var(--arceiron-light);
}

/* Quotes */
.user-css blockquote,
.user-css-extended blockquote,
.user-css-presentation blockquote {
    background: var(--arceiron-dark-l);
    border-color: var(--arceiron-primary);
    border-width: 4px;
    color: var(--arceiron-light);
    font-family: var(--f6);
    margin: auto;
}

.user-css blockquote .author,
.user-css-extended blockquote .author,
.user-css-presentation blockquote .author {
    text-align: right;
    color: var(--arceiron-light-l);
    font-family: var(--f7);
    font-style: normal;
    font-size: 22px;
}

/* Tables */
.user-css .table td:first-child {
    word-break: normal;
}

.user-css .table td b {
    color: var(--arceiron-light-l);
}

.user-css .table tr:nth-child(even):hover td b,
.user-css-extended .table tr:nth-child(even):hover td b,
.user-css .table tr:nth-child(odd):hover td b,
.user-css-extended .table tr:nth-child(odd):hover td b {
    color: var(--arceiron-light-d);
}

.user-css .table,
.user-css .table-striped,
.user-css-extended .table {
    outline: 0px solid;
    background: none;
    hyphens: none;
}

.user-css .table th,
.user-css-extended .table th {
    padding: 10px 15px 10px 15px !important;
    font-family: var(--f1);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 1px;
    hyphens: none;
}

.user-css .table td,
.user-css .table th,
.user-css-extended .table td,
.user-css-extended .table th {
    padding: 10px 15px 10px 15px;
    text-align: left;
    vertical-align: middle;
    hyphens: none;
    border: 0px;
}

.user-css .table tr:nth-child(even),
.user-css-extended .table tr:nth-child(even) {
    background: var(--arceiron-secondary);
    font-size: 16px !important;
    color: var(--arceiron-light) !important;
    hyphens: none;
}

.user-css .table tr:nth-child(odd),
.user-css-extended .table tr:nth-child(odd) {
    background: var(--arceiron-secondary-l);
    font-size: 16px !important;
    color: var(--arceiron-light);
}

.user-css .table tr:nth-child(even):hover,
.user-css-extended .table tr:nth-child(even):hover,
.user-css .table tr:nth-child(odd):hover,
.user-css-extended .table tr:nth-child(odd):hover {
    background: var(--arceiron-primary);
}

.user-css .table tr:nth-child(even):hover td,
.user-css-extended .table tr:nth-child(even):hover td,
.user-css .table tr:nth-child(odd):hover td,
.user-css-extended .table tr:nth-child(odd):hover td {
    color: var(--arceiron-dark-l) !important;
}

.user-css .table tr:nth-child(even):hover td .text-danger,
.user-css-extended .table tr:nth-child(even):hover td .text-danger,
.user-css .table tr:nth-child(odd):hover td .text-danger,
.user-css-extended .table tr:nth-child(odd):hover td .text-danger {
    color: var(--arceiron-danger) !important;
}

.user-css .table tr:nth-child(even):hover td .text-danger:hover,
.user-css-extended .table tr:nth-child(even):hover td .text-danger:hover,
.user-css .table tr:nth-child(odd):hover td .text-danger:hover,
.user-css-extended .table tr:nth-child(odd):hover td .text-danger:hover {
    color: var(--arceiron-danger-l) !important;
}

.user-css .table tr:nth-child(even):hover td a,
.user-css-extended .table tr:nth-child(even):hover td a,
.user-css .table tr:nth-child(odd):hover td a,
.user-css-extended .table tr:nth-child(odd):hover td a {
    color: var(--arceiron-warning-d) !important;
}

.user-css .table tr:nth-child(even):hover td a:hover,
.user-css-extended .table tr:nth-child(even):hover td a:hover,
.user-css .table tr:nth-child(odd):hover td a:hover,
.user-css-extended .table tr:nth-child(odd):hover td a:hover {
    color: var(--arceiron-warning-l) !important;
}

.user-css .table th,
.user-css-extended .table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: var(--arceiron-dark-l);
    border-top: 0px solid;
    color: var(--arceiron-light-l) !important;
    font-family: var(--f1);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
}

.user-css .table tr td,
.user-css-extended .table tr td {
    color: var(--arceiron-light);
    background: none;
}

.user-css .table,
.user-css-extended .table {
    border: 2px solid var(--arceiron-dark-d);
}

.user-css .table-striped,
.user-css-extended .table-striped {
    background: unset;
}

.user-css .table .text-danger {
    color: var(--arceiron-danger);
}

.user-css .table .text-danger:hover {
    color: var(--arceiron-danger-l);
}

/* Excerpts */
.user-css-presentation .tooltipster-borderless .tooltipster-box,
.user-css-presentation .tooltip-inner {
    opacity: 1;
}

.user-css-presentation .tooltip {
    opacity: 1;
}

.user-css-presentation .tooltip .tooltip-arrow {
    border-top: 6px solid var(--arceiron-light-l);
}

.user-css-presentation .tooltipster-borderless .tooltipster-box,
.user-css-presentation .tooltip-inner {
    font-family: var(--f5);
    font-size: 16px;
    line-height: 1.1em;
    background: var(--arceiron-secondary);
    border-color: var(--arceiron-light-l);
    border-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    color: var(--arceiron-light-l);
}

.user-css-presentation .tooltipster-borderless.tooltipster-top .tooltipster-box,
.user-css-presentation .tooltip-inner {
    border-bottom: 4px solid var(--arceiron-light-l);
}

/* Tooltips */
.user-css-presentation .tooltipster-base .tooltipster-box .tooltipster-content {
    background: var(--arceiron-secondary);
    border-color: var(--arceiron-light-l);
    border-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    color: var(--arceiron-light-l);
}

.user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-box,
.user-css-presentation .tooltip.bs-tooltip-top .tooltip-inner {
    border-bottom: 4px solid var(--arceiron-light-l);
}

.user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-background,
.user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-border,
.user-css-presentation .tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--arceiron-light-l);
}

.user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-box,
.user-css-presentation .tooltip.bs-tooltip-bottom .tooltip-inner {
    border-top: 4px solid var(--arceiron-light-l);
}

.user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-background,
.user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-border,
.user-css-presentation .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--arceiron-light-l);
}

.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-box,
.user-css-presentation .tooltip.bs-tooltip-right .tooltip-inner {
    border-left: 4px solid var(--arceiron-light-l);
}

.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-background,
.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-border,
.user-css-presentation .tooltip.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: var(--arceiron-light-l);
}

.user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-box,
.user-css-presentation .tooltip.bs-tooltip-left .tooltip-inner {
    border-right: 4px solid var(--arceiron-light-l);
}

.user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-background,
.user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-border,
.user-css-presentation .tooltip.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: var(--arceiron-light-l);
}

/* Images */
.user-css div.artist-credits {
    padding-top: 3px;
    background: none;
    font-size: 0.8em;
    text-align: center;
    color: #5f3c1e;
    background-color: var(--arceiron-dark-d);
    border-radius: 0px 0px 10px 10px;
}

/********************************************
* 8 - Navigation                            *
********************************************/

/* Back to World button */
.user-css .backtoworld a {
    width: 34px;
    height: 34px;
    content: url(https://arceiron.fra1.cdn.digitaloceanspaces.com/World_Anvil_Resources/Ui_Images/Arceiron_Home_Button.png);
    padding: 2px;
    background: var(--arceiron-dark-d);
    border: 2px solid var(--arceiron-dark-l);
    border-radius: 5px;
    position: fixed;
    top: 124px;
    left: 10px;
}

.user-css .backtoworld a:hover {
    border: 2px solid var(--arceiron-light-d);
    background-color: var(--arceiron-dark);
    color: var(--arceiron-light-l) !important;
    box-shadow: 0 0 12px var(--arceiron-light-l);
}

/* ToC World Navigation Sidebar */
.user-css-presentation #world-navigation-sidebar {
    width: 30%;
    min-width: 350px;
    max-width: 500px;
    scrollbar-color: var(--arceiron-light-l) var(--arceiron-dark);
    box-shadow: 5px 13px 20px rgba(0, 0, 0, 0.6);
    margin: 0;
    height: 100vh;
    background-color: #14161b;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 25px;
    overflow: auto;
    position: fixed;
    top: 160px;
    left: 50px;
    max-height: 75vh;
    z-index: 1500;
    border: 1px solid black;
}

.user-css a.world-category-link {
    font-family: var(--f1);
}

.user-css a.world-category-link::before {
    content: url(https://arceiron.fra1.cdn.digitaloceanspaces.com/World_Anvil_Resources/Ui_Images/Spartan%20Helmet_Icon.png);
    position: absolute;
    width: 25px;
    height: 26px;
    background-repeat: no-repeat;
    margin: -4px 0px 0px -28px;
    transform: rotateY(180deg);
}

.user-css a.world-category-link:hover::before {
    filter: invert(30%) sepia(30%) saturate(3000%) hue-rotate(330deg);
}

/* World Menu - Table of Content */
.world-navigation-palette-trigger {
    background-color: var(--arceiron-dark);
    color: var(--arceiron-primary);
}

.world-navigation-palette-trigger-active {
    background-color: var(--arceiron-dark);
    color: var(--arceiron-primary-l);
}

.user-css .world-menu h2,
.user-css .world-maps h2,
.user-css .world-timelines h2,
.user-css .world-featured-articles h2,
.user-css .world-recent-articles h2 {
    font-family: var(--f1);
    text-align: center;
    padding-bottom: 10px;
}

.user-css .world-menu li,
.user-css .world-timelines li {
    font-family: var(--f2);
}

/* Breadcrumb */
.user-css .breadcrumb {
    background-color: var(--arceiron-dark);
    margin-left: 30px;
}

.user-css .breadcrumb-world-icon {
    content: url(https://arceiron.fra1.cdn.digitaloceanspaces.com/World_Anvil_Resources/Ui_Images/Spartan%20Helmet_Icon.png);
    position: absolute;
    background-repeat: no-repeat;
    margin: -2px 0px 0px -22px;
    transform: rotateY(180deg);
}

.user-css .breadcrumb-world-icon,
.user-css .breadcrumb-category-icon,
.user-css .breadcrumb-article-icon {
    color: var(--arceiron-warning);
}

/* Search Bar */
.user-css .search-form {
    left: 70px;
    position: fixed;
    top: 119px;

border-radius: 5px;
}

.user-css .search-form::before {
    content: url(https://arceiron.fra1.cdn.digitaloceanspaces.com/World_Anvil_Resources/Ui_Images/Spartan%20Helmet_Icon.png);
    position: fixed;
    left: 86px;
    top: 122px;
    background-repeat: no-repeat;
    margin: 4px 0px 0px -28px;
    transform: rotateY(180deg);
    z-index: 3;
}

.user-css .search-form::after {
    content: url(https://arceiron.fra1.cdn.digitaloceanspaces.com/World_Anvil_Resources/Ui_Images/Spartan%20Helmet_Icon.png);
    position: fixed;
    left: 248px;
    top: 122px;
    background-repeat: no-repeat;
    margin: 4px 0px 0px 3px;
    z-index: 3;
}

.user-css .search-form input {
    padding: 2px 8px;
    font-family: var(--f2);
    text-transform: uppercase;
    border: 2px solid var(--arceiron-dark-l) !important;
}

.user-css .search-form .typeahead-input {
    height: 32px;
}

.user-css-presentation input,
.user-css-extended input {
    background: var(--arceiron-dark) !important;
    color: var(--arceiron-light) !important;
}

/* Article ToC */
/* From Codex */
.user-css div.articletoc {
    border: none;
    font-family: var(--f1);
    color: var(--arceiron-primary) !important;
    text-transform: uppercase;
    padding: 10px;
}

.user-css .articletoc {
    background: var(--arceiron-dark);
    width: 242px;
    min-height: 42px;
    max-height: 42px;
    position: fixed;
    top: 250px;
    left: -200px;
    z-index: 4;
    overflow: hidden;
    transition: 1s ease;
}

.user-css .articletoc::before {
    content: url(https://arceiron.fra1.cdn.digitaloceanspaces.com/World_Anvil_Resources/Ui_Images/list-ol-solid.png);
    padding: 0px;
    position: absolute;
    top: 6px;
    right: 6px;
}

.user-css .articletoc:hover {
    max-height: 100%;
    left: 0px;
}

.user-css .article-toc-indent-2, /*h3*/
.user-css .article-toc-indent-3 /*h4*/ 
{ 
    display: none;
}

.user-css div.articletoc .article-toc-link {
    transition: 0s;
    border-bottom: none;
    margin-left: 28px !important;
}

.user-css div.articletoc .article-toc-link:hover {
    color: var(--arceiron-primary-l) !important;
}

.user-css div.articletoc .article-toc-link::before {
    content: url(https://arceiron.fra1.cdn.digitaloceanspaces.com/World_Anvil_Resources/Ui_Images/Spartan%20Helmet_Icon.png);
    position: absolute;
    width: 25px;
    height: 26px;
    margin: -4px 0px 0px -28px;
    background-repeat: no-repeat;
    transform: rotateY(180deg);
}

.user-css div.articletoc .article-toc-link:hover::before {
    filter: invert(30%) sepia(30%) saturate(3000%) hue-rotate(330deg);
}

/********************************************
* 9 - Comments & Metadata                   *
********************************************/

.user-css-presentation .page {
    background: var(--arceiron-dark);
    font-size: 16px !important;
    line-height: 1.5;
    color: var(--arceiron-light);
}

.user-css-extended #comments h2 {
    text-align: center;
}

.user-css-extended .comment-box-author {
    font-family: var(--f1);
}

.user-css-extended .comment-box-date {
    color: var(--arceiron-light)
}

.user-css-extended .comment-box {
    background: var(--arceiron-dark-d);
    border-radius: 8px;
    border: 2px solid var(--arceiron-secondary-l);
}

.user-css-extended .comment-box-reply {
    margin-right: -5px;
    background: var(--arceiron-dark-l);
    border-radius: 8px;
    border: 2px solid var(--arceiron-primary-d);
}

/********************************************
* 10 - Maps                                 *
********************************************/
.user-css .map-box {
    padding: 0px;
    background: transparent;
    margin-bottom: 10px;
}

.user-css .map-box img {
    object-fit: contain;
}

.user-css .map-box .img-responsive {
    padding: 0px !important;
}

.user-css .map-box:hover img {
    box-shadow: 0 0 10px var(--arceiron-primary-l);
}

.user-css .map-box div {
    margin: 0px;
    text-align: center;
    padding: 0px !important;
}

/********************************************
* 11 - Calendar                             *
********************************************/

/********************************************
* 12 - Containers                           *
********************************************/

.source-box {
    font-size: 12px;
    box-sizing: border-box;
    margin-bottom: 1em;
    padding: 5px 10px;
    background-color: var(--arceiron-danger);
    border: 1px solid var(--arceiron-danger-d);
    box-shadow: 1px 4px 14px #888;
}

.note-box {
    font-size: 12px;
    box-sizing: border-box;
    color: var(--arceiron-success-d);
    margin-bottom: 1em;
    padding: 5px 10px;
    background-color: #e0e5c1;
    border: 1px solid var(--arceiron-success-d);
    box-shadow: 1px 4px 14px #888;
}

.note-box a {
    color: var(--arceiron-warning)
}

.note-box a:hover {
    color: var(--arceiron-warning-l) !important;
}

.note-box h1,
.note-box h2,
.note-box h3,
.note-box h4,
.note-box h5 {
    color: var(--arceiron-warning-d) !important;
}

.dark-box {
    color: white !important;
    box-sizing: border-box;
    margin-bottom: 1em;
    padding: 5px 10px;
    background-color: var(--arceiron-dark-d);
    border: 1px solid var(--arceiron-black);
    box-shadow: 1px 4px 14px var(--arceiron-dark-l);
    border-radius: 10px;
    font-size: 12px;
    width: fit-content;
}

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

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

/* Help provided by Rin/2nerds | talos/yahn */
.user-css-presentation::-webkit-scrollbar {
    background: var(--arceiron-dark);
    width: 10px
}

.user-css-presentation::-webkit-scrollbar-thumb {
    background: var(--arceiron-light-l);
}

/********************************************
* 15 - Finish                               *
********************************************/

.user-css .world-authors,
.user-css .world-title,
.user-css a.world-editor-link,
.user-css .world-menu .fa-external-link,
.user-css .article-panel .subheading,
.user-css-extended .article-panel .subheading {
    display: none;
}

Need help? Check out the CSS Styling Guide