body { 
  font-family: comic sans ms;
  text-align: center;
  margin: 0; /* Remove default margin */
  background-image: url(bg3.png);
  font-size: 11pt;
  color: #3B3B3B;
  background-attachment: fixed;
}

details {
  border: 1px solid #88BCA6;
  border-radius: 1pt;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
  background-color: #DAEAE3;
  color: #5CA385;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: 0.5em;
}

hr {
  font-family: Arial, sans-serif; /* choose the font you like */
  text-align: center; /* horizontal centering */
  line-height: 1px; /* vertical centering */
  height: 1px; /* gap between the lines */
  font-size: 1em; /* choose font size you like */
  border-width: 1px 0; /* top and bottom borders */
  border-style: solid;
  border-color: #DCDCDC;
  margin: 1em 10%;
  overflow: visible;

  /* ensure 1px gap between borders */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}

b {
  color: #A35C7A;
}

.small {
  font-size: 9pt;
  font-style: italic;
}

table {
  border: 3px solid #5CA385;
  width: 1000px;
  background: rgba(255, 255, 255, .7);
  margin: 10pt;
  padding: 1em;
  box-shadow: 5px 5px 0px #e1e4e6;
}

td {
  text-align: center;
}

h1 { 
  font-weight: bold;
  font-size: 45pt;
  letter-spacing: 5pt;
  margin-bottom: 0pt;
  margin-top: 5pt;
  text-shadow: 2px 2px 0px #C5CBCE;
  color: #5CA385;
}

h2 {
  font-weight: bold;
  font-size: 18pt;
  margin-bottom: 0pt;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #5CA385;
}

h3 {
  font-weight: bold;
  font-size: 18pt;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #5CA385;
}

iframe {
  width: 800px;
  height: 650px;
  border:3px solid #5CA385;
  box-shadow: 5px 5px 0px #e1e4e6;
}

 /* unvisited link */
a:link {
  color: #5b5b5b;
  text-decoration: #A35C7A solid underline;
  text-decoration-thickness: 2px;
}
/* visited link */
a:visited {
  color: #5b5b5b;
  text-decoration: #A35C7A solid underline;
  text-decoration-thickness: 2px;
}
/* mouse over link */
a:hover {
  color: #969696;
  text-decoration: none;
  border-bottom: none;
  cursor: help;
}
/* selected link */
a:active {
  color: #969696;
  text-decoration: none;
  border-bottom: none;
  cursor: help;
} 

.infoflex {
display: flex; /*this is what tells the divs to sit next to each other*/
flex-wrap: wrap; /*this will make the divs wrap to the next line automatically when they reach the end, instead of stretching your page or container*/
gap: 1rem; /*the amount of space you want between the divs, a "rem" is about 16px wide, but you can also use px here instead of rem if you prefer*/
margin: 0 auto; /*this centers your content*/
max-width:max-content;
}

.fulldiv3 {
align-self: baseline;
min-width: 150px;
width: min-content;
}

.imgdiv3 { /*you can replace 'testbgimg.png' with your own bg image*/
background:url(testbgimg.png) no-repeat center;
min-width: 150px; /* make this the width of your bg image */
text-align: center;
}

.infodiv {
text-align: center;
margin-top: -10pt;
} 


/* testing stuff */
.name-male {
  font-size: 15pt;
  font-weight: 900;
  letter-spacing: 2pt;
}

.name-male::after {
  content: "♂️";
  font-size: 12pt;
}

.name-female {
  font-size: 15pt;
  font-weight: 900;
  letter-spacing: 2pt;
}

.name-female::after {
  content: "♀️";
  font-size: 12pt;
}

.container {
  display: flex;
  justify-content: center; /* Centers items horizontally along the main axis */
  align-items: center; /* Centers items vertically along the cross axis */
  border: 0px dotted green;
}

.item-left {
  border: 0px solid black;
  text-align: right;
  padding: 10px;
}

.item-right {
  border: 0px solid black;
  text-align: left;
  padding: 10px;
}