charset "utf-8";

 	* {box-sizing: border-box;}
 
	#wrapper {width: 1203px; margin-right: auto; margin-left: auto; border: 1px solid black; background: rgba(240,248,255, 0.5); min-height: 500} /* 2 extra pixels added to the width because of the 1 pixel border on left and right side of the wrapper */
	nav {width: 1203px; min-height: 20px; text-align:center; background-color:teal; }

	body {background-image: url(photos/background2.jpg); background-size: cover}
	p {text-align: left; margin: 1em; font-family: 'default'; margin-left: 40px; margin-right: 40px;}
	hr {width:800px; height: 3px; background-color: grey; border: none;}
	h1 {font-family: 'default'; text-align: center; color: black;}
	h2 {font-family: 'default'; text-align: center; font-size: 14px}
	h3 {font-family: 'default'; text-align: center; font-size: 20px; color: red}
	img {display: block; margin: auto;} /* set the img tag to a block level element */
	a:visited{color:deepskyblue; font-style:italic;}
	a:hover{color:deepskyblue; text-decoration:none;}
	a:focus{color: #ff6666;}
	figure{text-align:center}
	figure figcaption {font-family: 'default'}
	span:nth-child(2) {font-style: bold; color: teal; font-size: 18px;}
	ul {background-color: lightgrey; list-style-type: none; margin: 0; padding: 0; overflow: hidden;}
	ol {background-color: lightgrey; margin-left: 40px; margin-right: 40px; margin-bottom: 20px; margin-top: 20px; line-height: 40px}
	td, th {border: 1px solid black; padding: 5px; font-size: 14px; font-family:"default";}
	td img{display: block; margin: auto auto}
	thead {background-color: lightgrey; border-top: 2px solid gray; border-bottom: 2px solid gray;}
	caption {font-weight: bold; background-color: #FBFBFB; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; padding: 5px}
	tfoot {background-color: #f5deb3; border: 1px solid black; text-align: right; font-size: 8px;}
	fieldset {width: 410px; margin-bottom:30px; text-align: left}
	form {display: inline-block;}
	table,th,td {margin-left: auto; margin-right: auto; border: none;}
	    
	.normalList {background-color: inherit; font-family: 'default'; margin-left: 40px; margin-right: 40px; font-size: 17px; line-height: 20px; list-style-position: inside; line-height: 40px}
	.nav {float: left;} /*for navbox*/
	.blogPost{border: 1px solid purple}
	.button:link{
		font-family:'default'; 
		font-weight:bold; 
		font-size:15px; 
		color:black;
		display: block;
		width: 148px;
		margin:auto;
		border: 2px black solid;
		text-align: center;
		text-decoration: none;
		margin-bottom:5px;
		margin-top: 5px;
		background-color: lightblue;
	}
	.button:hover {border: 2px black dashed; width: 148px; background-color: lightgrey}
	.button:visited {border: 2px black solid; color: black} /* ovrrides default visited link color */
	.buttonHere {
		font-family:'default'; 
		font-weight:bold; 
		font-size:15px; 
		color:deepskyblue;
		display: block;
		width: 148px;
		margin:auto;
		border: 2px black solid;
		text-align: center;
		text-decoration: none;
		margin-bottom:5px;
		margin-top: 5px;
		background-color:lightblue;	
	}
	
	.clear {clear: both}
	.floatLeft{float: left; border: darkblue 8px double; margin-right: 8px;}
	.floatRight{float: right; border: darkblue 8px double; margin-left: 8px;}
	.floatRightBorderless{float: right; margin-left: 8px;}
	.mail:link {color:brown;}
	.mail:hover{font-style:none; color: lightgray;}
	.buttonsHorz{margin-left: 40px;}
	.GC label {line-height: 27px}
	.btn {color: white; 
			font-size: 15px;
			text-align: center;
			border: 0px;
			height: 33px;
			padding-bottom: 3px;
			padding-left: 20px; 
			padding-right: 20px;
			background-color: #DC0000;
			text-shadow: 1px 1px 1px gray;
			filter: drop-shadow(1.5px 1.5px 2px black)
		}

.gallery {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, 5vw);
    grid-gap: 15px;
}
.column {
  float: left;
  width: 33%;
  padding: 1px;
}
.columnIndex{
  float: left;
  width: 49%;
  padding: 1px;    
}
.column1 {
  float: inherit;
  width: 100%;
  padding: 1px;
}

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

@font-face {font-family: "default"; src: url("font/Xolonium-Regular.ttf")}