/* Main Nav Section */
#main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 20px);
    padding: 0px 10px 0px 10px;
    background-color: whitesmoke;
    position: fixed;
    top: 0;
    z-index: 2;
}
#main-nav h2 {
    cursor: pointer;
    font-family: "Merienda", cursive;
    font-size: 30px;
    margin: 5px;
}

/* Header Section */
header picture {
    width: 300px;
    height: 400px;
    margin: 10px;
    visibility: hidden;
}
header img {
    width: 300px;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

/* Intro Section */
#intro-section h2 {
    font-family: 'Times New Roman', Times, serif;
}
#intro-section p {
    font-size: 20px;
}

/* Nyendo Section */
#nyendo-section h3 {
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
}
#nyendo-image-container picture {
    flex: 0 0 100%; 
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0;
    overflow: hidden;
}
#nyendo-image-container img {
    object-fit: cover;
    object-position: center;
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0;
}
#nyendo-section p {
    font-family: 'Cagliostro', sans-serif;
    margin: 10px;
}
#nyendo-section a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

/* Oseki Section */
#oseki-section h3 {
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
}
#oseki-image-container picture {
    flex: 0 0 100%; 
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0;
    overflow: hidden;
}
#oseki-image-container img {
    object-fit: cover;
    object-position: center;
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0;
}
#oseki-section p {
    font-family: 'Cagliostro', sans-serif;
    margin: 10px;
}
#oseki-section a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

/* Title */
.title {
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
}

/* Book Section */
#book-section h2 {
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
    font-size: 20px;
    text-align: center;
}
#book-section p {
    font-family: 'Cagliostro', sans-serif;
    margin: 10px 0px 0px 10px;
}
#book-section a {
    text-decoration: none;
    font-weight: bold;
    color: black;
}
#book-section img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Learning Section */
#learning-section h2 {
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
    font-size: 20px;
    text-align: center;
}
#learning-section p {
    font-family: 'Cagliostro', sans-serif;
    margin: 10px;
}
#learning-section img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Retreat Section */
#retreat-section h2 {
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
    font-size: 20px;
    text-align: center;
}
#retreat-section p {
    font-family: 'Cagliostro', sans-serif;
    margin: 10px;
}
#retreat-section img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* NGO Section */
#ngo-section h2 {
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
    font-size: 20px;
    text-align: center;
}
#ngo-section p {
    font-family: 'Cagliostro', sans-serif;
    margin: 10px;
}
#ngo-section img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Travel Section */
#travel-section h2 {
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
    font-size: 20px;
    text-align: center;
}
#travel-section p {
    font-family: 'Cagliostro', sans-serif;
    margin: 10px;
}
#travel-section img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Competence Section */
#competence-section p {
    font-family: 'Cagliostro', sans-serif;
    margin: 10px;
}
#competence-section img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#competence-section b {
    cursor: pointer;
    margin: 0px 0px 0px 10px;
    font-family: 'Cagliostro', sans-serif;
}

/* Proverbs Section */
#proverbs-section picture {
    width: 300px;
    height: 225px;
    margin: 10px;
    visibility: hidden;
}
#proverbs-section img {
    width: 300px;
    height: 225px;
    object-fit: cover;
    object-position: center;
}

