@font-face {
    font-family: 'GT America';
    src: url('fonts/GT-America-Standard-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'GT America', Arial, sans-serif; 
    font-size: 4em;
    margin: 20px;
}

.image {
    width: 100%; /* Make the container span the full width */
    display: flex; /* Ensures the content respects the width */
    justify-content: center; /* Centers the image if needed */
}

.image img {
    width: 100%; /* Image spans full width of the container */
    height: auto; /* Maintains the aspect ratio automatically */
}

.button {
    padding: 6px 30px 6px 30px;
    border: solid 1px;
    border-radius: 13px;
    cursor: pointer;
}

.button:hover {
    font-weight: bold;

}

.scroll-button {
    background-color: transparent; /* Transparent background */
    border: none; /* Remove border */
    color: inherit; /* Match surrounding text color */
    font-size: inherit; /* Match text size */
    cursor: pointer; /* Pointer cursor */
    text-decoration: none; /* Optional underline for indication */
}

.scroll-button:hover {
    text-decoration: underline; /* Optional underline for indication */
}

.scroll-button:active {
    text-decoration: none; /* Optional underline for indication */
}

.flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 40px 40px 40px;
}

.xtraSpace-top {
    padding-top: 60px;
}

.imgCaption {
    padding-top: 0px;
}

.calendar-container {
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Arrange children vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    width: 100%; /* Ensure full width for the container */
    /* max-width: 400px; Restrict the maximum width */
    margin: 0 auto; /* Center the container horizontally */
    font-size: 1em;
}

.body.left {
    margin-right: auto; /* Pushes the left element to the start */
    text-align: left;
    cursor: pointer; /* Indicates the element is clickable */
}

.body.right {
    margin-left: 70px;
    text-align: right;
    cursor: pointer; /* Indicates the element is clickable */
}

.body.right:hover {
    text-decoration: underline; /* Underline on hover */
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
}
.day {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}
.event {
    color: blue;
}
#calendar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    width: 100%;
}

#calendar-controls button {
    cursor: pointer;
}

#calendar-controls button:hover {
    background-color: #02d19a;
}

#month-year {
    flex-grow: 1;
    text-align: center;
}

.image video {
    width: 100%; /* Passt das Video an die Breite des Containers an */
    height: auto; /* Bewahrt das Seitenverhältnis */
    object-fit: cover; /* Schneidet das Video zu, damit es den gesamten Container ausfüllt */
    display: block; /* Entfernt unnötigen Platz */
}



/* Media query to halve the font sizes for smaller screens */
@media (max-width: 768px) {
    body {
        font-size: 1.2em; /* Halve the base font size */
    }

    .flex-container {
        padding: 10px 0px 10px 0px;
    }

    .calendar-container {
        font-size: 0.9em; /* Halve the font size of the calendar content */
    }


    .body.right {
        margin-left: 20px;
    }


.button {
    padding: 6px 12px 6px 12px;
}
}

/* Media query specifically for iPads */
@media (min-width: 768px) and (max-width: 1024px) {
    body {
        font-size: 2em; /* Increase font size for iPads */
    }

    .body.right {
        margin-left: 40px;
    }
}

/* Media query specifically for iPads */
@media (min-width: 1524px) {
    .flex-container {
        padding: 40px 180px 40px 180px;
    }
}