@font-face {
    font-family: 'Charm';
    font-style: normal;
    font-weight: 700;
    src: local(''),
        url('/interface/fonts/charm-v5-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
        url('/interface/fonts/charm-v5-latin-700.woff') format('woff'), /* Modern Browsers */
        url('/interface/fonts/charm-v5-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/interface/fonts/charm-v5-latin-700.svg#Charm') format('svg'); /* Legacy iOS */
    font-display: swap;
}
@font-face {
    font-family: 'Vollkorn SC';
    font-style: normal;
    font-weight: 600;
    src: local(''),
        url('/interface/fonts/vollkorn-sc-v4-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
        url('/interface/fonts/vollkorn-sc-v4-latin-600.woff') format('woff'), /* Modern Browsers */
        url('/interface/fonts/vollkorn-sc-v4-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/interface/fonts/vollkorn-sc-v4-latin-600.svg#Charm') format('svg'); /* Legacy iOS */
    font-display: swap;
}
@font-face {
    font-family: 'Sansita Swashed';
    font-style: normal;
    font-weight: 400;
    src: local(''),
        url('/interface/fonts/sansita-swashed-v1-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('/interface/fonts/sansita-swashed-v1-latin-regular.woff') format('woff'), /* Modern Browsers */
        url('/interface/fonts/sansita-swashed-v1-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/interface/fonts/sansita-swashed-v1-latin-regular.svg#Charm') format('svg'); /* Legacy iOS */
    font-display: swap;
}

:root {
    --big-font: Vollkorn SC;
    --standard-font: "comma-base";
}

#back_all { background:#000 url("/img/styles/medieval1/site_back.webp") fixed center no-repeat; }

#black_back .top_div, #black_back2 .top_div2 {
    background:#cdac8c;
    border-image-slice: 120 62 75 112;
	border-image-width: 20px; border-width:20px; border-style:solid;
    border-image-source:url(/img/map_pergament.webp);
    border-image-outset:0;
	border-image-repeat:stretch;
	background-clip:content-box;
    color:#111;
}

.button, .red_button, .green_button, .blue_button { background:url(/img/ButtonRed.webp) 0 -180px; }
.button:hover:not(:disabled) { background:url(/img/ButtonRed.webp) 0 -60px; }
.red_button, .green_button, .blue_button { background-position-y:0; height:38px; padding:20px 0 0 0; }
	.red_button:hover:not(:disabled), .green_button:hover:not(:disabled), .blue_button:hover:not(:disabled), .active_blue:not(:disabled) { background-position-y:-60px; }
	.red_button:active:not(:disabled), .green_button:active:not(:disabled), .blue_button:active:not(:disabled) { background-position-y:-120px; }

.simple_ribbon { background:url(/img/RibbonCentre.png) repeat-x; background-size:50px 30px; filter:hue-rotate(-110deg); padding:3px; color:#fff; display:block; 
        position:absolute; width:calc(100% + 50px); top:-20px; left:-25px; box-shadow:0 2px 3px #000; font-family:Vollkorn SC; }

.paper_back { background:#cdac8c; border-image-slice: 120 62 75 112; position: relative; margin:0 15px; padding-top:8px; filter:drop-shadow(0 3px 3px #111);
	border-image-width: 20px; border-width:20px; border-style:solid;
    border-image-source:url(/img/map_pergament.webp);
    border-image-outset:0;
	border-image-repeat:repeat; background-clip:content-box; }
.ability hr { color:#336; width:80%; margin:0 auto; }
.ability:hover { filter:drop-shadow(0 0 1px #888); }

.dark_button {
    background:url(/img/ButtonDark.webp) 0 -180px;
}

#logo { width:300px; height:120px; background:url("/img/logo.webp") no-repeat; }