/* Small screens (Mobile) */
@media only screen and (max-width: 600px) {
    /* Header Section */
    header {
        display: flex;
        flex-direction: row;
        overflow-x: auto; 
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        margin-top: 70px;
    }

    /* Intro Section */
    #intro-section {
        font-family: 'Cagliostro', sans-serif;
        text-align: center;
        padding: 10px;
        width: 90%;
        margin: 10px auto 0px auto;
        visibility: hidden;
    }

    /* Nyendo Section */
    #nyendo-section {
        display: flex;
        flex-flow: row wrap;
        margin-bottom: 10%;
    }
    #nyendo-image-container { 
        width: 100%;
        height: 400px;
        margin: 0; 
        padding: 0;
        display: flex;
        scroll-snap-type: x mandatory; 
        overflow-x: scroll;
        scrollbar-width: none;
        order: 1;
        visibility: hidden;
    }
    #nyendo-section article {
        width: 100%;
        background-color: #FFFFF3E0;
        text-align: center;
        padding: 10px;
        order: 2;
        visibility: hidden;
    }

    /* Oseki Section */
    #oseki-section {
        display: flex;
        flex-flow: row wrap;
        margin-bottom: 10%;
    }
    #oseki-image-container { 
        width: 100%;
        height: 400px;
        margin: 0; 
        padding: 0;
        display: flex;
        scroll-snap-type: x mandatory; 
        overflow-x: scroll;
        scrollbar-width: none;
        visibility: hidden;
    }
    #oseki-section article {
        width: 100%;
        background-color: #FFFFF3E0;
        text-align: center;
        padding: 10px;
        visibility: hidden;
    }

    /* Book Section */
    #book-section {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        width: 90%;
    }
    #book-section article {
        width: calc(100% - 40px);
        background-color: #FFFFF3E0;
        margin-bottom: 20px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        order: 2;
        visibility: hidden;
    }
    #book-section picture {
        width: 190px; 
        height: 301px;
        margin: 20px auto 0px auto;
        order: 1;
        visibility: hidden;
    }

    /* Learning Section */
    #learning-section {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        width: 90%;
    }
    #learning-section article {
        width: calc(100% - 40px);
        background-color: #FFFFF3E0;
        margin-bottom: 20px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        visibility: hidden;
    }
    #learning-section picture {
        width: 100%; 
        height: 250px;
        margin-top: 20px;
        visibility: hidden;
    }

    /* Retreat Section */
    #retreat-section {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        width: 90%;
    }
    #retreat-section article {
        width: calc(100% - 40px);
        background-color: #FFFFF3E0;
        margin-bottom: 20px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        order: 2;
        visibility: hidden;
    }
    #retreat-section picture {
        width: 100%; 
        height: 250px;
        margin-top: 20px;
        order: 1;
        visibility: hidden;
    }

    /* Ngo Section */
    #ngo-section {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        width: 90%;
    }
    #ngo-section article {
        width: calc(100% - 40px);
        background-color: #FFFFF3E0;
        margin-bottom: 20px;
        padding: 20px;
        display: flex;
        flex-direction: column;
    }
    #ngo-section picture {
        width: 100%; 
        height: 250px;
        margin-top: 20px;
    }

    /* Travel Section */
    #travel-section {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        width: 90%;
    }
    #travel-section article {
        width: calc(100% - 40px);
        background-color: #FFFFF3E0;
        margin-bottom: 20px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        order: 2;
        visibility: hidden;
    }
    #travel-section picture {
        width: 100%; 
        height: 250px;
        margin-top: 20px;
        order: 1;
        visibility: hidden;
    }

    /* Competence Section */
    #competence-section {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        width: 90%;
    }
    #competence-section article {
        width: calc(100% - 40px);
        background-color: #FFFFF3E0;
        margin-bottom: 20px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        visibility: hidden;
    }
    #competence-section picture {
        width: 100%; 
        height: 250px;
        margin-top: 20px;
        visibility: hidden;
    }

    /* Proverbs Section */
    #proverbs-section {
        display: flex;
        flex-direction: row;
        overflow-x: auto; 
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        margin: 3% 0px 3% 0px;
    }
}

