/* Basic Body Styles */
body {
	background: transparent;
	font-family: sans-serif;
	overflow: hidden;
 /* Hide scrollbars */;
}

.container {
	display: grid;
	grid-template-columns: 1fr 8fr 1fr;
	grid-template-rows: .5fr 8.75fr .5fr .25fr;
	gap: 0px 0px;
	grid-auto-flow: row;
	grid-template-areas: "logo logo logo"
    "previous slideshow next"
    "caption caption caption"
    "footer footer footer";
}

.container {
	width: 100vw;
	max-width: 100%;
	height: 96vh;
	max-height: 96%;
}

.container div {
	display: flex;
	justify-content: center;
   /* horizontal centering */
	align-items: center;
       /* vertical centering */
	text-align: center;
        /* optional: centers text within child elements */;
}

.container div {
/*	border: 1px solid #999;*/
}

.logo {
	grid-area: logo;
		position: relative;
	overflow: hidden;
}

.previous {
	grid-area: previous;
}

.slideshow {
	grid-area: slideshow;
	position: relative;
	z-index: 100;
}

.next {
	grid-area: next;
}

button {
  all: unset;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button:focus {
  outline: revert;
}

img.prev-nexted {
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  box-shadow: 0 0 0 transparent;
  opacity: 1;
}

.circle:hover,
.circle:active {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
}

.circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering */
  overflow: hidden;        /* hides any overflow from the image */
}

.circle img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover; /* optional: ensures image fills the circle nicely */
}



.caption {
	grid-area: caption;x`
}

.footer {
	grid-area: footer;
		position: relative;
	overflow: hidden;
}

#caption-text {
  transition: opacity 3s ease-in-out;
  opacity: 0;
  font-size: 1.5rem;
  position: relative;
  top: -1.25rem;
}

div.copyright {
	border: none;
}