body {
	padding: 0;
	background: #4A4A4A; /** screen area */
    background: white;
	line-height: 1.6em;
	text-align: justify;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
    border: none;
}
/** BANNER AND HOME menu */
.responsive-img {
    width: 100%; /* Image will scale to the width of its container */
    height: auto; /* Maintains the image's aspect ratio */
    max-width: 1200px; /* Prevents the image from getting too large on big screens */
    display: block; /* Removes default inline margins */
    margin: 0 auto; /* Centers the image if its container is wider than max-width */
}
#menu2 {
    padding: 0 0 0 1em;
	background: grey;
}
#menu2 a {
  color: #D3D3D3;
  background-color: grey;
  font-weight: bold;
}
#menu2 a:hover {
	color: blue;
}	
/** CONTENT now relative */
#content-wrap {
    width: 100%; /* Scales with the browser window width */
    max-width: 960px; /* Prevents it from getting too wide on large screens */
    margin: 0 auto; /* Centers the content */
    background: #A2FFA9; /** full site area */
	border: 1px  solid;  /** changed since send to Simon */
}
#content {
	width: 96%; /** was 890 the 920 */
	margin: 0 auto; /* Centers the content */
	padding-top: 0px;
    background: #A2FFA9; /** text and image area */
    border: none;
}

/** Common Styles */
#columnAB {
	float: left;
	width: 100%; /** was 860 then 916 */
	background: #A2FFA9; /** single wide column area */
     border: 0px  dotted;
}
a {
	color: #0193DE;
}
a:hover {
	text-decoration: none;
}
.h-inLine1 {
    font-size: 1rem;
    font-weight: bold;
    color: black;
}
.h-inLine2 {
    font-size: 0.8rem;
    font-weight: bold;
    color: black;
}
#columnAB h1 {
	padding: .2rem 0 .2rem 2rem;
	background: #101010;
	border: 1px #929291 solid;
	text-transform: none;
    color: #FFFFFF;
	font-size: 1.2rem;
	font-weight: bold;
    margin-left: 0px
}
#columnAB h2 {
    padding: 0 0 .1rem 0;
    background: none;
	font-family: Arial, Helvetica, sans-serif; /** was "Times New Roman", Times, serif; */
    font-size: 1.2rem;
    border-bottom: 1px solid ;
    border-top: none ;
	font-weight: normal;
    margin:0 0 0 0;
}
h3 {
	margin: 0px 0 -3px 0px;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	display:inline;
}
h4 {
	padding: 2px 0 2px 5px;
    text-decoration: underline;
    color: black;
	font-size: 16px;
	font-weight: bold;
}
/** my version of fig */
figure {
  display: block;
  margin: 10px 5px 5px 5px
}

.font-reduce {
font-size: 90%;
font-style: oblique;
}

.incidentally {margin-left: 3%;}
.incidentally p::before{
content: "Incidentally: ";
font-size: .8rem;
font-weight: bold;
font-style:italic;
}
.indent {
margin: -10px 0 0 20px;
}
.player2 {
 margin: auto;
 width: 80%;
}

.text-box {
    background-color: yellow;
    color: blue;            
    padding: 1px;
    text-align: center;
    font-weight:bold;
    width: 60%;
    box-sizing: border-box;   /* Ensure padding is included in the width calculation */
    margin-left: auto;
    margin-right: auto;
}

/** AI suggestion */
.area-link {
    fill: rgba(255, 0, 0, 0.3); /* Example: a semi-transparent red fill */
    stroke: red;
    stroke-width: 2;
    cursor: pointer;
    opacity: 0; /* Make areas invisible normally */
    transition: opacity 0.3s;
}

.area-link:hover {
    opacity: 1; /* Show on hover */
}

/** https://www.w3schools.com/howto/howto_css_responsive_iframes.asp */
.ifrm-container {
  position: relative; left: -4vh;
  overflow: hidden;
  width: 100%;
  /* padding-top: 56.25%; 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  padding: 32vh 0 2vw 0; /* or padding: 32vh 0 2vw 0; padding-top: 37%;  */
}
/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 2vw;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/** AI suggestion re sv in flex box */
.container-svg {
    display: flex; /* Makes the container a flex container */
    justify-content: space-between; /* Pushes content and SVG to opposite ends */
    align-items: flex-start; /* Aligns items to the start of the cross axis */
}
.content-area {
     width:50%;
}
.right-aligned-svg {
    width: 50%; /* Control size with a percentage of the container */
    height: auto; /* Maintain aspect ratio */
    /* Remove 'float: right' from this class */
}


.contain {
display: flex;
}
.box-1 {
  flex: 1;
  height:30px;
  border-top-style: solid;
  border-right-style: solid;
  border-width: 1px;
 }
.box-2 {
  flex:1;
  height:30px;
  border-top-style: solid;
  border-right-style: solid;
  border-width: 1px;
}
.box-3 {
  flex:1;
  height:30px;
  border-top-style: solid;
  border-right-style: none;
  border-width: 1px;
}


/** FOOTER */
#footer {
	height: auto;
	margin: 0px auto;
	background: #fffea5;
	border-top: 2px solid #4A4A4A;
	font-size: 0.8em;
	color: #000000;
}
#footer p {
	margin: 1vh 0 0 1vw;
	line-height: 140%; 
}