/* Medium screens (Tablets) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    /* Header Section */
    header {
        display: flex;
        flex-direction: row;
        overflow-x: auto; 
        overflow-y: hidden;
        scrollbar-width: thin;
        margin-top: 70px;
    }

    /* Intro Section */
    #intro-section {
        font-family: 'Cagliostro', sans-serif;
        text-align: center;
        padding: 10px;
        width: 60%;
        margin: 10px auto 0px auto;
        visibility: hidden;
    }

    /* Nyendo Section */
    #nyendo-section {
        display: flex;
        flex-flow: row wrap;
        margin-bottom: 5%;
    }
    #nyendo-image-container { 
        width: 100%;
        height: 450px;
        margin: 0; 
        padding: 0;
        display: flex;
        scroll-snap-type: x mandatory; 
        overflow-x: scroll;
        scrollbar-width: none;
        order: 1;
        visibility: hidden;
    }
    #nyendo-section article {
        width: 100%;
        background-color: #FFFFF3E0;
        text-align: center;
        padding: 20px 15% 20px 15%;
        order: 2;
        visibility: hidden;
    }

    /* Oseki Section */
    #oseki-section {
        display: flex;
        flex-flow: row wrap;
        margin-bottom: 5%;
    }
    #oseki-image-container { 
        width: 100%;
        height: 450px;
        margin: 0; 
        padding: 0;
        display: flex;
        scroll-snap-type: x mandatory; 
        overflow-x: scroll;
        scrollbar-width: none;
        visibility: hidden;
    }
    #oseki-section article {
        width: 100%;
        background-color: #FFFFF3E0;
        text-align: center;
        padding: 20px 15% 20px 15%;
        visibility: hidden;
    }

    /* Book Section */
    #book-section {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        width: 550px;
    }
    #book-section article {
        width: calc(100% - 40px);
        background-color: #FFFFF3E0;
        margin-bottom: 30px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        order: 2;
        visibility: hidden;
    }
    #book-section picture {
        width: 190px; 
        height: 301px;
        margin: 30px auto 0px auto;
        order: 1;
        visibility: hidden;
    }

    /* Learning Section */
    #learning-section {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        width: 550px;
    }
    #learning-section article {
        width: calc(100% - 40px);
        background-color: #FFFFF3E0;
        margin-bottom: 30px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        visibility: hidden;
    }
    #learning-section picture {
        width: 550px; 
        height: 350px;
        margin-top: 30px;
        visibility: hidden;
    }

    /* Retreat Section */
    #retreat-section {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        width: 550px;
    }
    #retreat-section article {
        width: calc(100% - 40px);
        background-color: #FFFFF3E0;
        margin-bottom: 30px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        order: 2;
        visibility: hidden;
    }
    #retreat-section picture {
        width: 550px; 
        height: 350px;
        margin-top: 30px;
        order: 1;
        visibility: hidden;
    }

    /* Ngo Section */
    #ngo-section {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        width: 550px;
    }
    #ngo-section article {
        width: calc(100% - 40px);
        background-color: #FFFFF3E0;
        margin-bottom: 30px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        visibility: hidden;
    }
    #ngo-section picture {
        width: 550px; 
        height: 350px;
        margin-top: 30px;
        visibility: hidden;
    }

    /* Travel Section */
    #travel-section {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        width: 550px;
    }
    #travel-section article {
        width: calc(100% - 40px);
        background-color: #FFFFF3E0;
        margin-bottom: 30px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        order: 2;
        visibility: hidden;
    }
    #travel-section picture {
        width: 550px; 
        height: 350px;
        margin-top: 30px;
        order: 1;
        visibility: hidden;
    }
    
    /* Competence Section */
    #competence-section {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        width: 550px;
    }
    #competence-section article {
        width: calc(100% - 40px);
        background-color: #FFFFF3E0;
        margin-bottom: 30px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        visibility: hidden;
    }
    #competence-section picture {
        width: 550px; 
        height: 350px;
        margin-top: 30px;
        visibility: hidden;
    }

    /* Proverbs Section */
    #proverbs-section {
        display: flex;
        flex-direction: row;
        overflow-x: auto; 
        overflow-y: hidden;
        scrollbar-width: thin;
        margin: 3% 0px 3% 0px;
    }
}

