/* style.css */

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #000; /* Schwarzer Hintergrund */
    color: #fff;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Verhindert Scrollen wegen der Schneeflocken */
	background-image: url('Background.png'); /* Pfad zu Ihrem Bild */
	background-repeat: repeat; /* Wiederholung des Bildes für endlosen Effekt */
	background-size: 50%; /* Stellt sicher, dass der Hintergrund den gesamten Bildschirm bedeckt */
}

/* Header-Bereich für das GIF */
#header {
    text-align: center; /* Zentriert das GIF horizontal */
    margin-bottom: 1px; /* Abstand zwischen dem GIF und dem Text */
}

#header img {
    max-width: 30%; /* Begrenzte Breite des GIFs */
    height: auto; /* Beibehaltung der Proportionen */
    display: inline-block; /* Stellt sicher, dass das GIF als Block dargestellt wird */
}

/* Schneeflocken-Styling */
.snowflake {
    color: #fff;
    font-size: 1em;
    position: fixed;
    top: -10%;
    z-index: 9999;
    user-select: none;
    animation-name: fall;
    animation-duration: 10s; /* Standarddauer für die Animation */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Keyframes für die fallende Schneeflocken-Animation */
@keyframes fall {
    to {
        transform: translateY(100vh);
    }
}

/* Schriftstil */
#greeting {
    font-family: 'Great Vibes', cursive; /* Name der Schönschrift */
    color: #fff;
    text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7), /* Weißer Schatten für den "Vereist"-Effekt */
                0px 0px 10px rgba(0, 174, 255, 0.7), /* Blauer Schatten für zusätzlichen Glanz */
				2px 2px 10px rgba(0, 0, 0, 1); /* Dunkler Schatten für besseren Kontrast */
	background-color: rgba(128, 128, 128, 0.5); /* Grauer Hintergrund mit 50% Transparenz */
	padding: 10px; /* Abstand des Textes zum Hintergrund */
	border-radius: 40px; /* Abgerundete Ecken */
	max-width: 850px; /* Begrenzung der Breite des Hintergrundes */
	margin: 0 auto; /* Zentriert den Hintergrund innerhalb seines Containers */
    font-size: 4em;
    margin-top: 20px;
}

/* Media Query für mittelgroße Bildschirme (z.B. Tablets) */
@media screen and (max-width: 1200px) {
    #greeting {
        font-size: 3em; /* Etwas kleinere Schriftgröße */
		max-width: 650px; /* Begrenzung der Breite des Hintergrundes */
    }
	#header img {
    max-width: 35%; /* Begrenzte Breite des GIFs */
    height: auto; /* Beibehaltung der Proportionen */
    display: inline-block; /* Stellt sicher, dass das GIF als Block dargestellt wird */
	}
}

/* Media Query für kleine Bildschirme (z.B. Smartphones) */
@media screen and (max-width: 600px) {
    #greeting {
        font-size: 2em; /* Noch kleinere Schriftgröße */
		max-width: 425px; /* Begrenzung der Breite des Hintergrundes */
    }
	#header img {
    max-width: 80%; /* Begrenzte Breite des GIFs */
    height: auto; /* Beibehaltung der Proportionen */
    display: inline-block; /* Stellt sicher, dass das GIF als Block dargestellt wird */
	}
}