/* preload */

/* REMOVE FONT FACE IF UNUSED IN FINAL SITE */

@font-face {
  font-family: Baskervville;
  src: url("fonts/static/Baskervville-Medium.ttf");
}

/* header styling */

button {
	margin:auto;
	font-family: Times New Roman;
	font-size:20px;
	padding:20px;
	background-color:#EEEEEE;
	border:none;
	cursor:pointer;
}

button:hover {
	background-color:#442222;
	color:#FDF2E8;
}

/* block styling */

body {
	background-color:#734438;
	background-image:url("img/bg.png");
	margin:0px;
	min-width:400px;	
}

.wrapOuter {
	background-color:#734438;
	background-image:url("img/bg.png");}

.wrapInner {
	width:80%;
	margin:auto;
	background-color:#FFFFFF;
}

.header {
	background-color:#EEEEEE;
}

.banner {
	background-image:url("img/tempbanner.jpg");
	background-size:cover;
	height:400px;
	width:100%;
	display:flex;
	align-items:end;
}

.bannertitle {
	color:#FDF2E8;
	padding:10px;
	margin:0px;
	width:100%;
	font-family: "Baskervville", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size:48px;
}

.navbar {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	padding-top:0px;
	padding-bottom:0px;
}

.content {
	padding:20px;
	padding-top:0px;
}

.footer {
	width:80%;
	margin:auto;
}

.footer p {
	color:white;
	font-family:Arial;
	font-size:14px;
	font-variant:small-caps;
	text-align:right
}

.footer a {
	color:white;
}

.footer a:hover {
	color:#FFFFCC;
}

/* body styling */

h3 {
	font-family: "Times New Roman", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size:26px;
  	margin-bottom:0px;
    color:#301312;
}

p {
  font-family: "Times New Roman", serif;
  font-optical-sizing: auto;
  font-size:16px;
  font-weight: 500;
  color:#301312;
  text-align:left;
}

/* alignment */

.grid4x2 {
	width:80%;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:space-between;
}

.griditem {
	border:2px solid #993333;
}

.center {
	width:90%;
  	text-align:left;
    margin:auto;
}

.flex {
	display: flex;
    flex-direction:row
}

.flexcol {
	display: flex;
    flex-direction:column;
}

.gap {
	gap:10px;
  	margin:auto;
    justify-content:space-around;
}

.center {
  text-align:center;
}

.newp {
  margin-bottom:0px;
}

/* gallery */

.gallery {
  display:flex; 
  flex-direction:row; 
  flex-wrap:wrap; 
  justify-content:space-between;
  gap:10px;
  max-width:100%;
}

.display {
  display:flex; 
  flex-direction:column;
  flex: 1 0 30%; 
  max-width: 30%;
}

.displaythumb {
max-height:300px;
  max-width:100%;
}

.displayinfo {
  /* background-color:#EEE; */
  margin-top:0px;
  width:inherit;
}

.displayinfo p {
  /* background-color:#EEE; */
  padding-top:10px; 
  margin:0px;
  width:inherit;
}

/* tooltips */

.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 150px;
  background-color: black;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
  margin-left:15px;
  font-size:15px
}		

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}