html {
    background-color: white;
}

#main-page{
    margin-top: var(--dim-navbar-margin);
    width: var(--dim-page-width-large);
}

#main-page #slide-show-1{
    flex: 1 0 auto;

    padding: 0 !important;
    margin: auto;
}   

#main-page #slide-show-1 .mySlides img{
    max-height: 560px;                        
    max-width: max(60vw, min(800px, 87.5vw)); 
}

/* ---------------- list page -------------------- */


#list-page{
    padding: var(--dim-page-padding) 0;
    width: var(--dim-page-width-large);
}

#list-page-title {
    font-size: var(--ft-size-b3);
    width: fit-content;
    margin-top: 0;
    margin-bottom: 1.5em;
}

#list-page-text-form{
    display: none;
    text-align: center;
    width: var(--dim-page-width-large);
    margin: 0 auto;
}

#list-page-point-form{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
}

#list-page-point-form li{
    margin-right: auto;
    margin-left: 40px;
    margin-bottom: 1.5em;
    flex-basis: 27ch;
}

/* the invisible elements that are added by the JS code */
#list-page-point-form ul span{
    margin-right: auto;
    margin-left: 40px;
    flex-basis: 27ch;
}

/* ------------------------------------ */

#knowledge-page{
    width: var(--dim-page-width-large);
    font-size: var(--ft-size);
}

#slide-show-2{
    float: right;
    margin: auto 0;
    margin: 2em;
    margin-top: 1em;
    margin-right: 0;
}

#slide-show-2 img{
    display: block;
    object-fit: contain;
    width: 100%;

    max-height: 460px;              /* setting the maximum size limit for image */
    max-width: max(55vw, 402px);    /* setting the minimum size limit for image */
}

#knowledge-page-text p{
    white-space: pre-wrap;
    margin: 0;
    margin-top: 1em;
    padding: 0;
}

/* ---------------------------------------------- */


@media screen and (max-width: 1340px){
    #main-page{
        flex-direction: column;
    }
}

@media screen and (max-width: 950px){
    #knowledge-page #slide-show-2{
        float: none !important;
        margin: 0;
    }

    #list-page-point-form{
        display: none !important;   
    }

    #list-page-text-form{
        display: block !important;
    }
}