@charset "UTF-8";
/* CSS Document */

body {
	font-family: Times, "Times New Roman", "serif";
	font-size: 20px;
	
    /* CHANGED: Swapped fixed width and large margins for max-width to allow shrinking on mobile */
	max-width: 960px;
	margin: 0 auto; 
    padding: 0 20px;
}

#head {
	text-align: center;
}

h3 {
	text-align: center;
	font-style: italic;
	font-size: 30px;
}


hr {
	border-top: 1px solid red;
}

a {
	text-decoration: none;
	color: red;
}

/* CHANGED: Added block display and overflow to allow horizontal scrolling on long tables */
table {
    display: block;
    overflow-x: auto;
}

th, td {
	border: 1px solid;
	padding: 10px;
}

nav{
  display: flex;
  justify-content: center;
  align-items: center;
  /* CHANGED: Allows navigation links to wrap into a second line on narrow phone screens */
  flex-wrap: wrap; 
}

nav li
{
	padding: 15px 20px;
	display:inline;
	font-style:oblique;
	font-size: 26px;

}
nav ul li:hover {
	background-color: lightgray;
}


.nav_link
{
	text-decoration: none;
	color: black;
	justify-content: center;
}

.flex-container {
	display: flex;
	justify-content: center; 
	align-items: center;        
	gap: 20px;
    /* CHANGED: Allows the text and image/table to stack on top of each other on small screens */                      
    flex-wrap: wrap; 
}

/* CHANGED: Added flex-basis so columns know how to size themselves before stacking */
.text_column {
    flex: 1 1 300px;
}

.text_column p {
	line-height: 1.1; 
	white-space: normal;
  	overflow-wrap: break-word;
 	word-break: break-word;
}

/* CHANGED: Added flex-basis so the table column sizes nicely next to the text */
.table_column {
    flex: 1 1 300px;
}

.table_column table {
    /* CHANGED: Fixed '10 px' spacing typo so the browser reads it correctly */
	font-size: 18px; 
	height: auto;
	white-space: nowrap;
    /* CHANGED: Removed float: left; as it interferes with flexbox behavior */
}

/* CHANGED: Added flex-basis to the image column */
.image_column {
    flex: 1 1 300px;
    text-align: center;
}

.image_column img {
    /* CHANGED: Changed from max-width: 500px to 100% so the image shrinks to fit a phone screen */
	max-width: 100%; 
    height: auto;
}

.contact_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly; /* Evenly distributes space around all elements */
	align-items: center;
}

/* ADDED: A small media query to slightly shrink large text on mobile phones for better readability */
@media (max-width: 600px) {
    body {
        font-size: 18px;
    }
    nav li {
        font-size: 20px;
        padding: 10px;
    }
}