/* CHARAKTERÜBERSICHT SUMMARY */

#mellasbande{width: 500px; min-height: 300px; box-sizing: border-box; overflow: hidden; margin: auto; background-color: #0c0d0b;}

#mellasbande #mella{font-family: "Ultra", serif; font-weight: 400; font-style: normal; font-size: 44px; color: #fff; text-align: right;  padding: 20px 20px 0px 20px;}

#mellasbande #est{font-family: "Nunito Sans", serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; color: #fff; text-transform: uppercase; letter-spacing: 3px; font-size: 9px; text-align: right; padding: 0px 20px; line-height: 0%; margin-bottom: 30px;}

#mellasbande .box {display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; background-color: #262921; padding-bottom: 20px;}

#mellasbande .headline{box-sizing: border-box; width: 80px; height: 210px; background-color: #99a08b; position: relative;}
#mellasbande .charabox{background-color: #191b16; width: 420px; height: 210px; box-sizing: border-box; overflow: hidden; font-family: "Nunito Sans", serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; color: #fff; padding: 30px;}

#mellasbande #allstars{font-family: "Ultra", serif; font-weight: 400; font-style: normal; font-size: 42px; color: #fff; transform: rotate(-90deg); position: absolute; left: -14px; top: 85px;}

#mellasbande #newbies{font-family: "Ultra", serif; font-weight: 400; font-style: normal; font-size: 42px; color: #fff; transform: rotate(-90deg); position: absolute; right: 20px; top: 115px;}

#mellasbande #legends{font-family: "Ultra", serif; font-weight: 400; font-style: normal; font-size: 42px; color: #fff; transform: rotate(-90deg); position: absolute; left: 10px; top: 115px;}

/*3 FAVE CHARA GRID */
#mellasbande .snowflakes {display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; grid-row-gap: 0px;}

#mellasbande .flakes{width: 100%; height: 150px; box-sizing: border-box; overflow: hidden; font-size: 10px; text-align: center; text-transform: uppercase; letter-spacing: 1px;}

#mellasbande a{text-decoration: none; color: #80896f; font-weight: normal; }
#mellasbande b{font-weight: 700; color: #666d58; font-size: 10px;}

.flakes span { 
   position: absolute;
   width: 200px;
   color: #000000;
   margin-top: 0px;
   margin-left: -50px;
   padding: 15px;
   background-color: #80896f;font-family: "Nunito Sans", serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-size: 9px; text-align: justify;
   visibility: hidden;z-index:1900;}

/* bei Mauskontakt sichtbar */
.flakes:hover span { visibility: visible;}

#mellasbande .img_oben{width: 70px; height: 70px; overflow: hidden; margin: auto; border-radius: 100%; margin-top: 15px; margin-bottom: 15px;}

/* UNTERER BEREICH */
#mellasbande #diebande{width: 100%; min-height: 200px; background-color: #0c0d0b; padding: 30px; box-sizing: border-box; display: grid; grid-template-columns: repeat(7, 1fr);}

#mellasbande .img_mini{width: 50px; height: 50px;  margin: 5px; background-color: #80896f; box-sizing: border-box;}

/* HOVER FENSTER MINI */
.img_mini span { 
   position: absolute;
   width: 120px;
   color: #000000;
   margin-top: 55px;
   margin-left: -50px;
   padding: 15px;
   background-color: #80896f;font-family: "Nunito Sans", serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-size: 9px; 
   visibility: hidden;z-index:1900;}

/* bei Mauskontakt sichtbar */
.img_mini:hover span { visibility: visible;}

/* ___ INFO CODE ____ */
#kar_plot{width: 500px; height: auto; margin: auto; overflow: hidden; padding: 20px; background-color: #e5e5e1; color: #5c4430;} #kar_plot .square{width: 120px; height: 120px; border: 1px solid #b6b1a4; margin: 20px; box-sizing: border-box; font-family: 'Georgia'; font-size: 25px; color: #947f69; line-height: 120%; text-align: right; position: absolute; top: 0px; right: 170px;}#kar_plot .parent {display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; position: relative;} #kar_plot #lefttxt, #kar_plot #righttxt{text-align: justify; font-family: 'Calibri'; font-size: 12px; padding: 20px 10px; color: #5c4430;} #kar_plot #lefttxt:before, #kar_plot #righttxt:before {content: ""; width: 33px; height: 125px; background: #e5e5e1;box-sizing: border-box; margin: 0px 20px} #kar_plot #lefttxt:before {float: right;} #righttxt:before {float: left;} #kar_plot #img1{width: 100%; height: 220px; background-image: url(https://64.media.tumblr.com/e267bfe78b4d3db469626832f7b86373/ef2f651295356329-64/s1280x1920/77e2ff076e56da3ae331ed404eeffd0d04a5e449.jpg); background-size: 600px; background-position: -10px -10px; position: relative;} #kar_plot #line1{background-color: #b6b1a4; padding: 3px 7px; width: max-content; text-align: center; font-family: 'Georgia'; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; position: absolute; left: 40px; bottom: 65px;} #kar_plot #line2{background-color: #b6b1a4; padding: 3px 7px; width: max-content; text-align: center; font-family: 'Georgia'; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; position: absolute; left: 60px; bottom: 45px;} #kar_plot #img2{width: 100%; height: 50px; background-image: url(https://up.picr.de/48016229rz.jpg); background-size: cover; background-position: 0% 80%;} #kar_plot #shorts{width: 100%; height: 70px; border. 1px solid red; box-sizing: border-box; padding: 15px; text-align: center; font-family: 'Georgia'; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;} #kar_plot a{background-color: #b6b1a4; padding: 3px 6px; font-family: 'Calibri'; font-size: 9px; letter-spacing: 2px; text-decoration: none; color: #5c4430;} #kar_plot a:hover{background-color: #d5cca4;} #kar_plot b{background-color: #b6b1a4; padding: 2px 6px; font-family: 'Calibri'; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; color: #5c4430;} #kar_plot i{font-style: italic; letter-spacing: 2px; color: #a4944c;}

