/* CSS styling for the MAIN section, i.e. the body below the navbar. */

html {
    height: 100vh;
}

/* Ensure full height. BODY contains HEADER, MAIN and FOOTER semantic elements. */
body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* HEADER contains the navbar. */
header {
    padding: 0;
}

/* MAIN contains the primary content. */
main {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;          /* fill the remaining space */
    overflow-y: none; /* overflow if exceeds available space */

}

/* FOOTER contains the copyright, etc. */
footer {
    padding: 0;
}

/* Centralise content on desktop browsers. */
.content {
    width: 70%;
    height: 100%;
    flex: 1;          /* fill the remaining space */
    margin-left: auto;
    margin-right: auto;
    background-color: #fcfcfc;
}

.content img {
    display: block;
    margin: auto;
/*    max-width: inherit;
    max-height: inherit; */
  height: inherit;
  width: inherit;
  object-fit: contain;
}

/* Full-width content on mobile. */
@media (max-width: 768px) {
    .content {
        width: 100%;
    }
}

/* Text layout and typography. */
p, article {
    padding: 10px;
}