html,
body {
    max-width: 100%;
}

body {
    width: 100%;
}

#navigation-bar,
footer,
#section1,
.picture-section,
.text-section,
.text-section-info,
.header {
    width: 100%;
    max-width: 100%;
}

#content-wrapper {
    height: 100vh;
    height: 100dvh;
}

#overlay-top {
    inset: 0;
    width: 100%;
    height: 100%;
}

.info-entry {
    margin-bottom: 0;
}

.info-entry + .info-entry {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

h1,
h2 {
    max-width: 100%;
    font-size: clamp(2.5rem, 10vw, 4.5rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

h3 {
    font-size: clamp(1.5rem, 5.5vw, 2.5rem);
    line-height: 1.15;
}

#section1 > h1,
#section1 > h4 {
    width: min(90%, 52rem);
    text-align: center;
}

#section1 > h4 {
    margin: 0.5rem 0 2rem;
}

.overlay {
    overflow-y: auto;
}

.overlay-content {
    width: min(90%, 32rem);
    margin: auto;
}

.overlay-content a {
    overflow-wrap: anywhere;
}

@media (max-width: 768px), (pointer: coarse) {
    html,
    body {
        height: auto;
        overflow: visible;
    }

    #content-wrapper {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        overflow-x: clip;
        overflow-y: visible;
    }
}

@media (max-width: 768px) {
    #navigation-bar {
        width: 100%;
        height: 88px;
    }

    #nav-contents {
        width: calc(100% - 2rem);
    }

    .overlay-content {
        padding: 6rem 0 2rem;
    }

    .overlay-content a {
        font-size: clamp(1.4rem, 7vw, 2rem);
        line-height: 1.2;
    }

    #section1 {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        padding: 6rem 1rem 2rem;
    }

    .text-section,
    .text-section-info {
        padding-inline: clamp(1rem, 5vw, 2rem);
    }

    .text-section p,
    .text-section-info p,
    .info-entry {
        width: 100%;
        max-width: 50rem;
    }

    .info-entry {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .picture-wrapper:not(.slideshow) {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .picture-wrapper:not(.slideshow) img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}