body, html {
	height: 100%;
	margin: 0;
}


.with-blur-backdrop {
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(5px);
}


.background {
	background: url("../images/formingPlanet.jpeg");
	width: 100vw;
	height: 100vh;
	background-size: cover;
}


.full-page-div-with-flex-content {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 100vw;
	height: 100vh;
	justify-content: space-between;
}


.container-profilePicture-name {
	order: 1;
	flex: 0 0 25%;
	display: flex;
	justify-content: center;
	align-items: stretch;
}


.rounded-corner-box-profilepicture {
	border-radius: 25px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.50);
	transition: box-shadow 0.3s ease;
  
	flex: 0 0 13%;
	margin: 10px;
	background: url("../images/Ich_Dresden.jpg");
	background-size: cover;
	background-repeat: no-repeat;
   background-position: center;
}


.rounded-corner-box-name {
   border-radius: 25px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.50);
   transition: box-shadow 0.3s ease;
   flex: 0 0 65%;
   margin: 10px;
   background: rgba(68, 140, 164, 0.6);
   
	display: flex;
   justify-content: center;
	flex-direction: column;
}


.container-information-about-me {
	order: 2;
	flex: 0 0 55%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}


.rounded-corner-box-with-hover-effect {
	flex: 0 0 28%;
	display: flex;
	flex-direction: column;
	align-items: center;

	border-radius: 25px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.50);
	transition: box-shadow 0.3s ease;
	background: rgba(68, 140, 164, 0.6);
	font-size: 30px;
	color: rgba(255, 255, 255, 1);
}


.rounded-corner-box-with-hover-effect:hover {
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9);
}

.heading {
	width: 85%;
	padding: 2.0rem;
	background-color: rgba(255, 255, 255, 0.0); /* Semi-transparent white */
	text-align: center;
}


.body {
	overflow-y: auto; /* Scroll when content exceeds space */
	width: 85%;
	background-color: rgba(255, 255, 255, 0.0); /* Slightly transparent white */
}


.button-container {
	padding: 1rem;
	cursor: pointer;
	margin-top: 3%;
}


.container-contact-impressum {
	order: 3;
	flex: 0 0 10%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 5%
}

.container-footnote {
	order: 1;
	flex: 0 0 8%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40%;
	cursor: pointer;
}

.container-impressum-text {
	order: 1;
	flex: 0 0 85%;
	width: 80%;
	font-size: 20px;
	margin-top: 5%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.container-align-items {
	align-items: center;
}

.white-color {
	color: white;
}

.big-text1 {
  font-size: 1.2em; /* oder z.B. 24px */
}

.big-text2 {
  font-size: 0.6em; /* oder z.B. 24px */
}


p0 {
	color: white;
	font-size: 20px;
}


p1 {
	color: white;
	font-size: calc(4px + 5vw); 
	text-align: center;	
}


p2 {
	color: white;
	font-size: calc(10px + 1vw);
	text-align: center;
}


p3 {
	color: white;
	font-size: calc(20px + 1vw);
	text-align: center;
}