@font-face {
  font-family: "perso";
  src: url('SCRIPTIN.ttf');
}

@font-face {
  font-family: "choco";
  src: url('Painting_With_Chocolate.ttf');
}

body {
    margin: 0;
    font-family: 'arial';
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Sicherstellen, dass der Body die volle Höhe einnimmt */

}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 10px 20px;
    flex-wrap: wrap; /* Ermöglicht das Umfließen der Elemente */
}
.menu-button {
    cursor: pointer;
    background-color: #444;
    border: none;
    color: white;
    padding: 10px;
    border-radius: 5px;
}
nav {
    display: none;
    position: absolute;
    background-color: #444;
    left: 20px;
    top: 60px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
nav a {
    display: block;
    padding: 10px;
    color: white;
    text-decoration: none;
}
nav a:hover {
    background-color: #555;
}

h1 {
    font-family: 'choco';
    flex-grow: 1;
    text-align: center;
    margin: 0;
    padding: 10px 0; /* Abstand oben und unten */
    color:white;
}

h2 {
    font-family:'perso';
}

a:link {
    color:inherit;
    text-decoration: none;
}

a:visited {
    color:inherit;
    text-decoration: none;
}

.social-media {
    display: flex;
    gap: 10px;
}
.social-media img {
    width: 20px;
    height: 20px;

}

.flag{
width:20px;
height:20px;
margin: 10px;
}

.container {
    display: flex;
    flex-direction: column;
    flex: 1; /* Container nimmt den verbleibenden Platz ein */
    align-items: center;
    padding: 0px;
}
.content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px; /* Maximale Breite für die drei Divs */
    margin: 20px; /* Abstand zwischen den Inhalt und der Linie */
}
.box {
    flex: 1;
    margin: 10px;
    padding: 20px;
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    height: 60vh;
    border-radius: 5px;
    text-align: center;
    opacity: 0; /* Starten mit unsichtbar */
    transition: opacity 0.5s ease; /* Übergang für die Sichtbarkeit */
}

.autre {
    flex: 1;
    overflow: auto; /* Ermöglicht das Scrollen, wenn der Inhalt zu lang ist */
    margin: 10px;
    padding: 20px;
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    height: 80vh;;
    border-radius: 5px;
    text-align: center;
    opacity: 0; /* Starten mit unsichtbar */
    transition: opacity 0.5s ease; /* Übergang für die Sichtbarkeit */
}

.autre2 {
    flex: 1;
    margin: 10px;
    padding: 20px;
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 5px;

}

.paypal{
    width:25vw;
    height:25vw;
    max-height:250px;
    max-width:250px;
    border-radius: 5px;
}

.ticket{
    width:25vw;
    max-width:250px;	
}

.line {
    width: 100%;
    height: 2px;
    background-color: #333;
}
.sponsor-box {
    width: 100%; /* Vollständige Breite */
    padding: 5px; /* Weniger Polsterung für kleinere Höhe */
    background-color: #f4f4f4; /* Helle Hintergrundfarbe */
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    margin: 20px 0px 20px 0px; /* Abstand nach der Linie */
    font-size: 14px; /* Kleinere Schriftgröße */
    opacity: 0; /* Starten mit unsichtbar */
    transition: opacity 0.5s ease; /* Übergang für die Sichtbarkeit */
}
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 0px 0;
    margin-top: 0px; /* Abstand zum vorherigen Inhalt */
    width: 100%;
}
footer a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}
footer a:hover {
    text-decoration: underline;
}

.image-text {
display: flex;
align-items: flex-start; /* Align items at the start vertically */
}
.image-text img {
width: 150px; /* Set a fixed width for the image */
height: auto; /* Maintain aspect ratio */
margin: 0px 20px 0px 20px; /* Space between image and text */
border-radius: 10px;
}

.description {
margin: 20px 0;
}

#crowdfund{
text-align: start;
}

.donate{
margin= auto;
text-align: center;
}

.donate-button {
	    margin: 50 px;            
	    background-color: #2196F3; /* Blue color */
            color: white; /* Text color */
            padding: 15px 30px; /* Top and bottom padding, left and right padding */
            border: 10px darkblue; /* No border */
            border-radius: 35px; /* Rounded corners */
            font-size: 35px; /* Font size */
            cursor: pointer; /* Change cursor to pointer on hover */
            text-align: center; /* Center text */
            text-decoration: none; /* Remove underline from links */
            transition: background-color 0.3s; /* Smooth transition for hover effect */
        }
.donate-button:hover {
            background-color: #1976D2; /* Darker blue on hover */
        }

.donate-button a:link {
    color:white;
    text-decoration: none;
}

.autre3{
    flex:1;
    margin: 10px;
    padding: 40px 15px 0px 15px;
    text-align:center;
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Responsive Styles */
@media (max-width: 600px) {
    header {
        flex-direction: column; /* Elemente untereinander anordnen */
        align-items: center; /* Zentriert die Elemente */
        text-align: center; /* Zentriert den Text */
    }
    .menu-button {
        margin-bottom: 10px; /* Abstand zwischen Button und Titel */
    }
    .social-media {
        margin-top: 10px; /* Abstand zwischen Titel und sozialen Medien */
    }
    .content {
        flex-direction: column; /* Inhalte untereinander bei kleinen Bildschirmen */
        align-items: center;
    }
    .box {
        width: 100%; /* Boxen nehmen die volle Breite ein */
        margin: 5px 0; /* Abstand zwischen den Boxen */
    }
    .paypal{
        width:90vw;
        height:90vw;
        max-height:250px;
        max-width:250px;
        border-radius: 5 px;
    }

    .ticket{
        width:90vw;
        max-width:250px;	
    }

.flag{
width:20px;
height:20px;
margin-left: 10px;
}

}