@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC');



@import url("https://fonts.googleapis.com/css?family=Cinzel");
@import url("https://fonts.googleapis.com/css2?family=Quintessential&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Macondo');
@import url('https://fonts.googleapis.com/css2?family=Jim+Nightshade&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap');

@import 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono';
@import 'https://fonts.googleapis.com/css?family=Cinzel';
@import 'https://fonts.googleapis.com/css?family=Vollkorn';
@import 'https://fonts.googleapis.com/css?family=Fredericka+the+Great';
@import 'https://fonts.googleapis.com/css?family=Shadows+Into+Light';
@import 'https://fonts.googleapis.com/css2?family=Seaweed+Script';
@import 'https://fonts.googleapis.com/css2?family=IM+Fell+English+SC';
@import 'https://fonts.googleapis.com/css2?family=Italianno';
@import 'https://fonts.googleapis.com/css2?family=Charm';
@import 'https://fonts.googleapis.com/css2?family=Lusitana';
@import 'https://fonts.googleapis.com/css2?family=Macondo';
@import 'https://fonts.googleapis.com/css2?family=Nanum+Brush+Script';

@font-face { font-family: 'Zachar'; src: url('/static/fonts/Zachar Book Rust Scratched.ttf') format('truetype'); }

@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');


@font-face { font-family: 'Majesty Medium Regular'; src: url('/static/fonts/MajestyMedium_normal_normal.ttf') format('truetype'); }

@font-face { font-family: 'Road Rage'; src: url('/static/fonts/Road_Rage.ttf') format('truetype'); }
@font-face { font-family: 'Claws'; src: url('/static/fonts/CLAWS_1.ttf') format('truetype'); }
@font-face { font-family: 'Balthazar'; src: url('/static/fonts/balthazarregular.ttf') format('truetype'); }
@font-face { font-family: 'Banshee Std'; src: url('/static/fonts/bansheestd.ttf') format('truetype'); }
@font-face { font-family: 'Tower Ruins Drop-Case'; src: url('/static/fonts/towerruinsdrop.ttf') format('truetype'); }
@font-face { font-family: 'Long Shot'; src: url('/static/fonts/Long_Shot.ttf') format('truetype'); }
@font-face { font-family: 'Reckoner'; src: url('/static/fonts/Reckoner.ttf') format('truetype'); }
@font-face { font-family: 'Reckoner Bold'; src: url('/static/fonts/Reckoner_Bold.ttf') format('truetype'); }
@font-face { font-family: 'Midorima Regular'; src: url('/static/fonts/Midorima-PersonalUse-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Tombstone Regular'; src: url('/static/fonts/tombstone.regular.ttf') format('truetype'); }
@font-face { font-family: 'Kudasai Regular'; src: url('/static/fonts/KUDASAI_.ttf') format('truetype'); }


/* Vine overlay is hidden site-wide - the layout has no room for it. */
.left-vines {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: auto;
    z-index: 9999;
    pointer-events: none; }

.left-vines img {
    height: 100%;
    width: auto;
    display: block;
}

/* ----------------------------- LINKS  ----------------------------- */

a { 
    color           : #0d3d0b;
    transition      : color 0.3s;}

a:hover {
	color           : #6c9343;
	transition      : all 0.3s ease; 
	text-decoration : none; }

/* ---------------------------- IMAGES  ----------------------------- */

.image_left {
    width: 28%;
    display: block;
    float: left;
    margin-right: 10px;
	border: 1px solid #c7945b; }

.image_right {
    width: 28%;
    display: block;
    float: right;
    margin-left: 10px;
	border: 1px solid #c7945b; }

.setting_image { 
    float                 : right;
    margin-left           : 10px;
    margin-top            : 4px;
    width                 : 380px; }

/* ----------------------------- BACKGROUND  ----------------------------- */

body {
	background            : url(/static/website/images/pages/menu/menu_background.jpg);
	background-size       : cover;
	background-attachment : fixed;
	background-repeat     : no-repeat;
	/* Clearance for the position:absolute .footer. Must be PADDING, not
	   margin - a bottom margin on <body> collapses through <html>
	   (min-height:100%) and adds that many px of phantom scroll to every
	   page, so short pages always kept a scrollbar alive. */
	margin-bottom         : 0;
	padding-bottom        : 42px; }

* {
	scrollbar-color       : #133e0f #f0efe9; }

/* ----------------------------- MENU  ----------------------------- */

.navbar {
    border-bottom   : 2px solid #cb7035;
	padding-left    : 5em; 	}

.menu_logo {
    height          : 60px;
    padding-left    : 5.4em}

.submenu_topics {
	width           : 160px;
	color           : #8c4322 }

/* ----------------------------- TOC TABLE  ----------------------------- */

#toc_container {
    background-image    : linear-gradient(to right, #b24fb43d, #3dff2a1c, #8ecb8845), url(/static/website/images/pages/background_dark.jpg);
    background-repeat: repeat;
    background-position : top left;
    background-blend-mode: multiply, color;
    border-radius       : 0px 10px 40px 0px;
    border              : 1px solid #cbcbcb;
    box-shadow          : 5px 5px 6px 0px #00000094;
    font-family         : "Oxanium", sans-serif;
    font-size           : 12px;
    letter-spacing      : 0.05em;
    padding             : 1rem;
    position            : relative;
    width               : 40%;	}

/* Reset list styles */
#toc_container ul, #toc_container li {
    list-style       : none !important;
    margin           : 0;
    padding          : 0; }

/* list spacing */
.toc_list > li {
    margin-bottom    : 1rem;
    padding-bottom   : 0.5rem;
    border-bottom    : 1px solid rgba(255, 215, 160, 0.08); }

.toc_list > li > b::before {
    color            : #7a7265;
    content          : "0" counter(section) ". ";
    counter-increment: section; }

.toc_list a {
	color  : #31353b;
    display: grid;
	font-weight: 600;
    grid-template-columns: 12px 1fr;
    gap: 8px; }

.toc_list a:hover {
    color: #fff;
	background: linear-gradient(90deg, #896784, transparent);
    transform: translateX(4px);
	transition: all 0.3s;	}

.toc_list ul {
    padding-left: 0.8rem;
    margin-bottom: 0.6rem; }

.toc_list li li {
    margin: 0.15rem 0; }

.toc_list li li a::before {
    content: ">";
    color: #7a7265;
    transition: all 0.2s ease; }

.toc_list a:hover::before {
    color: #f0d8a8; }

#toc_container * {
    position: relative;
    z-index: 1;
}

.toc_list a.active {
    color: #f0d8a8;
    transform: translateX(6px); }

/* ----------------------------- GENERAL ----------------------------- */

.card {
    background-color      : transparent;
	border                : none; } 

.card-body {
	background-image      : url(/static/website/images/pages/background.jpg);
	background-position   : top left; 
    background-repeat     : repeat;
    border-radius         : 20px;
    box-shadow            : rgba(0, 0, 0, 0.25) 0px 5px 12px 6px;
    color                 : #265e21;
	font-family           : IM Fell English SC, serif;
    font-size             : 12pt;
	text-align            : justify; }

.page_logo {
    float                 : right;
    margin-left           : 1em;
    width                 : 40%; }

.main_title {
	background            : linear-gradient(to right, #b24fb4, #3dff2a, #8ecb88), url(/static/website/images/grunge_mask.png);
    background-blend-mode : multiply,color;
    background-clip       : text;
    background-size       : cover, cover;
    color                 : #00000000;
    letter-spacing        : 0.05em;
    line-height           : 84px;
    font-family           : "Cinzel", serif;
    font-size             : 40pt;
    font-weight           : 700;
	text-transform        : uppercase;
    text-shadow           : none; }

.title_divider {
	background            : linear-gradient( to right, rgba(137,103,132,0.6) 10%, #896784 30%, rgba(137,103,132,0.6) 50%, transparent );
    filter                : blur(0.3px);
    height                : 3px;
	width                 : 46%; }

.subtitle {
    color                 : #896784;
    font-size             : 10pt;
    padding-top           : 1em;
	text-transform        : uppercase; }

.subtitle_quotes {
    color                 : #896784;
	font-size             : 11pt;
	font-style            : italic; }

.main_divider {
	width                 : 50%;
    margin-right          : auto;
    margin-left           : auto;
	display               : block; }

.page_quote {
	background            : rgba(0, 0, 0, 0.5);
    padding               : 10px;
    border-radius         : 10px;
    box-shadow            : rgba(0, 0, 0, 0.5) 0px 0px 7px 4px;
    font-size             : 12pt;
	color                 : #b79a6b;
    font-family           : 'AvQest'; }

.flatpage_title {
    border-bottom         : 1px solid #896784;
    color                 : #896784;
    font-family           : "IBM Plex Mono", monospace;
    font-size             : 28px;
    margin-bottom         : 1rem;
    text-align            : center;
    text-transform        : uppercase;	}

.flatpage_subtitle {
    font-size             : 14pt;
	font-weight           : 600;
	text-transform        : uppercase; }

.content_table {
    border                : 1px solid #896784;
    border-collapse       : separate;
	border-radius         : 10px;
	border-spacing        : 0; }

.info_box {
    background-image      : url(/static/website/images/pages/background_dark.jpg);
    background-repeat     : repeat;
    background-position   : top left;
	border                : 1px solid #cbcbcb;
    border-radius         : 20px 0px 0px 20px;
	box-shadow            : inset 5px 5px 6px 0px #00000094;
    height                : 30em;
    overflow-y            : scroll;
    padding               : 20px;
    scrollbar-width       : thin;
    scrollbar-color       : #133e0f #f0efe9;
    width                 : 100%; }

.divider {
	width: 50%;
    margin-left: auto;
    margin-right: auto;
	display: block; }

.footer {
    color                 : #5f873e;
    background            : linear-gradient(90deg, #d1dbeb 0%, #f3e2da 30%, #f4fff2 48%, #f5fbe4 75%, #f3e1e0 90%, #e5d3e0 100%);
	border-top            : 1px solid #5f873e;
    height                : 30px;
    line-height           : 30px;
    font-family           : Zachar;
    /* Zachar's line metrics run a few px taller than 30px; without this the
       "Powered by Evennia" line bled below the absolutely-positioned footer
       and added ~5px of phantom scroll to every page. */
    display               : flex;
    align-items           : center;
    justify-content       : center;
    overflow              : hidden; }

table.center th {
	font-weight           : normal; }

.table_header {
	border-bottom         : 1px solid #f4c67c;
	font-size             : 12pt;
	color                 : #265e21; }

.special_table {
	width                 : 100%;
    border-spacing        : 0;
    font-size             : 11pt;
    border-bottom         : 1px solid #1f1f1f47;
    background-image      : url(/static/website/images/pages/background.jpg);
    background-repeat     : repeat;
    background-position   : top left;
    color                 : #000;
    text-shadow           : none;
    line-height           : 24pt;	}

.special_table a { 
    color           : #bf3b24;
    transition      : color 0.3s;}

.special_table a:hover {
	color           : #ff8f00;
	transition      : all 0.3s ease; 
	text-decoration : none;
    font-size       : 1.1em; }

/* ----------------------------- CHARACTER PAGES  ----------------------------- */

.card_header             { width                 : 50%;
						   margin-left           : 1em;
						   margin-top            : 1em; }

.character_picture       { display               : block;
                           margin-left           : auto;
                           margin-right          : auto;
                           width                 : 300px; }

.character_name          { color                 : #cfb9a7;
                           font-family           : Cinzel;
                           font-size             : 40pt;
						   font-weight           : 100;
                           line-height           : 100%;
                           text-transform        : uppercase; }

.character_quote         { color                 : #fff;
                           font-family           : Macondo;
                           font-size             : 11pt;
                           padding-right         : 40px;
                           vertical-align        : top; }

.character_profile_A     { color                 : #f3ce8a;
                           text-align            : right;
                           vertical-align        : top;
                           width                 : 10%; }

.character_profile_B     { color                 : #fff;
                           padding-left          : 5px;
                           vertical-align        : top; }

.sheet_slate             { border-radius         : 10px;
                           box-shadow            : 0px 0px 1px 1px #f3ce8a, 10px 10px 2px #000000c7;
                           font-family           : 'IBM Plex Mono';
                           font-size             : 8pt;
                           margin-left           : auto;
                           margin-right          : auto;
                           width                 : 100%; }

.character-container     { margin-left           : 1em; }

.medal                   { width                 : 3em; }

.sheet_clearance         { margin-right          : 2em;
						   width                 : 5em; }

.character-gallery {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(180px, 1fr));
    gap                   : 20px;
    margin-top            : 40px;
    align-items           : center;
    background            : url(/static/website/images/pages/toc_stones.jpg) top left repeat;
    box-sizing            : border-box;
    padding               : 20px;
    box-shadow            : inset 0px 0px 11px 20px rgba(0, 0, 0, 0.5);
    border                : solid 1px #171717;
	width                 : 100%;
	justify-items         : center;	}

.gallery-item {
    position: relative;
    width: 160px;
    height: 240px;

    overflow: hidden;
    cursor: pointer;

    border: 2px solid rgba(180, 180, 180, 0.15);
    background: #050505;

    box-shadow:
        0 0 12px rgba(0,0,0,0.8),
        inset 0 0 20px rgba(0,0,0,0.9);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.07);
    filter: brightness(1.1);
}

/* ----------------------------- HOUSE PAGES  ----------------------------- */

.house_name {
    font-family           : AvQest;
    font-size             : 20pt;
    text-align            : center;
	color                 : #b79a6b; }

.house-wrapper img {
	width                 : 100%; }

.house_box {
	background            : url(/static/website/images/pages/toc_stones.jpg) top left repeat;
    box-sizing            : border-box;
    color                 : #f3ce8a;
    box-shadow            : inset 0px 0px 11px 15px rgba(0, 0, 0, 0.5);
    width                 : 35%;
    border                : solid 1px #171717;
    float                 : right;
	margin-left           : 10px;
    font-size             : 10pt; }

.house_title {
    text-align            : center;
    font-size             : 20pt;
    font-family           : 'AvQest';
    padding-top           : 10px;
    color                 : #d2c8ae;	}

.house_words {
	color                 : #b79a6b;
	text-align            : center;
    font-size             : 12pt; }

.house_portrait {
	padding               : 20px;
	width                 : 280px;
	filter                : drop-shadow(4px 4px 6px black);}

.house_profile_A {
	text-align            : right;
	padding-right         : 5px;
    font-weight           : 400;
    width                 : 30%;
	font-family           : AvQest;
    color                 : #b79a6b;
    vertical-align        : top;	}
	
.house_profile_B {
	padding-left          : 5px;
    width                 : 60%;
    color                 : #d2c8ae; }