body {
	background-color: #A9BFA3 ;
	clear: both;
	font-family: "Open Sans", sans-serif;
	margin: 0;
	padding: 0;
}

h1 {
  color: #3E5B3A; /* Dunkleres Olivgrün für guten Kontrast */
  font-size: 3.5em;
  font-weight: bold; /* Betont den Text stärker */
  letter-spacing: 2px; /* Setzt ein wenig Abstand zwischen den Buchstaben für einen eleganteren Look */
  padding: 0 .5em;
  text-align: center;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Weicher Schatten für mehr Tiefe */
  text-transform: uppercase; /* Macht die Überschrift noch markanter */
}

@media (max-width: 34.375em /* 550px */ ) {
  h1 {
	font-size: clamp(24px, calc(.5rem + 2vw), 40px);
  }
}

.logo {
  display: flex;
  justify-content: center;  /* Horizontal zentrieren */
  align-items: center;      /* Vertikal zentrieren */
  min-height: 60vh;        /* Minimale Höhe des Containers ist 100% der Bildschirmhöhe */
}

#logo-img {
  max-width: 250px;         /* Maximale Breite auf 250px setzen */
  max-height: 250px;        /* Maximale Höhe auf 250px setzen */
  height: auto;             /* Bild proportional skalieren */
  width: auto;              /* Bild proportional skalieren */
}

.block {
	position: relative;
	margin: 0px auto 0;
	width: 250px;
	height: 250px;
	background: linear-gradient(0deg, #FFCC00, #FF6600); /* Gelb und Orange für den Hintergrund */
}

.block:before, .block:after {
	content: '';
	position: absolute;
	left: -2px;
	top: -2px;
	background: linear-gradient(45deg, #FFCC00, #FF6600, #FF3300, #339966, #FFCC00, 
		#FF6600, #FF3300, #339966, #FFCC00); /* Farben aus dem Logo */
	background-size: 400%;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	z-index: -1;
	animation: steam 20s linear infinite;
}

@keyframes steam {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 400% 0;
	}
	100% {
		background-position: 0 0;
	}
}

.block:after {
	filter: blur(50px);
}