@media only screen and (max-width:800px) {
/* General styles */
img.banner { margin: auto; max-width: 40vw; }
div.banner { width: 100%; }
body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 3; padding: 3; }

/* Styling for headings */
h1 { color: white; text-align: center; font-size: 6vw; }

/* Styling for links */
a { color: #007bff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Styling for a specific class */
#container { margin: 0 auto; padding: 20px; margin-inline: auto; }
.biopic { float: left; width: 23%; padding: 1%; }
.biotext { padding: 1%; }

.img-wrapper { margin-top: auto; }

/* Styling for Title Bar */
#main-header { margin: 0; font-family: Garamond, serif; font-size: 3em; position: sticky; width: 100%; z-index: 999; top: 0px; background: green; padding: 1px 0px 0px 0px; text-align: center; }

/* Styling for Title menu */
#top-menu { font-family: Arial, sans-serif; font-size: 3vw; }

/* Styling for unordered lists in the top menu*/
ul.crossmenu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; }
li.crossmenu { float: left; }
li.crossmenu a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
li.crossmenu a:hover { background-color: #111; }

.active { background-color: #04AA6D; }
.active:hover { text-decoration: none; background-color: #04AA6D; }

/* Styling for horizontal scrolling image menu */
.scrollmenu { display: grid; place-items: center; align-content: stretch; background-color: #333; width: 100%; }
.scrollmenu a { display: inline-block; color: white; text-align: center; text-weight: bold; padding: 14px; text-decoration: none; }
.scrollmenu a:hover { background-color: #777; }
.scrollmenu img { display: block; max-width: 80%; object-fit: contain; align: center; }

hr.solid { border-top: 3px solid #bbb; }

.footer { clear: both; position: static; padding: 2px; width: 100%; background-color: blue; color: white; text-align: center; }

ul { list-style-type: none; margin: 20px; }


table.show, thead.show, tbody.show, th.show, td.show, tr.show { display: block; /* Make table elements behave like blocks for stacking */ }
thead.show { display: none; /* Hide table headers on small screens */ }
tr.show { margin-bottom: 15px; /* Add spacing between rows */ border: 2px solid #ddd; /* Add a border around each "row" */ }
td.show { border: none; /* Remove individual cell borders */ border-bottom: 1px solid #eee; /* Add a bottom border for separation */ position: relative; text-align: center; }


.arrow { max-width: 10vw; }

.ctrpic { display: block; margin: auto; width: 50vw; }

}