/* Large screens (Desktops) */
@media only screen and (min-width: 1025px) {
    /* Header Section */
    header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 70px;
    }

    /* Intro Section */
    #intro-section {
        font-family: 'Cagliostro', sans-serif;
        text-align: center;
        padding: 10px;
        width: 50%;
        margin: 10px auto 0px auto;
        visibility: hidden;
    }

    /* Nyendo Section */
    #nyendo-section {
        display: flex;
        flex-flow: row nowrap;
        margin-bottom: 5%;
    }
    #nyendo-image-container { 
        width: 55%;
        height: 400px;
        margin: 0; 
        padding: 0;
        display: flex;
        scroll-snap-type: x mandatory; 
        overflow-x: scroll;
        scrollbar-width: none;
        order: 2;
        visibility: hidden;
    }
    #nyendo-section article {
        width: 45%;
        height: fit-content;
        background-color: #FFFFF3E0;
        text-align: center;
        padding: 20px;
        margin: auto 0 auto 0;
        order: 1;
        visibility: hidden;
    } 

    /* Oseki Section */
    #oseki-section {
        display: flex;
        flex-flow: row nowrap;
        margin-bottom: 5%;
    }
    #oseki-image-container { 
        width: 55%;
        height: 400px;
        margin: 0; 
        padding: 0;
        display: flex;
        scroll-snap-type: x mandatory; 
        overflow-x: scroll;
        scrollbar-width: none;
        visibility: hidden;
    }
    #oseki-section article {
        width: 45%;
        height: fit-content;
        background-color: #FFFFF3E0;
        text-align: center;
        padding: 20px;
        margin: auto 0 auto 0;
        visibility: hidden;
    } 

    /* Book Section */
    #book-section {
        display: flex;
        flex-direction: row; 
        margin: 30px auto 3% auto;
        width: 80%;
    }
    #book-section article {
        width: 50%;
        height: fit-content;
        background-color: #FFFFF3E0;
        display: flex;
        flex-direction: column;
        padding: 20px;
        margin: auto 0 auto 0;
        order: 1;
        visibility: hidden;
    }
    #book-section picture {
        width: 190px; 
        height: 301px;
        order: 2;
        visibility: hidden;
    }

    /* Learning Section */
    #learning-section {
        display: flex;
        flex-direction: row; 
        margin: 30px auto 3% auto;
        width: 80%;
    }
    #learning-section article {
        width: 50%;
        height: fit-content;
        background-color: #FFFFF3E0;
        display: flex;
        flex-direction: column;
        padding: 20px;
        margin: auto 0 auto 0;
        visibility: hidden;
    }
    #learning-section picture {
        width: 498px; 
        height: 356px;
        visibility: hidden;
    }

    /* Retreat Section */
    #retreat-section {
        display: flex;
        flex-direction: row; 
        margin: 30px auto 3% auto;
        width: 80%;
    }
    #retreat-section article {
        width: 50%;
        height: fit-content;
        background-color: #FFFFF3E0;
        display: flex;
        flex-direction: column;
        padding: 20px;
        margin: auto 0 auto 0;
        order: 1;
        visibility: hidden;
    }
    #retreat-section picture {
        width: 427px; 
        height: 320px;
        order: 2;
        visibility: hidden;
    }

    /* Ngo Section */
    #ngo-section {
        display: flex;
        flex-direction: row; 
        margin: 30px auto 3% auto;
        width: 80%;
    }
    #ngo-section article {
        width: 50%;
        height: fit-content;
        background-color: #FFFFF3E0;
        display: flex;
        flex-direction: column;
        padding: 20px;
        margin: auto 0 auto 0;
        visibility: hidden;
    }
    #ngo-section picture {
        width: 340px; 
        height: 450px;
        visibility: hidden;
    }

    /* Travel Section */
    #travel-section {
        display: flex;
        flex-direction: row; 
        margin: 30px auto 3% auto;
        width: 80%;
    }
    #travel-section article {
        width: 50%;
        height: fit-content;
        background-color: #FFFFF3E0;
        display: flex;
        flex-direction: column;
        padding: 20px;
        margin: auto 0 auto 0;
        order: 1;
        visibility: hidden;
    }
    #travel-section picture {
        width: 491px; 
        height: 326px;
        order: 2;
        visibility: hidden;
    }

    /* Competence Section */
    #competence-section {
        display: flex;
        flex-direction: row; 
        margin: 30px auto 3% auto;
        width: 80%;
    }
    #competence-section article {
        width: 50%;
        height: fit-content;
        background-color: #FFFFF3E0;
        display: flex;
        flex-direction: column;
        padding: 20px;
        margin: auto 0 auto 0;
        visibility: hidden;
    }
    #competence-section picture {
        width: 314px; 
        height: 338px;
        visibility: hidden;
    }

    /* Proverbs Section */
    #proverbs-section {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 5% 0px 3% 0px;
    }
}