html {
	height:100%;
}

body {
  font-family: 'IM Fell English', serif;
	/* font-family: 'Segoe UI', Tahoma, Helvetica, Arial, sans-serif; */
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0;
	color: #000000; /*black*/
	background-color: #f1e9d2; /*parchment*/;
    background-repeat: repeat;
    background-size: cover;
    background-attachment: fixed;
}
/*==== indicates no border around any image ====*/
body img {
	border: 0px;
	text-decoration: none;
}

/*==== margins auto center the container on the page ====*/
#container {
	margin: 10px auto 10px auto;
	padding: 20px;
	background-color: #ffffff;
	width:92%;
}

#topmenu {
  display: flex;
  justify-content: center;   /* centers the menu */
  align-items: center;
  gap: 2rem;                  /* space between menu and clock */
  padding: 10px 0;
  width: 100%;
}

#topmenu ul {
  display: flex;
  gap: 2rem;                  /* spacing between menu items */
  list-style: none;
  margin: 0;
  padding: 0;
}

#topmenu li a {
  text-decoration: none;
  font-weight: bold;
}

#clockbox {
  margin-left: auto;          /* pushes clock to the far right */
  white-space: nowrap;        /* prevents wrapping */
}



.flip-card-front img {
  width: 100%;
  max-width: 250px; /* Adjust as needed */
  height: auto;
  object-fit: cover;
}

.flip-card {
  width: 250px;
  height: 400px;
  perspective: 1000px;
}

.flip-card {
  margin-bottom: 100px; /* Adds space below each card */
}

.flip-card-inner {
  position: relative;
  width: 250px;
  height: 450px;
  transition: transform .3s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #fff;
}

.flip-card-back {
  background-color: #000000;
  color: white;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  flex-direction: column;
}

.flip-card-back a {
  color: #7bff00; /* This sets the link color */
  text-decoration: none; /* Optional: removes underline */
}

.flip-card-back a:hover {
  color: #f8f408; /* Optional: changes link color on hover */
}



/*==== all site links ====*/
a:link {
	font-weight: bold;
	color: #df5252;
	background: transparent;
	text-decoration: underline;
}

a:visited {
	font-weight: bold;
	color: #ce1919;
	background: transparent;
	padding: 0px;
	text-decoration: underline wavy rgb(1, 1, 22) 2px;
}

a:hover {
	font-weight: bold;
	text-decoration : none;
    background: #9da8ce;
	color: #eee56d;}
a:active {
	font-weight: bold;
	text-decoration : underline;
	background: #BFDFE2;
	color: #726A40;
}



#tooltip {
  position: absolute;
  padding: 6px 10px;
  background: rgb(199, 113, 16);
  color: rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 14px;
  display: none;
  pointer-events: none;
  z-index: 9999;
}


.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  max-width: 900px;
  margin: 20px auto;
}

.gallery img {
  width: 50%;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.gallery img:hover {
  transform: scale(1.1);
}


/* Lightbox with caption */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
}

.lightbox img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
}

#lightbox-caption {
  color: white;
  margin-top: 12px;
  font-size: 1.1rem;
  text-align: center;
  max-width: 80vw;
}

/*===== Styles for heading tags =====*/
h1, h2, h3, h4 {
	color: #485E48;
	background-color: inherit;
}
h1 {
	font-size: 1.5em;
  text-align: center; 
  background: #EBDF9F;
  margin-bottom: 30px;  
}
h2 {
	font-size: 1em;
}
h3 {
	font-size: .9em;
}
h4 {
	font-size: .9em;
}

/*===== styles for main content area =====*/
#content {
	margin-right: 140px;
	margin-left: 140px;
	padding: 5px;
	text-align: left;
	vertical-align: top;
}

figure {
  text-align: justify;
}

/*===== Styles for footer =====*/
#footer {
	border-top: 2px solid #242F24;
	clear: both;
	padding: 5px;
	background-color: rgb(#c9b17a);
	text-align: center;
}
#footer p {
	margin-top: 0px;
	margin-bottom: 0px;
  background-image: solid #AB9F5F;
  background-repeat: repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* Styles your button (this is a 40x40 pixels image) */
.back-to-top {
  position: fixed;
  bottom: 40px;
  right: -60px; /* Start off-screen */
  padding: 10px 15px;
  background-color: #333;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  font-size: 16px;
  transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0;
  z-index: 1000;
}

.back-to-top.show {
  right: 20px; /* Slide into view */
  opacity: 1;
}
/* FORCE topmenu to center and show clock */
#topmenu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 10px 0 !important;
}

#topmenu ul {
  display: flex !important;
  gap: 2rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#clockbox {
  margin-left: auto !important;
  white-space: nowrap !important;
  display: block !important;
  font-weight: bold;
}