/* Navigation Styling */
#charsheet_navigation {
    display: flex;
    justify-content: center; /* Mittig horizontal ausrichten */
    align-items: center;
    background: var(--designbgcolor);
    padding: 10px;
    font: 10px sans-serif;
    letter-spacing: 3px;
    position: fixed; /* Befestige die Navigation am oberen Rand */
    width: 100%; /* Vollbildbreite */
    top: 0; /* Oben anheften */
    z-index: 1000; /* Sicherstellen, dass es über anderen Elementen liegt */
}

/* Container für den Index-Link */
.index-link-container {
    position: fixed;
    top: 0;
    left: 0;
    background: transparent;
	font-size: 14px;
  font-family: Wolfpack;
  Text-transform: uppercase;
    padding: 10px;
    z-index: 1001; /* Über Navigation */
}

index-link-return a {
	color:var(--highlight);
	}

index-link-return a:hover {
	color:var(--accent);
	}

.tab_buttons {
    display: flex;
    justify-content: center;
}

.tab_buttons button {
margin: 0 5px;
 padding: 5px 5px;
  border: 0px solid #ffffff30;
  background-color: #fffefe00;
  color: var(--highlight);
  cursor: pointer;
  transition: background-color 0.8s, color 0.8s;
  text-transform: uppercase;
  letter-spacing: 3px;
  font: 10px sans-serif;
}

.tab_buttons button:hover {
     color: var(--accent);
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}

.charsheet_cw {
font-size: 10px;
  text-align: right;
  color: var(--designmaincolor);
  font-weight: bold;
  text-transform: uppercase;
  padding: 4px;
  position: relative;
  top: 40px;
  right: 50px;
}

/* Media Query for screens up to 1200px wide */
@media screen and (max-width: 1200px) {
    .charsheet_cw {
        top: 100px;
    }
}

.charsheet_name {
    font-family: SacraSpina;
    font-size: 200px;
    text-align: center;
    color: var(--designmaincolor);
	margin: -50px;
}

.charsheet_usertitle {
    font-family: Wolfpack;
    font-size: 10px;
    text-align: center;
    color: var(--accent);
    margin-top: -84px;
    text-transform: uppercase;
    letter-spacing: 10px;
}

.charsheet_info_container {
    display: flex;
    align-items: center;
  gap: 20px;
  margin: 60px auto 50px 200px;
  background-color: var(--designbgcolorlightest);
  width: 700px;
  padding: 15px;
}

.charsheet_avatar {
    border: 1px solid var(--designnavhr);
    width: 250px;
    height: 350px;
    padding: 10px;
}

.charsheet_quickfacts_container {
    display: flex;
    flex-direction: column; /* Quickfacts untereinander anordnen */
    justify-content: center; /* Vertikal zentrieren */
    gap: 10px; /* Abstand zwischen den Quickfacts */
    height: 350px; /* Höhe des Containers auf 350px festlegen */
}

.charsheet_quickfacts {
    font-size: 15px;
    color: var(--accent);
    text-transform: uppercase;
    font-family: Wolfpack;
}

.charsheet_quickfacts span {
    font-size: 10px;
    font-family: Montserat;
    color: var(--designtextcolor);
    margin-left: 6px;
    font-weight: 400;
}

/* CHARSHEET FORM */
.charsheet_desc {
    font-family: Vandals;
    font-size: 25px;
    text-align: center;
    color: var(--accent);
    padding: 10px;
    margin-top: 15px;
    display: flex; /* Flexbox verwenden */
    align-items: center; /* Vertikal zentrieren */
    justify-content: center; /* Horizontal zentrieren */
    position: relative;
}

.charsheet_desc::before,
.charsheet_desc::after {
    content: "";
    flex: 1; /* Nimmt den gesamten verfügbaren Platz ein */
    height: 1px;
    background-color: var(--designnavhr); /* Weiße Linie mit Opazität */
}

.charsheet_desc::before {
    margin-right: 10px; /* Abstand zum Text */
}

.charsheet_desc::after {
    margin-left: 10px; /* Abstand zum Text */
}

.charsheet_text {
    text-align: justify;
    background: var(--designbgcolor);
    padding: 24px;
    font-size: 12px;
    line-height: 1.8em;
}

.charsheet_time {
 text-transform: uppercase;
  font-size: 8px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 3px;
  padding: 2px;
  margin: -5px auto 15px auto;
}


.charsheet_subcat {
    text-align: justify;
    border: 1px solid var(--designbordercolor);
    background: var(--designbgcolor);
}


.charsheet_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers the container horizontally */
    gap: 20px; /* Adjust the gap as needed for equal spacing */
}

.charsheet_flexitem {
    flex: 1 1 200px; /* Adjust the base width as needed */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
    padding: 10px; /* Optional: Padding inside each item */
    text-align: justify; /* Optional: Centers the text inside each item */
    border: 1px solid var(--designbordercolor); /* Optional: Adds a border to each item */
	margin-bottom: 20px;
}







.profile_header{
	margin: 60px auto;
	text-align: center;
	border: 1px solid var(--designnavhr);
	padding: 20px;
	width: 800px;
}

.post_name {
    width: 100%;
    box-sizing: border-box;
    padding: 20px; /* Padding */
}

.post_name_style {
    font-family: SacraSpina;
   font-size: 90px;
}

.post_name_usertitle {
    font-family: Wolfpack;
    font-size: 8px;
    text-transform: uppercase;
    margin-left: 55px;
    letter-spacing: 5px;
    margin-top: -50px;
    color: var(--accent);
    line-height: 2em;
    margin-right: 60px;
}

.post_name_factrow {
    padding: 10px;
    background: ;
    border: 0 solid #933939;
    margin-top: 5px;
    margin-bottom: 5px;
}

.post_name_facts {
    padding: 4px;
    font-size: 16px;
    margin: 10px;
    font-family: Wolfpack;
}