.viewport,
#viewport {

	border-radius: 50%;
	background-color: #37BFF1;
	width: 787px;
	height: 606px;
	margin: 0 auto;
	background: url('/ephrata/images/20230401_085905.jpg');
	background-size: contain;

}

.content,
#content,
content {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #454545;
	margin: 0px;
	min-height: 77%;
	max-width: 680px;
	position: inherit;
}

body,
html {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	text-align: left;
	font-style: normal;
	color: #693B8C;
  margin: 0;
}

h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: bold;
	color: #444444;
}

ul {
	background-color: #D7D7D7;
	border-radius: 21px;
	padding: 7px;
	margin: 6px;
	width: 380px;
	min-height: 192px;
	font-weight: normal;
}

li {
	margin-left: 22px;
	padding: 7px;
}

table {
	border: 1px outset;
	width: 100%;
	height: 100%;
}

img {

	border-radius: 21px;
	background-color: #D7D7D7;
	width: 150px;
	margin: 4px;
	width: 144px;

}

img:hover {
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}


.header,
#header,
header {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bolder;
	font-size: 88px;
	color: #FFFFFF;
	min-height: 156px;
	padding-left: 156px;
	float: left;
	background-color: #000000;
	vertical-align: middle;
}

.left,
#left,
left {
	padding: 21px;
	color: #9B9B9B;
}

.right,
#right,
right {
	padding: 21px;
	color: #9B9B9B;
}

.footer,
#footer,
footer {
	min-height: 31px;
	width: 100%;
	background-color: #000000;
	color: #FFFFFF;
	font-size: 17px;
	font-weight: bold;
	text-align: center;
	padding: 17px;
}

a:link,
a:visited,
a:active {
	font-weight: bold;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

a:hover {
	font-weight: bold;
	text-decoration: underline;
	color: #6699CC;
}

.tab {
	overflow: hidden;
	border: none;
	margin-left: 15px;
	margin-top: 11px;
	outline: thin gray;
}

.column {
	float: left;
	width: 50%;
}

/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: #E3E3E3;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	transition: 0.5s;
	border-top-left-radius: 11px;
	border-top-right-radius: 11px;
	width: 66px;
	height: 27px;
	min-width: 93px;
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #93678B;
}

/* Create an active/current tablink class */
.tab button.active {
	background-color: #AAAAAA;
}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 11px;
	background-color: #AAAAAA;
	border: none;
	border-radius: 15px;
}

/* USER INTERFACE COLORS AS DEFINED BY CSS2

	ActiveBorder = active window border
	ActiveCaption = active window caption
	AppWorkspace = Background color of a multi-document interface
	Background = Desktop background color
	ButtonFace - button background color
	ButtonHighlight - highlight background color
	ButtonShadow - shadow background color
	ButtonText - button text color
	CaptionText - text in caption, size box, and scrollbar arrow box.
	GrayText - color of grayed out (disabled) items
	Highlight - selected item in a control background color
	HighlightText - highlighted text color
	InactiveBorder - inactive window border
	InactiveCaption - inactive window caption
	InactiveCaptionText
	InfoBackground - background color of popup help on icons
	Menu - Menu background
	MenuText
	Scrollbar - the area in which the scroller is dragged
	ThreeDDarkShadow - dark shadow of 3d display elements
	ThreeDFace
	ThreeDHighlight
	ThreeDLightShadow
	Window = window background
	WindowFrame
	Wind
	
*/