body {font-family: Courier New}
h1 {text-align: center;}
h2 {text-align: center;}
h3 {text-align: center;}
h4 {text-align: center;}
h5 {text-align: center;}
p {text-align: justified-text;}

body {margin-left:150px; margin-right:150px; padding:0}   /* general design, keeps text out of margins */

div img { margin: 0;      /* used to make images appear centered */
	display: flex;
	margin-left: auto;
	margin-right: auto;
}

.image-container {
  display: flex;         /* Forces images strictly side-by-side */
  gap: 0;                /* Removes all space between the images */
  justify-content: center; /* Optional: controls alignment */
}

.image-container img {
  display: flex;        /* Kills the default text-baseline white space */
  max-width: 100%;       /* Ensures responsiveness */
  height: auto;          /* Maintains original aspect ratio */
  margin: 0;             /* Wipes out random margin overrides */
  padding: 0;            /* Wipes out random padding overrides */

}

.flex {                 /* Being used for buttons */
	display: flex;
	justify-content: center;
}

.flex-item + .flex-item { /* Being used for buttons */
	margin-left: 10px;
}

.button {
	background-color: #FFDB58;
	border: none;
	color: black;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer
	font-family: Courier New;
	transition-duration: 0.4s;
}

.button1 {border: 2px solid black;}
.button2 {border: 2px solid black;}
.button3 {border: 2px solid black;}

.button1:hover {
	background-color: white;
	color: black;
}

.button2:hover {
	background-color: white;
	color: black;
}

.button3:hover {
	background-color: white;
	color: black;
}