body {
  font-family: Arial;
  margin: 0;
}


/* Used in homepage */
.myTopNote {
    background:yellow;
    padding:5px;
    text-align:center;
}


/* Used in homepage */
.myHeading {
  padding: 0px;
  text-align: center;
    color: rgb(170,131,187);
}


.image-container {
  /* Set a fixed or relative width for the container */
  width: 80%; /* Adjust based on your layout (e.g., 500px, 100vw) */
  margin: 20px auto; /* Center the container */
  border: 2px solid #ddd; /* Optional: Visualize the container */
  padding: 10px; /* Optional: Add space inside the container */
  /* Prevent padding from increasing container width */
  box-sizing: border-box; 
}
.image-container-main-column {
  /* Set a fixed or relative width for the container */
  width: 100%; /* Adjust based on your layout (e.g., 500px, 100vw) */
  margin: 0 auto; /* Center the container */
  padding: 0; /* Optional: Add space inside the container */
  /* Prevent padding from increasing container width */
  height: auto;	
}

.responsive-image {
  /* 1. Fit container width */
  width: 100%; 
  /* 2. Maintain aspect ratio */
  height: auto; 
  /* 3. Set max height (adjust value as needed) */
/*  max-height: 400px; */ 
  /* Optional: Add spacing */
  display: block; /* Remove inline img bottom gap */
  margin: 0 auto; /* Center image if it shrinks due to max-height */
}


/* Top navigation bar - Used in homepage */
.navbar {
  display: flex;
  background-color: #333;
}

/* Navigation bar links - Used in homepage */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover - Used in homepage */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container - Used in homepage */
.container {  
  display: flex;
                                /* flex-wrap: wrap;  This command stopped the two columns working   */
}

/* Sidebar/left column - Used in homepage */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column - Used in homepage */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}



/* Used in homepage first column */
.img_two {
/*  image number two */
  width: 100%;
  
}

/* Used in homepage */
footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}