:root {
    --total-height: calc(100vh*0.90); 
    --header-height: calc(--total-height * 0.20); 
    --content-height: calc(--total-height * 0.75); 
        --text-height: calc(--content-height * 0.10)
        --image-height: calc(--content-height * 0.90);
    --footer-height: calc(--total-height * 0.05);
}
body {
    text-align: center; 
    /*max-height: 100vh;*/ /*this caused main-container to be outside the body element*/
}
#main-container {
    max-height: 100vh;
    max-width: 100vw;
    /*overflow: hidden;*/
}
header {
    /*max-height: var(--header-height);*/
    max-height: 10%;
    width: auto;
    margin: 0;
}

#content { 
    /*max-height: var(--content-height); */
    max-height: 80%;
    width: auto;
    /*padding-bottom: 10%;*/
}
#text { 
    /*max-height: var(--text-height); */
    max-height: 20%;
}
.imagewrapper {
    max-height: 80%;
    /*overflow: hidden;*/
}
img {
    /*max-height: var(--image-height);*/
    height: 40vh;
    max-height: 80%;
    max-width: 90%;
    padding-bottom: 10px;
    overflow: hidden;
}
#footer {
    /*max-height: var(--footer-height); */
    max-height: 10%;
    /*position: absolute; */
    position:  relative;
    bottom: 0; 
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    margin-bottom: 10px;
    background-color: white;
}

div img {
    justify-content: space-around;
}