/* POST HEADLINER */

.fireheadline{width: 500px; 
	height: 180px; 
	margin: auto; 
	box-sizing: border-box;
  padding: 20px;
}

.fireheadline .line{width: auto; 
height: 10px; 
background: var(--akzent-color2); 
box-sizing: border-box; 
margin-bottom: 20px;}

.fireheadline .imggrid{display: grid; grid-template-columns: repeat(5, 1fr); grid-column-gap: 20px; grid-row-gap: 10px; justify-content: center;
  align-items: center; margin-bottom: 20px;}

.imggrid img{width: 75px;
height: 75px; 
  overflow: hidden;}

/* Schriftfarben für die Charaktere */

thorn{color: var(--akzent-color2); font-weight: bold;}
aveline{color: var(--akzent-color2); font-weight: bold;}
iviar{color: var(--akzent-color3); font-weight: bold;}
victoria{color: var(--akzent-color1); font-weight: bold;}
sein{color: #7a0000; font-weight: bold;}
eliza{color: #946D6C; font-weight: bold;}
ereas{color: #839db3; font-weight: bold;}
quinn{color: #ffbd4c; font-weight: bold;}
king{color: #adcdc7; font-weight: bold;}
queen{color: #f2b9a8; font-weight: bold;}
susan{color: #91a886; font-weight: bold;}
edmund{color: #5175af; font-weight: bold;}

/* MAP */

#ftf_map{width: 600px; height: 600px; margin: auto; position: relative; overflow: hidden; background-image: url(https://up.picr.de/49262015pn.jpg); background-size: contain;}

.map_thorn{color: #191919; position: absolute; top: 320px; left: 230px; font-size: 9px; font-weight: bold;}
.map_aveline{color: #191919; position: absolute; top: 370px; left: 300px; font-size: 9px; font-weight: bold;}
.map_iviar{color: #191919; position: absolute; top: 360px; left: 295px; font-size: 9px; font-weight: bold;}
.map_eliza{color: #191919; position: absolute; top: 310px; left: 240px; font-size: 9px; font-weight: bold;}
.map_ereas{color: #191919; position: absolute; top: 300px; left: 300px; font-size: 9px; font-weight: bold;}
.map_erdin{color: #191919; position: absolute; top: 300px; left: 300px; font-size: 9px; font-weight: bold;}

/* CHARA STECKI CODE */
#sophinastecki{width: 500px; height: auto; box-sizing: border-box; margin: auto; padding: 20px; font-family: 'Calibri', sans-serif; font-size: 11.5px; background-color: var(--bg-color2); border-top: 20px solid var(--akzent-color2); color: var(--font-color); text-align: justify;}

#sophinastecki .mainfacts1{width: 240px; height: 100px; border-left: 4px solid var(--akzent-color2); box-sizing: border-box; padding-top: 5px; padding-left: 20px; line-height: 200%; text-align: left; float: right;}

#sophinastecki .mainfacts2{width: 250px; height: 100px; border-right: 4px solid var(--akzent-color2); padding-right: 20px; line-height: 200%; text-align: right; box-sizing: border-box; padding-top: 5px;}

#sophinastecki .mainfacts3{width: 100%; min-height: 100px; border-left: 4px solid var(--akzent-color2); padding-left: 20px; line-height: 200%; margin-left: 20px;}

#sophinastecki .mainfacts4{width: auto; min-height: 100px; border-right: 4px solid var(--akzent-color2); padding-right: 20px; line-height: 200%; text-align: right; margin-right: 20px;}

#sophinastecki .textbox1{width: 100%; min-height: 200px; margin: 20px 0px; padding: 30px 20px 20px 20px; box-sizing: border-box; background-color: var(--bg-color2); position: relative;}

#sophinastecki b{text-transform: uppercase; font-weight: bold; letter-spacing: 1px; color: var(--akzent-color2); display: inline-block; min-width: 110px;}


#sophinastecki .akzent1{font-family: 'Georgia', serif; font-size: 56px; letter-spacing: 1px; color: var(--akzent-color3); position: absolute; top: 0px; left: 10px; text-transform: uppercase; opacity: 0.3;}
#sophinastecki .akzent2{font-family: 'Georgia', serif; font-size: 56px; letter-spacing: 1px; color: var(--akzent-color3); position: absolute; top: 0px; right: 10px; text-transform: uppercase; opacity: 0.3;}