Hud {
	position: absolute;
	width: 100%;
	height: 100%;
	

	z-index: 1;
	.boss-ui {
			position: absolute;
			
			width: 50%;
			height: 50%;
		
			z-index: 1000;
			text-align: center;
			justify-content: center;
			align-items: center;
			left: 25%;
			top: 60%;

			.npc-level{
				left: 22%;
				top: -5%;
				position: relative;
				color: rgb(255, 255, 255);
				text-shadow: 2px 0px 0px #000000;
				bottom: 20px;
				font-size: 20px;
				font-family: Geneva;
				font-weight: 1500;
				transition: opacity 0.5s ease-in-out;
				opacity: 1;
			}
			
			.boss-healthbar-container {
					position: absolute;
					width: 50%;
					height: 40%;
					background-color: rgba(0, 0, 0, 0);
					z-index: 0;
					opacity: 0;
					justify-content: center;
					align-items: center;
					transition: opacity 0.5s ease-in-out;
			
					&.show {
						opacity: 1;
					}
			
					.boss-healthbar {
						position: absolute;
						background-color: rgba(26, 0, 0, 0.521);
						border-right: 1px solid rgb(255, 255, 255);
							border-right-width: -11px;
							border: 4px rgba(0, 0, 0, 0.521);
							border-top-right-radius: -20px -50px;
							border-top-width: 3px;
							border-top-color: rgba(255, 255, 255, 0.219);
							border-bottom-right-radius: 50px;
							border-bottom-width: 1px;
						width: 100%;
						height: 15%;
						
						
						
						background-size: 100%;
						padding: 5px;
			
						.inner {
							flex-grow: 10;
							
							border-right: 1px solid rgb(255, 255, 255);
								border-right-width: -11px;
								
								
								border-top-color: rgba(255, 255, 255, 0.219);
								border-bottom-right-radius: 50px;
							.backbar {
									position: absolute;
									height: 90%;
									background-color: rgba(255, 215, 0, 0.7); // Gelbe Farbe für den Schaden
									transition: width 0.5s ease-in-out; // Animation für die Reduktion
									z-index: 1;
									border-right: 1px solid rgb(255, 255, 255);
										border-right-width: -11px;
										border: 5px rgba(0, 0, 0, 0.521);
										border-top-right-radius: -20px -50px;
										border-top-width: 3px;
										border-top-color: rgba(255, 255, 255, 0.219);
										border-bottom-right-radius: 50px;
										border-bottom-width: 1px;

								}
							
			
							.fill {
								background-color: rgba(136, 4, 4, 0);
								height: 100%;
						
								border-right: 1px solid rgb(255, 255, 255);
								border-right-width: -11px;
								border: 4px rgba(0, 0, 0, 0.521);
								border-top-right-radius: -20px -50px;
								border-top-width: 3px;
								border-top-color: rgba(255, 255, 255, 0.219);
								border-bottom-right-radius: 50px;
								border-bottom-width: 1px;
								transition: width 0.1s ease-in-out;
							}
						}
						
					}
			
					>p {
						left: 0%;
						top: 30%;
						position: absolute;
						color: rgb(255, 255, 255);
						text-shadow: 2px 0px 0px #000000;
						bottom: 20px;
						font-size: 20px;
						font-family: Geneva;
						font-weight: 1500;
						transition: opacity 0.5s ease-in-out;
						opacity: 1;
						flex-direction: column;
					}
				}
		}

	.level-up-panel {
			position: absolute;
			left: 35%;
			top: 5%;
			width: 30%;
			height: 50%;
			justify-content: center;
			transform: scale(0.5);
			align-items: center;
			background-image: url("/ui/textures/levelup.png");
			background-size: cover;
			background-position: center;
			color: white;
			opacity: 0;
			z-index: 1000;
			transition: opacity 3s ease, transform 3s ease;
	
			
	
			.level-up-content {
				.txt {
					position: absolute;
					width: 50%;

					left: 40%;
					top: -6%;
					justify-content: center;
					align-items: center;
					font-size: 90px;
					color: rgb(0, 0, 0);
					font-family: Geneva;
					font-weight: bold;
					background-color: rgb(255, 187, 0);
					border-radius: 10px;
					padding: 10px;
					border-width: 1px;
					border-color: rgba(10, 0, 0, 0.5);
					box-shadow: 0 5 20px rgba(0, 0, 0, 0.5);
					text-shadow: 5px 5px 5px rgb(0, 0, 0);
					opacity: 1;
					transition: opacity 3s ease-in-out;
					border-width: 15px;
					border-color: rgb(10, 0, 0);
				}
			}
		}
	
		.level-up-panel.visible {
			opacity: 1;
		}
	
		.level-up-panel.hidden {
			opacity: 0;
		}
  
	.scene-name {
			position: absolute;
			color: rgb(236, 236, 236);
			font-size: 50px;
			width:20%;
			height: 7%;
			right:40%;
			top: 15%;
			animation: slideAndFade 6s ease-out;
			display: flex;
			font-family: Geneva;
			background-color: rgba(0, 0, 0, 0.815);
			opacity: 0;
			justify-content: center;
			align-items: center;
			border-radius: 20px;
			border-width: 1px;
			border-color: rgb(10, 0, 0);
			padding: 10px;
			transition: opacity 1s ease-in-out;
			font-weight: bold;
			box-shadow: 0 5 20px rgba(0, 0, 0, 0.5);
			text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

		
			
		}
	
		

	



	.ammo {
		position: absolute;
		font-family: Geneva;
		font-size: 32px;
		color: rgb(255, 255, 255);
		right: 5%;
		bottom: 10%;
		z-index: 5;
		transition: opacity 1s ease-in-out;
		border-width: 1px;
		border-radius: 10px;
		background-image: url("ui/textures/blue.jpg");
		border-color: rgba(10, 0, 0, 0.5);
		padding: 10px;
		box-shadow: 5 5 0px rgba(0, 0, 0, 0.918);
		text-shadow: 5px 5px 0px rgb(0, 0, 0);
		opacity: 0.99;
		.ammo-icon{
			position: absolute;
			background-image: url("ui/hud/bullet.png");
			
			background-size: cover;
			width: 64px;
			height: 64px;
			left: -35%;
			top: 0%;

			
		}

		>.clip {
			color: rgb(0, 194, 26);
			text-shadow: 2px 2px 0px rgb(63, 63, 63);

		}

		


	}
		.charge-bar {
			position: absolute;
				width: 10%;
				left: 45%;
				top: 52%;
				height: 0.5%;
				justify-content: center;
				align-items: center;
			background-color: #333;
			border: 1px solid #000;
			position: relative;
			margin-top: 10px;
			.charge-bar-inner {
					height: 100%;
					background-color: #0f0;
					text-align: center;
					color: #fff;
				}
		}
	
		


	.center {
		position: absolute;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
	}

							.crosshair1 {
								position: relative;
								
								transition: all 0.5s ease-in-out;
							
								/* Standardposition für First Person oder weit entfernte Wände */
								&.third-person {
									transform: translate(-50%, -50%) scale(0.8);
							
									&.wall-close {
										transform: translate(-50%, -50%) scale(0.9);
										left: -6%;
									
									}
							
									&.wall-closer {
										transform: translate(-50%, -50%) scale(1.0);
										left: -8%;
										
									}
							
									&.wall-closest {
										position: relative;
										transform: translate(-50%, -50%) scale(1.2);
										left: -10%;
										
									}
								}
							}

								.crosshair1.third-person {
									
									
								}
				
								.crosshair1 .bar {
									position: absolute;
									background-color: rgb(30, 255, 0);
								}
				
								.crosshair1 .bar.vertical {
									width: 2px;
									/* Dicke des vertikalen Balkens */
								}
				
								.crosshair1 .bar.horizontal {
									height: 2px;
									/* Dicke des horizontalen Balkens */
									width: 20px;
									/* Breite des horizontalen Balkens */
								}
				
								.crosshair1 .bar.top {
									height: 8px;
									/* Höhe des oberen Balkens */
									top: 10;
									left: 50%;
									transform: translateX(-50%);
								}
				
								.crosshair1 .bar.bottom {
									height: 8px;
									/* Höhe des unteren Balkens */
									bottom: 10;
									left: 50%;
									transform: translateX(-50%);
								}
				
								.crosshair1 .bar.left {
									height: 2px;
									/* Dicke des horizontalen Balkens */
									width: 8px;
									/* Breite des linken Balkens */
									top: 50%;
									left: 10;
									transform: translateY(-50%);
								}
				
								.crosshair1 .bar.right {
									height: 2px;
									/* Dicke des horizontalen Balkens */
									width: 8px;
									/* Breite des rechten Balkens */
									top: 50%;
									right: 10;
									transform: translateY(-50%);
								}

	&.hitmarker {
		.crosshair1 {
			background-color: red;
			transition: transform 5.05s ease-in-out;
			transform: scale(2);
		}
	}

	.crosshair {
		position: absolute;
		border-radius: 50%;
		background-color: white;
		opacity: 1;
		transition: transform 50.05s ease-in-out;
		width: 4px;
		height: 4px;
	}

	&.hitmarker {
		.crosshair {
			background-color: red;
			transition: transform 5.05s ease-in-out;
			transform: scale(2);
		}
	}

	.crosshair2 {
		position: absolute;
		border-radius: 50%;
		background-color: rgb(255, 0, 0);
		opacity: 1;
		transition: transform 50.05s ease-in-out;
		width: 4px;
		height: 4px;
		left: 41.8%;
		top: 46.1%;


	}

	&.hitmarker {
		.crosshair2 {
			background-color: red;
			transition: transform 5.05s ease-in-out;
			transform: scale(2);
		}
	}

	.Life{
		position: absolute;
		width: 5%;
		height: 5%;
		left: 93%;
		top: 3%;
		color: rgb(255, 255, 255);
		font-size: 48px;
		background-image: url("ui/textures/blue.jpg");
		opacity: 0.99;
		box-shadow: 5 5 0px rgba(0, 0, 0, 0.918);
		padding:5px;
		border-radius: 10px;
		z-index: -1;
		opacity: 1;
		
		align-items: center;
		

		.icon{
			position: relative;
			background-image: url("/ui/textures/heart.png");
			background-size: cover;
			width: 64px;
			height: 64px;
			justify-content: center;
			align-items: center;
			
		}
		
	}

	.expbar {
		position: absolute;
		
		left: 6%;
		bottom: 14.8%;
		
		transition: opacity 1s ease-in-out;
		z-index: 100;

	}

	.expbar-show {
		opacity: 1;
		transition: opacity 1s ease-in-out;
	}

	.expbar-hide {
		opacity: 1;
		transition: opacity 1s ease-in-out;
	}


	.vyndalium {
		position: absolute;
		right: 2%;
		top: 10%;
		z-index: 1;
		width: 12%;
		height: 5%;
		transition: opacity 1s ease-in-out;
		
		justify-content: center;
		background-image: url("ui/textures/blue.jpg");
		opacity: 0.99;
		box-shadow: 5 5 0px rgba(0, 0, 0, 0.918);
		padding:5px;
		border-radius: 10px;
		border-width: 1px;
		border-color: rgba(10, 0, 0, 0.5);
		


		.vyndalium1 {

			position: relative;
			
			width: 100%;
			height: 100%;
			
		
			
				


			.p {
				position: relative;
				color: rgb(255, 187, 0);
				font-size: 25px;
				font-family: Geneval;
				font-weight: bold;
				transition: opacity 0.5s ease-in-out;
				text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
				width: 100%;
				opacity: 1;
				left: 5%;
				
				
				align-items: center;
				background-color: rgba(0, 0, 0, 0);


				



				.icon1 {
					position: relative;
					background-image: url("/ui/hud/vynd.png");
					background-size: cover;
					
					
					
					width: 32px;
					height:32px;


				}
				.number{
					left: 22%;
					position: absolute;
					justify-content: center;
					align-items: center;
				}

				#number {
					animation: changeNumber 0.5s ease-in-out;
					transition: opacity 0.5s ease-in-out;
					opacity: 1;

				}

				@keyframes changeNumber {
					from {
						transform: scale(1);
					}

					to {
						transform: scale(1.5);
					}
				}
			}

		}


	}

	.feed {
		position: absolute;
		left: 12%;
		bottom: 10%;
		width: 100%;
		height: 100%;

	}


	.healthbar {
		position: absolute;
		left: 2.5%;
		width: 22%;
		height: 15%;
		bottom: 14.5%;

		z-index: 0;


		opacity: 1;
		transition: opacity 0.5s ease-in-out;

		.icon-hp{
			position: relative;
			width: 20px;
			height: 20px;
			left: -25%;
			top: 0%;
			background-image: url("/ui/hud/hospital.png");
			
			background-size: cover;
			background-position: center;
			opacity: 1;
			transition: opacity 0.5s ease-in-out;
		}
	

		.full-hp {
				animation: blink-green 4s;
			}
		
			.low-hp {
				animation: blink-red 4s;
			}
		>.healthbar {
			width: 51%;
			height: 20%;
			bottom: 25px;
			left: 16%;
			background-blend-mode: multiply;
			background-size: 100%;
			 background-position: center; 
				box-shadow: 5 5 0px rgba(0, 0, 0, 0.918);
			
			
			
			border: 2px solid rgb(0, 37, 6);

			
			
			
		
			
			

			




			>.inner {
				
				flex-grow: 10;
				background-color:rgba(0, 0, 0, 0.884);
				
				
				

				>.fill {
					
					
					height: 100%;
					
					
					border: 4px rgba(0, 0, 0, 0.589);

					
					border-top-width: 3px;
					border-top-color: rgba(255, 255, 255, 0.233);

					

					transition: width 0.5s ease-out;






				}
			}

		}

		>p {
			position: absolute;
			justify-content: center;
			align-items: center;
			left: 15%;
			top: 0%;
			color: rgb(255, 255, 255);
			font-size: 20px;
			border-radius: 10%;
			font-family: Geneva;
			font-weight: bold;
			transition: opacity 0.5s ease-in-out;
			opacity: 1;
			background-color: rgba(206, 206, 206, 0);
			padding: 0px 5px;
			
		}
	}



	


	.staminabar {
		position: absolute;
		left: 49%;
		bottom: 20%;
		border-radius: 8%;
		transition: opacity 8000ms ease-out;
		transform: translateX(-50%);
		margin: auto;

		&hidden {
			display: none;


		}

		>.staminabar {
			width: 350px;
			height: 16px;
			margin: auto;
			background-color: black;
			padding: 3px;
			border-radius: 8px;
			justify-content: center;



			>.staminainner {
				background-color: black;
				border-radius: 8px;
				display: flex;
				justify-content: space-between;

				>.fill {
					height: 100%;
					background-image: url("/ui/hud/stamina.png");
					background-position: center;
					border-radius: 8px;

					flex-grow: 1;
					margin: 0 3px;

					.hidden {
						display: none;
					}
				}
			}
		}
	}
	.hud-container{
		position: absolute;
		width: 16%;
		height: 15%;
		left: 2%;
		top: 73%;
		background-image: url("ui/textures/blue.jpg");
		opacity: 0.99;
		
		background-position: center;
		background-size: cover;
		z-index: -100;
		border-radius: 10%;
		border-bottom-left-radius: 0%;
		border-bottom-right-radius: 0%;
		box-shadow: 5 5 0px rgb(0, 0, 0);
		transition: opacity 1s ease-in-out;
	
		
		
	
		flex-direction: column;

		
		
		.about{
			
			width: 100%;
			.avatar {
					border-width: 1px;
						border-color: rgb(10, 0, 0);
						width: 60px;
						height: 60px;
						margin-left: 10px;
						margin-top: 10px;

						background-position: center;

						background-size: cover;
						border-radius: 100px;
						opacity: 1;
				}
			
			.a {	
					position: relative;
					left: 4%;
					top: 40%;
					height: 45%;
					width: 70%;
					justify-content: center;
					align-items: center;
					font-size: 20px;
					color: rgb(255, 255, 255);
					font-family: Geneva;
					font-weight: bold;
					transition: opacity 0.5s ease-in-out;
					
					align-items: center;
					background-color: rgba(131, 1, 1, 0.034);
					box-shadow: 5px 5px rgb(0, 0, 0);
					border-width: 1px;
					border-color: rgb(10, 0, 0);
					
					
				}
			.rank{
				position: absolute;
				
				opacity: 1;
				background-color: rgba(0, 0, 0, 0);
				width: 100%;
				justify-content: center;
				align-items: center;
				
				font-size: 15px;
				
				font-family: Geneva;
				
			}
			.prestige{
				position: absolute;
				font-weight: bold;
				color:rgb(255, 255, 255);
				text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
				box-shadow: 5px 5px rgb(0, 0, 0);
				border-radius: 40px;
				opacity: 1;
				
				background-color: rgb(0, 0, 0);
				justify-content: center;
				align-items: center;
				transform: translate(-50%, -50%);
				font-size: 16px;
				
				font-family: Geneva;
				left: 7%;
				top: 90%;
			}
		}
		
		.b{
			position: absolute;
			transform: translate(-50%, -50%);
			left: 12%;
			bottom: 21%;
			font-size: 16px;
			
			color: rgb(255, 255, 255);
			text-shadow: 2px 2px 0px rgb(0, 0, 0);
			box-shadow: 5px 5px rgb(0, 0, 0);
			background-color: rgba(0, 157, 255, 0.908);
			border-radius: 4px;
			padding: 3px;
			height: 20%;
		
			font-family: Geneva;
			font-weight: bold;
			transition: opacity 0.5s ease-in-out;
			border-width: 1px;
		}
	}
}
@keyframes blink-green {
	0% {
		background-color: green;
	}

	50% {
		background-color: lightgreen;
	}

	100% {
		background-color: green;
	}
}

@keyframes blink-red {
	0% {
		background-color: red;
	}

	50% {
		background-color: darkred;
	}

	100% {
		background-color: red;
	}
}
 @keyframes slideAndFade {
 	0% {
 		opacity: 0;
 		transform: translateX(-100%);
 	}

 	40% {
 		opacity: 1;
 		transform: translateX(0%);
 	}

 	60% {
 		opacity: 1;
 		transform: translateX(0%);
		
 	}

 	100% {
 		transform: translateX(100%);
		opacity: 0;
 	
		
		
 	}
 }