body {
            font-family: Helvetica, sans-serif;
			font-size: 100%;
			margin: 0px;
        }
		
		.content {
			margin: 15px;
			margin-top: 25px;
		}
		
/* Stil für den farbigen Balken */
.top-bar {
    background-color: #aaa; /* Blaue Farbe für den Balken */
    padding: 0px;
	margin: 0px;
    display: flex;
    justify-content: space-between; /* Elemente links und rechts platzieren */
    align-items: center; /* Vertikale Zentrierung */
	box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
	font-size: 0.8em;
}

span.title1
{
	font-size: 1.5em;
	font-weight: bold;
	font-style: italic;
}
span.title2
{
	font-size: 0.8em;
	font-weight: bold;
	font-style: italic;
}

/* Stil für den linken und rechten Bereich */
.left-content a {
    color: white; /* Weißer Text */
    text-decoration: none;
    margin-left: 25px; /* Abstand zwischen Links */
}

/* Stil für die rechte Seite */
.right-content a {
    margin-right: 0px;
}

div.usercircle
{
	background-color:white; /*hintergrundfarbe*/
	width: 35px; 	/*breite*/
	height: 35px;	/*höhe*/
	margin-right: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 50%;  /*Abgerundete Ecken, in diesem Beispiel tun die 50% ein Kreis darstellen*/
	display:flex;
	justify-content: center;
	align-items:center;
	text-align: center;   /*der Text wird zentriert*/
	border: 0px;
}

div.usercircle a
{
	font-weight: bold;
	color:#555;
}

#profileoverlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}


#profilewindow {
  position: absolute;
  top: 45px;
  right: 0px;
  width: 250px;
  height: 180px;
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
            break-inside: avoid;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				/*box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;*/

            box-sizing: border-box;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 0px;
            background-color: #f9f9f9;
}


div.profilename {
			font-size: 1.1em;
			font-weight: bold;
			margin-top: 25px;
			margin-bottom: -10px;
}

div.profilemail {
			font-size: 0.7em;
			margin-bottom: 40px;
}

div.profilelink {
			font-size: 0.8em;
			text-decoration: underline;
			margin-bottom: -7px;
}

		h1 {
			font-size: 1.5em;
			font-weight: bold;
		}
		
		h2 {
			font-size: 0.9em;
			font-weight: bold;
			margin-top: 0px;
		}
		
		p {
			font-size: 0.8em;
		}
		
		a {
			text-decoration: none;
			color: black;
		}

        .container {
            column-count: 1;
            column-gap: 16px;
        }

        .textbox {
            break-inside: avoid;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f9f9f9;
            margin-bottom: 15px;
        }

        @media (min-width: 600px) {
            .container {
                column-count: 2; /* 2 Spalten bei breiteren Bildschirmen */
            }
        }

        @media (min-width: 900px) {
            .container {
                column-count: 3; /* 3 Spalten bei noch breiteren Bildschirmen */
            }
        }

        @media (min-width: 1200px) {
            .container {
                column-count: 4; /* 4 Spalten bei noch breiteren Bildschirmen */
            }
        }

        @media (min-width: 1500px) {
            .container {
                column-count: 5; /* 5 Spalten bei noch breiteren Bildschirmen */
            }
        }