<link href="https://fonts.googleapis.com/css?family=Lora:italic" rel="stylesheet">
<style>/* FARBDEFINITION
*/ .tm12body { --lighthg: #11131D; /* heller Hintergrund
*/ --darkhg: #11131D; /* dunkler Hintergrund
*/ --barhg: rgba(38,38,38,0.6); /* Prozentbalken, Hintergrund
*/ --border: #262626; /* Rahmenlinie
*/ --darkbr: #1c0302; /* Rahmen um die Balkeneingabe
*/ --lightred: #a51727; /* z.B. Beitragsoptionen
*/ --middlered: #7b0001; /* z.B. Accountname
*/ --darkred: #8A6FD1; /* z.B. Icons
*/ --font1: #D8D8E6; /* z.B. Datum des Posts
*/ --font2: #D8D8E6; /* z.B. Posttext
*/ --font3: #9f9f9f; } /* z.B. Spielername

POSTBIT insgesamt
*/ .tm12body { background-color: #11131D; border-top: solid 1px #8A6FD1; margin: auto; width: 950px; box-sizing: border-box; padding: 20px 0px 10px 0px; } /*

BEITRAG
*/ .tm12post { color: #D8D8E6; width: 690px; box-sizing: border-box; font-family: sans-serif; font-size: 12px; text-align: justify; padding: 50px 55px 30px 20px; line-height: 30px; } /*
*/ .tm12p { background: #11131D; padding: 20px 10px; } /*
*/ .tm12sig { padding: 25px 0px 0px 0px;} /*

BEITRAGSOPTIONEN
*/ .tm12nav { line-height: normal; border-bottom: solid 1px var(--border); border-top: solid 1px var(--border); height: 40px; overflow: hidden; display: flex; justify-content: flex-end; } /*
*/ .tm12date { color: #8A6FD1; overflow: hidden; width: 350px; font-family: sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 15px 0px 0px 10px; box-sizing: border-box; } /*
*/ .tm12menubr { overflow: hidden; text-align: center; width: 100px; } /*
*/ .tm12icon1 { color: #8A6FD1; opacity: 0.8; font-size: 42px; margin-top: 0px; } /*
*/ .tm12icon2 { color: #8A6FD1; opacity: 0.8; font-size: 62px; margin-top: -10px; } /*
*/ .tm12icon3 { color: #8A6FD1; opacity: 0.8; font-size: 62px; margin-top: -15px; } /*
*/ .tm12menu1 { color: #D8D8E6; font-family: sans-serif; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; margin-top: -26px; position: relative; z-index: 2; } /*
*/ .tm12menu2 { color: #D8D8E6; font-family: sans-serif; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; margin-top: -36px; position: relative; z-index: 2; } /*
*/ .tm12menu3 { color: #D8D8E6; font-family: sans-serif; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; margin-top: -41px; position: relative; z-index: 2; } /*

hovereffekt
*/ .tm12menubr:hover, .tm12ccont:hover { background: var(--lighthg); } /*
*/ .tm12menubr:hover .tm12menu1, .tm12menubr:hover .tm12menu2, .tm12menubr:hover .tm12menu3, .tm12ccont:hover .tm12menu4, .tm12ccont:hover .tm12menu5, .tm12ccont:hover .tm12menu6 { color: var(--font2); } /*
*/ .tm12menubr:hover .tm12icon1, .tm12menubr:hover .tm12icon2, .tm12menubr:hover .tm12icon3, .tm12ccont:hover .tm12icon4, .tm12ccont:hover .tm12icon5, .tm12ccont:hover .tm12icon6 { color: rgba(13,13,13,0.85); } /*

CHARAINFOS
*/ .tm12box { width: 305px; box-sizing: border-box; padding: 5px 0px 0px 20px; } /*
*/ .tm12box .tm12nav { margin-top: 20px; } /*

Accountname
*/ .tm12h1 { color: #8A6FD1; font-family: 'Lora', serif; font-size: 40px; text-align: right; font-style: italic; height: 45px; overflow: hidden; padding: 0px; box-sizing: border-box; } /*

Avarahmen
*/ .tm12ava { background: #070710; border-top: solid 7px var(--barhg); border-bottom: solid 7px var(--barhg); border-radius: 0px; margin-bottom: 20px; text-align: center; margin-top: 42px; } /*

*/ .tm12h2, .tm12h3 { color: #D8D8E6; font-family:'montserrat', serif; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; } /*
*/ .tm12h4 { color: #D8D8E6; font-family:'montserrat', serif; font-size: 8px; text-transform: uppercase; letter-spacing: 2px; text-align: right; } /*
*/ .tm12h3 { margin-top: 20px; } /*
*/ .tm12h4 { margin-top: -10px; margin-bottom: 10px; } /*
*/ .tm12h2 span, .tm12h3 span { font-size: 12px; } /*
*/ .tm12hg { background: var(--barhg); padding: 2px; border-radius: 0px; margin-bottom: 10px; } /*
*/ .tm12bar { background: #8A6FD1; border: solid 1px var(--darkbr); padding: 3px; border-radius: 0px; box-sizing: border-box; } /*

ZUSAMMENFASSUNG
*/ .tm12profile { background: transparent; border: solid 1px rgba(138,111,209,.15); color: #D8D8E6; font-family:'montserrat', serif; font-size: 11px; text-align: justify; line-height: 18px; height: 130px; overflow: auto; padding: 12px; border-radius: 0px; transition: .3s; } /*
*/ .tm12profile:hover { border-color: rgba(138,111,209,.35); background: rgba(138,111,209,.03); } /*
*/ .tm12profile::-webkit-scrollbar { background: #8A6FD1; width: 3px; } /*
*/ .tm12profile::-webkit-scrollbar-thumb { background: #8A6FD1; } /*

FACTS
*/ .tm12facts { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 0px 0px 20px 0px; padding-bottom: 18px; border-bottom: solid 1px rgba(138,111,209,.15); } /*
*/ .tm12fact { background: transparent; border: solid 1px rgba(138,111,209,.08); height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; transition: .3s; } /*
*/ .tm12fact:hover { border-color: rgba(138,111,209,.35); background: rgba(138,111,209,.03); } /*
*/ .tm12fact i { color: #8A6FD1; font-size: 13px; margin: 0px; } /*
*/ .tm12fact span { color: #D8D8E6; font-family:'Lora', serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; line-height: 10px; } /*

*/ .tm12cbox { display: flex; min-height: 80px; } /*
*/ .tm12ccont { overflow: hidden; text-align: center; width: calc(100%/3); } /*
*/ .tm12icon4 { color: #8A6FD1; opacity: 0.7; font-size: 53px; font-weight: bold; margin-top: -7px; transition: .3s; } /*
*/ .tm12icon5 { color: #8A6FD1; opacity: 0.7; font-size: 50px; margin-top: -5px; transition: .3s; } /*
*/ .tm12icon6 { color: #8A6FD1; opacity: 0.7; font-size: 37px; margin-top: 2px; transition: .3s; } /*
*/ .tm12menu4 { color: #D8D8E6; font-family: sans-serif; font-size: 8px; text-transform: uppercase; letter-spacing: 3px; margin-top: -30px; position: relative; z-index: 2; } /*
*/ .tm12menu5 { color: #D8D8E6; font-family: sans-serif; font-size: 8px; text-transform: uppercase; letter-spacing: 3px; margin-top: -29px; position: relative; z-index: 2; } /*
*/ .tm12menu6 { color: #D8D8E6; font-family: sans-serif; font-size: 8px; text-transform: uppercase; letter-spacing: 3px; margin-top: -23px; position: relative; z-index: 2; } /*

BENUTZERTITEL
*/ .tm12title { margin: 16px 0px 18px 0px; } /*
*/ .tm12titleline { display: flex; align-items: center; gap: 10px; } /*
*/ .tm12titleline:before, .tm12titleline:after { content: ""; flex: 1; height: 1px; background: rgba(138,111,209,.35); } /*
*/ .tm12titleline span { color: #8A6FD1; font-size: 9px; line-height: 1; } /*
*/ .tm12titlespan { color: #D8D8E6; font-family: 'Lora', serif; font-size: 13px; text-align: center; letter-spacing: 2px; line-height: 18px; padding: 6px 0px; } /*

ICON
*/ .tm12icon { border: solid 1px rgba(138,111,209,.15); padding: 8px; box-sizing: border-box; margin-top: 21px; transition: .3s; overflow: hidden; } /*
*/ .tm12icon:hover { border-color: rgba(138,111,209,.35); background: rgba(138,111,209,.03); } /*
*/ .tm12icon img { display: block; width: 100%; height: auto; transition: .3s; } /*
*/ .tm12icon:hover img { opacity: .95; }</style>