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

	z-index: 1;

	.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);

		
			
		}
	
		

	.tips {
			position: absolute;
			left: -100%;
			bottom: 2%;
			font-size: 16px;
			color: rgb(255, 255, 255);
			font-family: Geneva;
			font-weight: bold;
			transition: left 1s ease-in-out, opacity 1s ease-in-out;
			opacity: 0;
			background-color: rgba(0, 0, 0, 0.49);
			border-width: 1px;
			border-color: rgba(10, 0, 0, 0.5);
			padding: 10px;
			border-radius: 10px;
	
			&.visible {
				left: 2%;
				opacity: 1;
			}
	
			&.hidden {
				left: -100%;
				opacity: 0;
			}
		}

	.playtime{
		position: absolute;
		right: 2%;
		top: 2%;
		font-size: 16px;
		color: rgb(255, 255, 255);
		font-family: Geneva;
		font-weight: bold;
		
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.49);
		border-width: 1px;
		border-color: rgba(10, 0, 0, 0.5);
		padding: 10px;
		border-radius: 10px;
		
	}

	.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-color: rgba(0, 0, 0, 0.5);
		border-color: rgba(10, 0, 0, 0.5);
		padding: 10px;


		>.clip {
			color: rgb(0, 194, 26);

		}

		


	}
		.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;
									opacity: 1;
									transition: transform 2.05s ease-in-out;
									width: 5px;
									/* Breite des Fadenkreuzes */
									height: 50px;
									/* Höhe des Fadenkreuzes */
									background-color: transparent;
									
								}
				
								.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);
		}
	}



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

	}

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

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


	.vyndalium {
		position: absolute;
		left: 2%;
		bottom: 11%;
		z-index: 1;
		width: 16%;
		height: 3%;
		transition: opacity 1s ease-in-out;
		
	
		background-color: rgba(41, 41, 41, 0.521);
		
		box-shadow: 0 5 20px rgba(0, 0, 0, 0.5);
		padding:5px;
		


		.vyndalium1 {

			position: relative;
			
			width: 100%;
			height: 100%;
			flex-direction: column;
		
			border-width: 1px;
				border-radius: 10px;
				background-color: rgba(253, 253, 253, 0);
				border-color: rgba(255, 255, 255, 0);
				


			.p {
				position: relative;
				color: rgb(255, 209, 84);
				font-size: 20px;
				font-family: Geneval;
				gap: 15px;
				transition: opacity 5.5s ease-in-out;
				opacity: 1;
				
				justify-content: space-between;
				align-items: center;



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


				}

				#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: 16.5%;

		z-index: 0;


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

		.full-hp {
				animation: blink-green 4s;
			}
		
			.low-hp {
				animation: blink-red 4s;
			}
		>.healthbar {
			width: 50%;
			height: 20%;
			bottom: 25px;
			left: 17%;
			background-blend-mode: multiply;
			background-size: 100%;
			 background-position: center; 
			
			
			
			
			border: 2px solid rgba(255, 255, 255, 0.2);

			
			
			
		
			
			

			




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

				>.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: 4%;
			top: 0%;
			color: rgb(0, 0, 0);
			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: 17%;
		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: 13%;
		left: 2%;
		top: 73%;
		background-color: rgba(41, 41, 41, 0.521);
		background-position: center;
		background-size: cover;
		z-index: -100;
		border-radius: 10%;
		border-bottom-left-radius: 0%;
		border-bottom-right-radius: 0%;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
		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: 2%;
					top: 5%;
					height: 45%;
					width: 35%;
					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(0, 0, 0, 0.49);
					border-width: 1px;
					border-color: rgba(10, 0, 0, 0.5);
					padding: 10px;
					border-radius: 10px;
				}
			.rank{
				position: absolute;
				border-radius: 40px;
				opacity: 1;
				background-color: rgb(0, 0, 0);
				justify-content: center;
				align-items: center;
				transform: translate(-50%, -50%);
				font-size: 15px;
				font-family: Geneva;
				left: 12%;
				top: -13%;
			}
			.prestige{
				position: absolute;
				font-weight: bold;
				color:rgb(255, 255, 255);
				text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
				box-shadow: 0 5 20px rgba(0, 0, 0, 0.5);
				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: 5px 5px 5px rgba(0, 0, 0, 0.5);
			
			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;
 	
		
		
 	}
 }