body {
  background-color: #6b969e;
  font-family: "Times New Roman", Times, Serif;
}

/* wrap all page content in this - creates lighter color content column */
.content {
	background-color: #c6dfe4;
	max-width: 800px;
	margin: auto;
	padding: 40px;
}

.menu {
	display: flex;
	justify-content: left;
	align-items: center;
}

.menu a {
	margin: 5px;
	padding: 7px;
	/* border-radius: 2px; */
	color: black;
	/* box-shadow: 2px 2px; */
	outline: 1px solid black;
	text-decoration: none;
}

.menu a:hover {
	background-color: rgb(182, 182, 182);
}

.circular-btn {
  aspect-ratio: 0.1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0 2em;
  border: 1px solid 
}

.centeredThreeContainer {
  display: flex;
  align-items: center;      /* Optional: vertically center */
  position: relative;       /* Needed for absolute children if you use that trick */
  margin: 40px;            /* Example height */
}

.left {
	position: absolute;
	/* Positioning relative to the centered middle element */
	right: calc(50% + 40px); 
}
.right {
	position: absolute;
	/* Positioning relative to the centered middle element */
	left: calc(50% + 40px);
}
.center {
  	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

Section {
	Display: Flex;
	flex-direction: Row;
}

.drawingsPair {
	display: flex;
	column-gap: 20px;
	padding: 10px 0px; /* top and bottom padding */
	justify-content: center;
	margin: 0;
}

/*  Paragraph style with limited page width; 
words wrap. New lines are preserved as in the code */
.p  
{
	width: 700px;
	padding-top: 10px;
    padding-bottom: 10px;
	
	font-size: 12pt;
	line-height: 15pt;
	
	word-wrap: normal;
}

.free /* Free writing - preserves tabs, new lines, spaces, etc. */
{ white-space: pre }


.freeLine /* Preserves new lines */
{ white-space: pre-line }

.drawingTitle {
	margin: 0;
	padding: 0;
	text-align: center;
}

.in-05
{ margin-left: 20px; }

.in-1
{ margin-left: 40px; }

.in-2 
{ margin-left: 80px; }

.in-3 
{ margin-left: 120px; }




/*Images*/

img.img10 
{ max-width: 10% ; border: 1px solid ; margin: 2px}

img.img25 
{ max-width: 25% ; border: 1px solid ; margin: 2px}

img.img30
{ max-width: 30% ; border: 1px solid ; margin: 2px}

img.img40
{ max-width: 40% ; border: 1px solid ; margin: 2px}

img.img300px
{ width: 100% ; max-width: 300px ; border: 1px solid ; margin: 2px}

img.img400px
{ width: 100% ; max-width: 400px ; border: 1px solid ; margin: 2px}

img.img390px
{ width: 100% ; max-width: 390px ; border: 1px solid ; margin: 2px}