body {
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(36, 11, 0, 0.4);
}
.banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.banner-bg {
  width: 100%;
  height: auto;                 /* Keeps true image proportions */
  display: block;
}

.banner-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(60%, 800px);
  height: auto;
  object-fit: contain;
  z-index: 1;
  opacity: 0;
  animation: fadeInLogo 1.8s ease-out forwards;
}

/* Fade-in keyframes */
@keyframes fadeInLogo {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.05); /* Slight zoom-in */
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.yanone-kaffeesatz-700 {
  font-family: "Yanone Kaffeesatz", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.merriweather-700 {
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.color-white {color: #ffffff;}
.text-center {text-align: center;}
.info {text-align: center; width: 100%; margin: 0 auto 3em;}
.info h2 {font-size: 2.25em;}
.info p {font-size: 1.25em; margin: .5em auto;}

a:link, a:visited {cursor: pointer; color: #FF8E5E; text-decoration: none;}
a:hover, a:active {
    cursor: pointer;
    color: #ffffff;
    text-decoration: underline;
}
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}
.slice {
/* 	width: 80%; */
	width: calc(8rem + (35vw * -1) + 100vw);
	max-width: 900px;
	margin: 1em auto;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: row;
	padding: .3rem 0;
	gap: 0;
}

/* flip the layout when 'alt' is present */
.slice.alt {
	flex-direction: row-reverse;
}

.slice a.weblink {border:3px solid #FF8E5E;}

.slice a.weblink img {
	width: clamp(100px, calc(63.636px + 11.364vw), 200px);
	max-width:200px; 
    height: auto;
    object-fit: cover;
	display:block;
  flex: 0 0 auto;
}

.dark-brown {
    background-color: #240B00;
}
.med-brown {
    background-color: #6D2100;
}
.light-brown {
    background-color: #933710;
}
.highlight {color: #FF8E5E;}
.white {color: #FFFFFF;}

.title_small {
/* 				font-size: 1.3em; */
	font-size: clamp(0.5rem, 3vh, 2.0rem);
}
.title_medium {
/* 				font-size: 1.75em; */
	font-size: clamp(1.15rem, 3vh, 3.0rem);
}
.title_large {
/* 				font-size: 3em; */
	font-size: clamp(3.0rem, 5vh, 4.5rem);
}
.wide_spacing {letter-spacing: 2.5px;}
.white {color: #FFFFFF;}

.link-container {
    margin-top: 32px;
    margin-bottom: 32px;
}
.link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: #673DE6;
    margin-top: 8px;
    text-decoration: none;
}
.navigation {
    width: 100%;
    height: 72px;
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #36344D;
}

/* Optional: tweak logo scaling for smaller screens */
@media (max-width: 600px) {
  .banner-logo {
    width: 70%;
  }
}

form input[type=text], form input[type=password], form input[type=url], form input[type=date], form input[type=time] { padding:8px; width:300px; max-width:100%; box-sizing:border-box; }
button { padding:8px 12px; border-radius:6px; border:1px solid #bbb; background:#f7f7f7; cursor:pointer; }

.pentagon {
    width: clamp(70px, 12vw, 140px);
    height: clamp(70px, 12vw, 140px);
    position: relative;
    flex-shrink: 0;
    background: url("../images/pentagon3-right.svg") no-repeat center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slice.alt .pentagon {
    background: url("../images/pentagon3-left.svg") no-repeat center/cover;
}

span.bigdate {
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-35%, -50%);
    width: 60%;
    text-align: center;
    font-family: "Merriweather", serif;
    font-weight: 700;
    color: #6D2100;
    line-height: 0.9;

    /* SCALE TEXT */
    font-size: clamp(1.2rem, 3vw, 2.6rem);
}

.slice.alt .pentagon span.bigdate {
    left: 50%;
}

/* who/when box spacing when image-left */
.whoandwhen {
  margin-left: 1rem;   /* space from pentagon to text when not flipped */
  text-align: left;
}

/* when flipped, text should align right and margin should be on the right */
.slice.alt .whoandwhen {
  margin-left: 0;
  margin-right: 1rem;
  text-align: right;
}

.artistname {
    font-family: "Merriweather", serif;
    font-weight: 700;
    color: #fff;
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    line-height: 1.1;
}

.dayandtime {
    font-family: "Yanone Kaffeesatz", sans-serif;
    font-weight: 600;
    color: #FF8E5E;
    font-size: clamp(1.3rem, 3vw, 2.5rem);
    line-height: 1;
}

p.artist-website {
	font-family: "Merriweather", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: italic;
	font-size: clamp(0.65rem, 3vw, 1rem);
	margin-top: 0.20rem;
	margin-bottom: 0.4rem;
	color: #ffc0a4;
}

.artist-website a {
    color: #ffa781;
    font-style: normal;
    text-decoration: none;
    border-bottom: 1px dotted #ffa781;
}

.artist-website a:hover {
    color: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}