html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	/* Platziert den Inhalt oben und unten */
	background-color: #131313;
	font-family: "Inter", sans-serif;
	overflow: hidden;
}

.glow-box {
	--border-size: 8px;
	--border-angle: 0turn;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: conic-gradient(from var(--border-angle),
			#131313,
			#131313 50%,
			#131313),
		conic-gradient(from var(--border-angle),
			transparent 20%,
			#00FFD1,
			transparent);
	background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)),
		cover;
	background-position: center center;
	background-repeat: no-repeat;
	animation: 8s linear infinite bg-spin;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes bg-spin {
	to {
		--border-angle: 1turn;
	}
}

@property --border-angle {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0turn;
}


.logo-container {
	width: 40%;
	max-width: 350px;
	min-width: 150px;
	/* Legt eine Mindestbreite für das Logo fest */
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-container img {
	width: 100%;
	height: auto;
	max-width: 100%;
	/* Verhindert, dass das Logo größer als sein Container wird */
}