.pg1 {
    background-color: #bca494; /* Balkenfarbe */
    font-family: 'A Pompadour Display', sans-serif;
    font-size: 40px; /* Schriftgröße anpassen, falls gewünscht */
    text-transform: lowercase; /* Alles klein geschrieben */
    color: #84645b;
    min-height: 50px; /* Passe die Höhe nach Bedarf an */
    width: 100%; /* Passt sich der Breite der Zelle an */
    
    display: flex; /* Flexbox aktivieren */
    justify-content: flex-start; /* Positioniert den Text am linken Rand */
    align-items: center; /* Vertikale Ausrichtung des Textes */
}

.pg1 span {
    position: relative; /* Ermöglicht die Verschiebung des Textes */
    left: 60%; /* Schiebt den Text von der Mitte */
    transform: translateX(-50%); /* Korrektur der Position, um den Text zwischen Mitte und Right zu bringen */
}


.pg2 {
    text-transform: uppercase;
    font-size: 20px;
    border-bottom: 2px #84645b solid;
    text-align: center;
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 3px;
    font-family: 'Fjalla One', sans-serif;
	min-height: 20px; /* Passe die Höhe nach Bedarf an */
}

.pg3 {
background-color: #ba7a70; /* Balkenfarbe */
    color: white; /* Schriftfarbe */
    font-family: 'Fjalla One', sans-serif; /* Schriftart */
    display: inline-block;
    font-size: 12px;
    width: 100%; /* Passt sich der Breite der Zelle an */
    text-align: center; /* Text horizontal mittig */
    text-transform: uppercase; /* Text in Großbuchstaben */
    line-height: 1.5; /* Vertikale Ausrichtung des Texts */
	min-height: 20px; /* Passe die Höhe nach Bedarf an */
	padding: 4px;
}

.pg4 {
background-color: #84645b; /* Balkenfarbe */
    color: #e4e4e4; /* Schriftfarbe */
    font-family: 'Fjalla One', sans-serif; /* Schriftart */
    display: inline-block;
    font-size: 13px;
    width: 100%; /* Passt sich der Breite der Zelle an */
    text-align: center; /* Text horizontal mittig */
    text-transform: uppercase; /* Text in Großbuchstaben */
    line-height: 2; /* Vertikale Ausrichtung des Texts */
	min-height: 25px; /* Passe die Höhe nach Bedarf an */
}

.pg5 {
    font-family: 'A Pompadour Display', sans-serif;
    font-size: 20px; /* Schriftgröße anpassen, falls gewünscht */
    text-transform: lowercase; /* Alles klein geschrieben */
    text-align: center; /* Zentriert den Text */
	color: #84645b;
	min-height: 30px; /* Passe die Höhe nach Bedarf an */
	width: 100%; /* Passt sich der Breite der Zelle an */
}

.pg6 {
	font-family: 'georgia', serif; 
	font-size: 25px; 
	letter-spacing: -2px; 
	text-transform: lowercase; 
	text-align: right; 
	padding-right:10px;
	border-bottom: 2px #84645b solid;
    margin-bottom: 3px;
}

.pg7 {
	font-family: 'georgia', serif; 
	font-size: 25px; 
	letter-spacing: -2px; 
	text-transform: lowercase; 
	text-align: right; 
	padding-right:10px;
	border-bottom: 2px #84645b solid;
    margin-bottom: 3px;
	width: 750px;
}

.pg8 {
background-color: #84645b; /* Balkenfarbe */
    color: #e4e4e4; /* Schriftfarbe */
    font-family: 'Fjalla One', sans-serif; /* Schriftart */
    display: inline-block;
    font-size: 13px;
    width: 30%; /* Passt sich der Breite der Zelle an */
    text-align: center; /* Text horizontal mittig */
    line-height: 3; /* Vertikale Ausrichtung des Texts */
	min-height: 30px; /* Passe die Höhe nach Bedarf an */
	letter-spacing: 1px;
}

