/* fonts  */
.quicksand-light {
	font-family: "Quicksand", sans-serif;
	font-weight: 300;
}
.quicksand-regular {
	font-family: "Quicksand", sans-serif;
	font-weight: 400;
}
.quicksand-bold {
	font-family: "Quicksand", sans-serif;
	font-weight: 700;
}

/* body  */
body {
	background: linear-gradient(to bottom, #f2441d, #f2ae2e);
	color: #fff;
	text-align: center;
	/* font-family: "Poppins", sans-serif; */
	font-family: "Quicksand", sans-serif;
	margin: 0;
	padding: 0;
}

/* Hauptcontainer */
.main-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* Der Inhalt bleibt unten, aber nicht über den Spotify-Player */
	height: 100vh; /* Vollständige Höhe des Viewports */
}

/* Inhalt (Logo und Button) */
.content {
	display: flex;
	flex-direction: column;
	justify-content: center; /* Zentriert die Inhalte vertikal */
	align-items: center; /* Zentriert die Inhalte horizontal */
	flex-grow: 1; /* Der Inhalt nimmt den restlichen Platz ein */
	padding-bottom: 152px; /* Verhindert, dass der Button in den Player ragt */
	margin: 0 1rem 0 1rem;
}

/* Logo */
.logo {
	max-width: 100%;
	max-height: 70%; /* Logo verkleinern, wenn der Platz knapp wird */
	width: auto;
	height: auto;
	/* margin-bottom: 20px; */
	transition: transform 0.3s ease; /* Sanfte Animation bei Skalierung */
}

@media (max-height: 500px) {
	.logo {
		transform: scale(0.8); /* Skaliert das Logo auf 80% der ursprünglichen Größe, wenn der Viewport kleiner wird */
	}
}

h1 {
	font-size: 1.8rem;
}
.sprueche {
	font-size: 1rem;
}

/* Spotify Container */
.spotify-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #741412; /* Optional: Hintergrundfarbe für den Player */
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); /* Optional: Schatten für den Player */
	z-index: 10;
}

/* Button */
button#openButton {
	position: relative; /* Button bleibt in Fluss, aber kann z-index nutzen */
	z-index: 10; /* Höher als die Schneeflocken (z-index: 0) */
	background-color: #ff0000; /* Für bessere Sichtbarkeit, optional */
	color: white;
	border: none;
	padding: 20px 30px;
	border-radius: 15px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color 0.3s ease;
	hyphens: auto; /* Aktiviert die Silbentrennung */
	word-wrap: break-word; /* Bricht Wörter, wenn sie den Container überschreiten */
}

button#openButton:hover {
	background-color: #cc0000; /* Hover-Farbe */
}

#effects {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("snow_effect.gif") no-repeat center center;
	background-size: cover;
	z-index: -1;
}

.hidden {
	display: none !important; /* Wichtig, um sicherzustellen, dass keine anderen Regeln das überschreiben */
}

/* // ///////////// // */
/* /// Modal-Stile */
/* // ///////////// // */

#spruchModal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8); /* Dunkler Hintergrund für das Modal */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 15;
}

#spruchModal .modal-content {
	background-color: white;
	/* padding: 20px 0 20px 0; */
	border-radius: 8px;
	max-width: 500px;
	width: 100%;
	text-align: center;
	margin: 0 1rem 0 1rem;
}
*/ .modal-content {
	background: white; /* Weißer Hintergrund für das Modal */
	/* padding: 0 20px 0 20px; */
	border-radius: 10px;
	text-align: center;
	max-width: 500px;
	width: 90%;
	max-height: 80%; /* Maximale Höhe von 80% des Viewports */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin: 0 1rem 0 1rem;
}

.modal-body {
	flex-grow: 1;
	overflow-y: auto; /* Ermöglicht das Scrollen bei zu viel Inhalt */
	max-height: 60vh; /* Maximale Höhe für den Textbereich */
	padding-bottom: 20px; /* Ein wenig Abstand zum Button */
	padding: 20px;
	hyphens: auto; /* Aktiviert die Silbentrennung */
	word-wrap: break-word; /* Bricht Wörter, wenn sie den Container überschreiten */
}

.modal-content p,
#spruchText {
	margin: 0;
}

.modal-content h1,
#spruchText {
	color: #333; /* Dunkle Textfarbe für bessere Lesbarkeit */
	margin: 0;
	padding-bottom: 10px;
}

#closeModal {
	margin: 10px 0 20px 0;
	background-color: #ff0000;
	color: white;
	border: none;
	padding: 20px 30px;
	border-radius: 15px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color 0.3s ease;
}

#closeModal:hover {
	background-color: #cc0000;
}

/* // ///////////// // */
/* // Schneeflocken // */
/* // ///////////// // */

/* Container für die Schneeflocken */
#snowContainer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; /* Kein Blockieren von Klicks */
	overflow: hidden;
	z-index: 0; /* Hinter den Button stellen */
}

/* Styling der Schneeflocken */
.snowflake {
	position: absolute;
	top: -50px; /* Start über dem Bildschirm */
	color: rgba(255, 255, 255, 0.5);
	font-size: 1rem;
	opacity: 0.8;
	pointer-events: none;
	animation: fall linear infinite;
}

/* Schneeflocken-Fall-Animation */
@keyframes fall {
	to {
		transform: translateY(100vh); /* Bis zum unteren Bildschirmrand fallen */
	}
}