body{
	font-family: "Alte Haas Grotesk", serif;
	background-color: #f5f5f5;
	font-size: 5.5vh;
	justify-content: left;
	text-align: left;
	font-weight: 700;
	color: red ;
	margin: 5vh;
	margin-left: 5vh;
	line-height: 100%;
	z-index: 1;
}

html {
	scroll-behavior: smooth;
}
sup {
	font-size: 3vh;
	line-height: 1.1;
}

.footer {
	font-size: 20vh;
	color: grey;
	position: fixed;
	bottom: 0px;
	text-align: left;
	filter: blur(10px);
	z-index: 0;
	width: 100%;
	opacity: 100%;
}

.footer:hover {
	filter: blur(0px);
	transition: filter 0.2s ease;
}

.box {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 11vh;
	height: 10vh;
	font-size: 20px;
	color: black;
}

.box:hover {
background-color: red;
color:  #f5f5f5;
height: 100vh;
transition: all 2s ease;
transition: background-color 1s ease;
transition: height 0.5s ease;
cursor: crosshair;
}


/* STYLE CURSER---------------------------------------------- */

#circle {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: red;
	border-radius: 50%;
	pointer-events: none;
}
.small-circle {
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: red;
	border-radius: 50%;
	pointer-events: none;
}

/* STYLE CURSER END ------------------------------------------ */


/* LINK HOVER EFFEKT ------------------------------------------ */

.hover-link {
    text-decoration: none; /* Standard-Unterstreichung entfernen */
    color: red; /* Textfarbe */
    position: relative; /* Für das Pseudo-Element */
		cursor: crosshair;
		z-index: 10;
}

/* Pseudo-Element für den Strich */
.hover-link::after {
    content: ''; /* Fügt eine Linie hinzu */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0; /* Startbreite */
    height: 6px; /* Dicke des Strichs */
    background-color: red; /* Farbe des Strichs */
    transition: width 0.3s ease; /* Animiert die Breite */
    pointer-events: none;
		cursor: crosshair;
		z-index: 10;
}

/* Hover-Effekt */
.hover-link:hover::after {
    width: 100%; /* Der Strich breitet sich vollständig aus */
    pointer-events: none;
		cursor: crosshair;
		z-index: 10;
}


/* LINK HOVER END ------------------------------------------ */



/* LINK BILD HOOVER  ------------------------------------------ */

.link-with-image {

        }

        .hover-image {
            display: none;
						width: 400px;
						height: 400px;
            position: fixed; /* Bild wird vom normalen Fluss getrennt */
						top: 10%;
						left: 50%;
            z-index: 1000; /* Über allen anderen Elementen */
						opacity: 80%;
        }

        .link-with-image:hover .hover-image {
            display: flex;
        }


	.hover-image-1 {
						display: none;
						width: 400px;
						height: 400px;
						position: fixed; /* Bild wird vom normalen Fluss getrennt */
						top: 10%;
						left: 10%;
						z-index: 1000; /* Über allen anderen Elementen */

						opacity: 80%;
				}

				.link-with-image:hover .hover-image-1 {
            display: flex;
        }


/* LINK BILD HOOVER  END ------------------------------------------ */



/* WHITESPACE ------------------------------------------ */

.white {
	height:50vh;
	background-color: #f5f5f5;
}

#flash {
					 position: fixed;
					 top: 0;
					 left: 0;
					 width: 100vw;
					 height: 100vh;
					 background-color: red;
					 z-index: 9999;
			 }

.gradient-overlay {
					 position: fixed;
					 bottom: 0px;
					 left: 0;
					 width: 100vw;
					 height: 25vh; /* 20% der Höhe des Bildschirms */
					 background: linear-gradient(to top, #f5f5f5 20px, rgba(245, 245, 245, 0) 100%);
					 pointer-events: none; /* sorgt dafür, dass es keine Interaktionen blockiert */
					 z-index: 100;
			 }

/* WHITESPACE END ------------------------------------------ */

/*ADD ------------------------------------------ */

.circle {
		position: absolute;
		width: 50px;
		height: 50px;
		background-color: red;
		border-radius: 50%;
		bottom: 20px;
		right: 20px;
		cursor: crosshair;
		z-index: 1000;
		color: #f5f5f5;
		align-content: center;
		text-align: center;
}

.circle:hover {
	width: 60px;
	height: 60px;
	transition: all 0.2s ease;
	color: #f5f5f5;
	text-align: center;

}

@keyframes shoot {
		0% {
				transform: translate(0, 0) scale(1);
				opacity: 1;
		}
		100% {
				transform: translate(var(--dx), var(--dy)) scale(0.5);
				opacity: 0;
		}
}

.particle {
		position: absolute;
		width: 10px;
		height: 10px;
		background-color: red;
		border-radius: 50%;
		animation: shoot 0.6s ease-out forwards;
}

/*ADD END ------------------------------------------ */

/* LINKLISTE ------------------------------------------ */
.lister {
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;


}

.fade-in-link {
    opacity: 0; /* Startwert: Unsichtbar */
    transform: translateY(10px); /* Leichte Verschiebung nach unten */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Animationsdauer und -art */
}

.fade-in-link.visible {
    opacity: 1; /* Sichtbar */
    transform: translateY(0); /* Zurück auf die ursprüngliche Position */
}

.link-list {
	line-height: 6vh;
	display: inline-block;
}

.hover-image-list {
	  opacity: 0%;
		width: 400px;
		height: 400px;
		position: fixed; /* Bild wird vom normalen Fluss getrennt */
		top: 10%;
		left: 50%;
		z-index: 1000; /* Über allen anderen Elementen */
}

.link-list:hover .hover-image-list {
		opacity: 0%;
}


/* LINKLISTE ENDE ------------------------------------------ */

	.headliner {
	animation: colorChange 3s ease infite;
	}

.inline {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

}

/* BUTTON*/


#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 9999; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: transparent; /* Set a background color */
  color: red; /* Text color */
  cursor: crosshair; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 0px; /* Rounded corners */
  font-size: 3.5vh; /* Increase font size */
	text-shadow: 0px 0px red;
}

#myBtn:hover {
  background-color: transparent; /* Add a dark-grey background on hover */
	color: #f5f5f5
	text-shadow: 2px 2px red;
}



	/*MEDIA QUARY */

	@media only screen and (max-width: 600px) {
	  body {
			font-size: 3.5vh;
			justify-content: left;
			text-align: left;
			font-weight: 700;
			color: red ;
			margin: 5vh;
			margin-left: 5vh;
			line-height: 100%;
	  }

		.white {
			height:30vh;
			background-color: #f5f5f5;
			z-index: 9999;
		}

		.footer {
			font-size: 1vh;
			color: black;
			position: fixed;
			bottom: 0px;
			text-align: left;
			filter: blur(3px);
			z-index: 100;
			width: 100%;
			overflow: hidden;
			opacity: 0%;
		}

		.link-list {
			line-height: 5vh;
			display: inline-block;
		}

		sup {
			font-size: 2vh;
			line-height: 1.1;
		}

		#myBtn {
			opacity: 0%;
		}

	}