body {
	margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px; /* Adjust to your preference */
    line-height: 1.6; /* Improves readability */
    color: #333; /* Text color */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600; /* Use a bold weight for headings */
    margin: 0;
    color: #111; /* Darker color for headings */
}

p, a, span {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400; /* Normal weight for paragraphs and links */
    margin: 0;
    color: #555;
}
header {
	background-color: rgba(99, 60, 148, 0.8); /* Background color behind the image */
	background-blend-mode: lighten;
	background-image: url("/?originalUrl=https%3A%2F%2Fiwillmakespace.com%2Fimages%2Fheader.png"); /* Transparent PNG */
	background-repeat: no-repeat; /* Prevent repeating the image */
	background-position: top 10px center; /* Center the image */
	background-size: 500px; /* Ensure the image scales without distortion */
	color: #D794AF; /* Text color */
	text-align: center;
	padding: 50px 20px; /* Header padding */
	position: relative; /* Ensure proper stacking context */
}
.logotext {
	display:initial;
	font-size:4em;
	letter-spacing:5px;
	word-spacing: 0.5em;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase; /* Ensure all text appears in all caps */
	/*left:-40px;*/
	color:#fff;
	-webkit-text-stroke: 1px black;
	text-stroke: 1px black;
	text-align: center; /* Aligns the text in the middle */
}
mark {
	background-color: white;
	font-size:1.2em;
	line-height:90%;
}
.row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 20px auto 20px;
}
.row:nth-child(odd) {
	background-color: #E0BAC9;
}
.row:nth-child(even) {
	background-color: #D794AF;
}
.image, .text {
	padding: 20px;
	text-align: center;
}
.image img {
	max-width: 50%;
	height: auto;
}
.image-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	text-align: center;
}
.image-gallery img {
	width: 50%;
	max-width: 150px; /* Adjust this value for image size */
	height: auto;
	cursor: pointer;
	position: relative;
	display:block;
}
.leftimgs {
			margin:10px 10px 10px auto;
}
.rightimgs {
			margin:10px auto 10px 10px;
}
/* Ensure relative positioning of the gallery container for pseudo-element */
.image-gallery {
	position: relative;
}
textarea {
	width: 300px;
	height: 200px;
}
button {
	background-color: #FFFFC5;
	color: black;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	border:none;
}
button:hover, #bandTour:hover {
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.igb {
	background-color: #DD2A7B; /* FB Blue */
	color:white;
}
.wab {
	background-color: #04AA6D; /* Green */
		color:white;
}
.fbb {
	background-color: #1877F2; /* FB Blue */
	color:white;
}

.dropdown-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
}

.dropdown-container {
  width: 90%;
  max-width: 600px;
}

.dropdown-toggle {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  font-style: italic;
  background-color: #633C94;
  color: white;
  border: none;
  cursor: pointer;
  font-family: 'Source Sans Pro', sans-serif;
}

.previewRelease {
  padding: 20px;
  border: 1px solid #D794AF;
  border-radius: 4px;
}
.dropdown-content {display: none;}
.dropdown-content, .previewRelease {
  margin-top: 15px;
  background-color: #F6EDF9;
  font-family: 'Source Sans Pro', sans-serif;
  color: #333;
  transition: all 0.3s ease;
}

.dropdown-content p, .previewRelease p, #whatsNext p {
padding-bottom:20px;
}

/* Multicolour gradient heading (reddy orange to forest green) */
h3 {
  font-size: 2em;
  background: linear-gradient(90deg, #D94D1A, #FFAA00, #228B22); /* Reddy orange to forest green */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.1em;
  text-align: center;
  font-weight: 700;
  font-family: 'Source Sans Pro', sans-serif;
}

/* Subtitle under h3 — simple, formal, slightly smaller */
h4 {
  font-size: 1.2em;
  font-weight: 700;
  color: #444;
  margin-top: 0;
  text-align: center;
  font-family: 'Source Sans Pro', sans-serif;
}

/* Quoted block with padding and centered text */
h5 {
  font-size: 1.1em;
  font-weight: 400;
  font-style: italic;
  text-align: center;
  margin: 30px auto;
  padding: 20px;
  max-width: 600px;
  background-color: #f7f7f7;
  border-left: 5px solid #D794AF;
  color: #333;
  font-family: 'Source Sans Pro', sans-serif;
}

/* Emphasize attribution within quote */
h5 strong {
  display: block;
  margin-top: 10px;
  font-weight: 600;
  font-style: normal;
  color: #633C94;
}

#bandTour {
	background-color:#633C94;
	padding:10px;
	margin:0px;
	margin-bottom:20px;
	-webkit-transition-duration: 0.4s; /* Safari */
	pointer: cursor;
}

#bandTourText {
  background: linear-gradient(90deg, #D94D1A, #FFAA00, #228B22); /* Reddy orange to forest green */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sheen-text {
  position: relative;
  display: inline-block;
  font-size: 1.5rem;
  text-align: center;
  color: #000;
  background: #D794AF;
  padding: 0.5em 1.5em;
  overflow: hidden;
  border-radius: 4px;
}

.sheen-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  animation: sheen 5s infinite;
}

@keyframes sheen {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

.gradient-text {
  font-weight: 500;
  background: linear-gradient(to right, #4B014E, #9B6BA0); /* dark purple to lilac */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

@media (max-width: 768px) {
	.logotext {
		font-size: 3.2em;
		word-spacing: 0.3em;
	}
	.row {
		grid-template-columns: 1fr;
	}
	.image, .text {
		padding:0px auto 0px auto;
	}
	.image img {
		max-width: 65%;
	}
	#sleeve {
		max-width: 75%;}
}
@media (min-width: 768px) {
	.text {
	padding-right:25%;
	}
}