.profilscroll {
    min-height: 198px;
    max-height: 198px;
	max-width: 350px;
    overflow: auto;
    border: 2px solid #ba7a70;
    padding: 2px;
	text-align: justify;
    margin: 0 auto; /* Horizontale Zentrierung */
}

/* Scrollbar anpassen */
.profilscroll::-webkit-scrollbar {
    width: 8px; /* Breite des Scrollbalkens */
    height: 8px; /* Höhe des horizontalen Scrollbalkens */
}

/* Scrollbalken "Daumen" anpassen (das, was du ziehst) */
.profilscroll::-webkit-scrollbar-thumb {
    background-color: #ba7a70; /* Farbe des Daumens */
    border-radius: 0px; /* Abgerundete Ecken */
	min-height: 30px; /* Mindesthöhe des Daumens (vertikal) */
}

/* Hintergrund des Scrollbalken */
.profilscroll::-webkit-scrollbar-track {
    background: #d1c7b9; /* Hintergrund des Tracks */
    border-radius: 0px; /* Abgerundete Ecken */
}

.profile-info-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.info-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-bar {
    background-color: #ba7a70; /* Balkenfarbe */
    color: white;
    font-family: 'Fjalla One', sans-serif;
    text-align: center;
    font-size: 12px;
    padding: 4px;
    width: 170px; /* Breite der Balken anpassen */
}

.icon-box {
    width: 100px;
    height: 100px;
	    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
	border: 1px solid #ba7a70;
}

.icon-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.useravatar img[alt="ICON"] {
    display: none;
}

.pgavatar-container {
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    border: 2px solid #ba7a70; /* Korrekte Farbnotation */
    width: fit-content;
    margin: auto;
}

.zweitcharaktere {
    width: 600px;
    max-height: 150px;
    overflow-y: auto;
    border: 0px solid #ccc;
    padding: 10px;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.zweitcharaktere img {    
    width: auto;
    height: 75px;
    margin-right: 10px;
}

.zweitcharaktere img:last-child {
    margin-right: 2px;
	margin-bottom: 2px;
}

/* Scrollbar anpassen */
.zweitcharaktere::-webkit-scrollbar {
    width: 8px; /* Breite des Scrollbalkens */
    height: 8px; /* Höhe des horizontalen Scrollbalkens */
}

/* Scrollbalken "Daumen" anpassen (das, was du ziehst) */
.zweitcharaktere::-webkit-scrollbar-thumb {
    background-color: #84645b; /* Farbe des Daumens */
    border-radius: 0px; /* Abgerundete Ecken */
	min-height: 5px; /* Mindesthöhe des Daumens (vertikal) */
}

/* Hintergrund des Scrollbalken */
.zweitcharaktere::-webkit-scrollbar-track {
    background: #d1c7b9; /* Hintergrund des Tracks */
    border-radius: 0px; /* Abgerundete Ecken */
}

.lyrics 
{ 
	font-family: "georgia", serif; 
	font-size: 22px; 
	letter-spacing: -1px; 
	text-transform: lowercase; 
	text-align: center; 
}

.tattooscroll {
    min-height: 130px;
    max-height: 130px;
	min-width: 750px;
	max-width: 750px;
    overflow: auto;
    border-top: 5px solid #84645b;
    padding: 2px;
	text-align: justify;
    margin: 0 auto; /* Horizontale Zentrierung */
}

/* Scrollbar anpassen */
.tattooscroll::-webkit-scrollbar {
    width: 8px; /* Breite des Scrollbalkens */
    height: 8px; /* Höhe des horizontalen Scrollbalkens */
}

/* Scrollbalken "Daumen" anpassen (das, was du ziehst) */
.tattooscroll::-webkit-scrollbar-thumb {
    background-color: #84645b; /* Farbe des Daumens */
    border-radius: 0px; /* Abgerundete Ecken */
	min-height: 30px; /* Mindesthöhe des Daumens (vertikal) */
}

/* Hintergrund des Scrollbalken */
.tattooscroll::-webkit-scrollbar-track {
    background: #d1c7b9; /* Hintergrund des Tracks */
    border-radius: 0px; /* Abgerundete Ecken */
}