@font-face {
      font-family: 'THEBOLDFONT';
      src: url('the_bold_font/THEBOLDFONT-FREEVERSION.otf') format('opentype'),
           url('the_bold_font/THEBOLDFONT-FREEVERSION.ttf') format('truetype');
      /* You only need to list each file once.
         The browser will choose the first format it supports. */
      font-weight: normal;
      font-style: normal;
    }

* {
	margin:0;
	padding:0;
}

html, body {
  height: 100%;
}

body {
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}	

#login {
	background: #000;
	height:100vh;
	position:relative;
}	

form {
	display:block;
	margin:2rem auto;
	text-align:center;
}	




/* home */




#intro::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: translateZ(0); /* Safari compositing fix */
  
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;        /* fallback */
  height: 100dvh;
}


#intro {
  clip-path: inset(0);
  min-height: 100vh;    /* fallback */
  min-height: 100lvh;   /* modern iOS/Chrome: tracks address bar */
}

@supports (-webkit-touch-callout: none) {

  #intro {
    min-height: -webkit-fill-available;
  }

 
  #intro::before {
    height: -webkit-fill-available;
  }
}

/* Assign images */


#intro::before {
  background-image: url("img/parade3.webp");
}
@media(max-width:600px){
	
	#intro::before {
	  background-image: url("img/parade.mobile.webp");
	}
}


#intro > * {
  position: relative;
  z-index: 1;
}



#home.login {
	background-image:none;
	background: #000;
}	

/* home */ 

#home { 
	background:url("img/Bethany.cover.bg.webp") #000; 
	background-attachment: fixed; 
	background-size:cover; 
	height:100vh; position:relative; 
}

@supports (-webkit-touch-callout: none) {
  #home {
    background-attachment: scroll;
  }
}


@media (max-width:800px){ 
	#home { 
		background-image:url("img/Bethany.cover.bg.800.webp"); 
	}
}

#home.login input[type='password']{
	padding:0px 10px;
	border-radius:5px;
	height:35px;
	line-height:35px; 
}	

#home.login input[type='submit']{
	padding:0px 10px;
	border-radius:5px;
	height:40px;
	line-height:40px;
	width:80px;
	line-height:35px; 
	background:#b11f24;
	font-weight:bold;
	text-align:center;
	border:solid 1px #b11f24;
}
	

#home nav {
	position:absolute;
	top:1%;
	right:1%;
	z-index:2;
}	

#home nav a {
	color:white;
	text-decoration:none;
	display:inline-block;
	border-right:solid 1px white;
	padding-right:5px;
	margin-right:5px;
	line-height:100%;
}	

#home nav a:last-child {
	border:0;
}	

#bethany {
	background:url("img/bethany.avif") center bottom no-repeat;
	background-size:contain;
	height:73vh;
	width:90%;
	position:absolute;
	bottom:0;
	left:5%;
}	

h1,h2,h3,h4 {
  font-family: "THEBOLDFONT", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom:1rem;
}

p {
	margin-bottom:1rem;
}

.red {
	color:#b11f24;
}	

#home h1 {
	text-align:center;
	color:white;
	font-size:14vh;
	padding-top:3%;
	text-shadow: 5px 5px 20px #000;
}	

#home h1 small, #home h1 strong {
	display:block;
	line-height:100%;
}	

#home h1 small {
	font-size:80%;
}	

#home h1 strong {
	color:#fff600;
}	

h1 {
	font-size:2rem;
}	

h3 {
	font-weight:normal;
	font-size:1.25rem;
}	

#intro {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #000;
}

.inner {
	width:80%;
	max-width:900px;
	padding:2rem;
	font-size:1.5rem;
	color:black;
	margin:40px auto 40px;
}	

#intro .inner {
	margin:100vh auto 70px;
	background:rgba(256,256,256,.9);
	color:black;
}


#synopsis {
	background:url("img/blood.jpg");
	background-size:cover;
	padding:4rem 0 4rem;
}	

#synopsis .inner {
	margin:0 auto;
	color:white;
	padding:1rem 2rem 2rem;
	background: rgba(155,24,0,.4)
}	

#synopsis .inner h2 {
	margin-top:6rem;
}	

#synopsis .inner h2:first-child {
	margin-top:2rem;
}	

@media(max-width:600px) {
	#synopsis {
		padding:0;
	}	
}	
	
.textgroup {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.textgroup.fade-in {
  opacity: 1;
  transform: translateY(0);
}

#thieves {
	background:url(img/thieves.webp) #9b1800;
	background-size:cover;
	aspect-ratio: 16 / 9;
	position:relative;
	padding-top:40px;
}

#thieves .inner{
	margin:0;
	color:white;
	margin: 0 auto 40px;
	max-width:90%;
}

#thieves .inner h1,
#thieves .inner blockquote {
	text-shadow:1px 1px 5px #000;
}	

@media(max-width:600px){
	#thieves {
		background:url(img/thieves.mobile.webp) #000;
		aspect-ratio: 1 / 1;
		padding-top:0px;
	    background-size: cover;
		display:flex;
		justify-content: center;   /* horizontal center */
		align-items: flex-end;     /* keep bottom alignment */
	}

	#thieves .inner {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		padding:0;
		margin:0;
	}
	
	#thieves blockquote {
		font-size:1.25rem;
	}	


}	


/* Characters */

#characters {
	background:#666;
	color:white;
}	

#characters h1 {
	text-align:center;
}	

#characters h3 {
	color:#b11f24;
}

#characters .inner {
	margin:0 auto;
	padding:2rem 0;
	color:white;
	max-width:1400px;
	width:90%;
}	

#characters .inner .grid
{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:2rem;
}	

#characters .character {
	background:black;
	padding:3rem;
	display:flex;
	gap:2rem;
	box-shadow:10px 10px 10px rgba(0,0,0,.5);
	font-size:1.25rem;
	margin-bottom:2rem;
}	

#characters .character img {
	height:300px;
	background:#333;
}	

#characters .character figcaption {
	color:#b11f24;
	font-size:1rem;
}	

@media (max-width: 1250px){
	#characters .inner .grid {
		display:grid;
		grid-template-columns: 1fr;
		gap:2rem;
	}	
}

@media (max-width: 768px){
	#characters .character  {
		display:block;
		box-shadow:none;
		padding:2rem;
	}
	
	#characters figure {
		text-align: center;
	}
	
	#characters h3 {
		color: #b11f24;
		text-align: center;
		margin-top: 1.5rem;
	}
	
	
}	

/* Comparables */

#comparables {
	text-align:center;
	background:black;
	color:white;
}	

#comparables .inner {
	margin:0 auto;
	padding:4rem 0;
}	

#comparables .grid {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:1rem;
}	

#comparables .grid img {
	height:30vw;
	max-height:350px;
}	

#comparables figcaption {
    font-family: "Jost", sans-serif;
	font-weight:normal;
	color:white;
	font-size:1.25rem;
}

#comparables h2 {
	margin-bottom:4rem;
	color:white;
}	

@media(max-width: 768px){
	#comparables .grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	
	#comparables .grid img {
		height: auto;
		max-width: 100%;
	}
}



.story-panel {
	position:relative;
}	

.story-panel .inner {
	max-width:90%;
	margin-top:0;
}	

.story-panel .inner h1 {
	margin:0;
}	

.story-panel .inner blockquote:before {
    content: '"';
    font-size: 4rem;
    line-height: 1rem;
    position: absolute;
    top: 1rem;
	left:-1rem;
}

.story-panel .inner blockquote {
	padding-left:1rem;
	left:1rem;
}	

@media(max-width: 600px){
	
	.story-panel .inner  {
		text-align:center;
	}
	
	.story-panel .inner h1 {
		margin:0;
		font-size:1.5rem;
	}
	
	.story-panel .inner blockquote {
		padding-left:0;
		left:0rem;
		position:relative;
		font-style:italic;
	}	
	
	.story-panel .inner blockquote:before {
		content:"";
		font-size: 1.25em;
		line-height: 100%;
		position: static; 
		top: 0rem;
		left:0rem;
	}
	  	
	  	
	#madness.story-panel {
		aspect-ratio: 3 / 2;
	}
	
	#madness.story-panel .inner  {
		text-align:left;
		padding-bottom:0;
		margin-bottom:0;
		align-self: flex-end;
	}
}	

/* Family */
	
	#family {
		background:url(img/family.webp) #2b321e;
		background-size:cover;
		aspect-ratio: 16 / 9;
		position:relative;
		padding-top:40px;
	}

	#family .inner{
		margin:0;
		color:white;
		margin: 0 auto 40px;
		max-width:90%;
	}

	#family .inner h1,
	#family .inner blockquote {
		text-shadow:1px 1px 5px #000;
	}	


	
	@media(max-width:1000px){
		#family {
		  background: url(img/family.webp) #2b321e;
		  background-size: cover;
		  aspect-ratio: 3 / 2;
		  display: flex;
		  justify-content: center;   /* horizontal centering */
		  align-items: flex-end;     /* bottom alignment */
		}	
		
		#family .inner {
			padding:0;
		}	
	}	
	
	@media(max-width:600px){
		#family {
		  background: url(img/family.mobile.webp) #2b321e;
		  background-size: cover;
		  aspect-ratio: 1 / 1;
		
		}	
		
		
		#family .inner {
			text-align:center;
			padding:0;
		}
		#family br {
			display:none;
		}	
		
		#family blockquote {
			padding:0;
			margin:0;
			font-size:1.25rem;
		}	
		
	}	
	
/* Bethany Confrontation */	

	#confrontation {
		background:url(img/bethany.confrontation.webp) #2b321e;
		background-size:cover;
		aspect-ratio: 16 / 9;
		position:relative;
		padding-top:40px;
	}

	#confrontation .inner{
		margin:0;
		color:white;
		margin: 0 auto 40px;
		max-width:90%;
		text-align:right;
	}

	#confrontation .inner h1,
	#confrontation .inner blockquote {
		text-shadow:1px 1px 5px #000;
	}	
	
	#confrontation .inner blockquote {
		float:right;
	}	

	
	
	@media(max-width:1000px){
		#confrontation {
		  aspect-ratio: 3 / 2;
		  display: flex;
		  justify-content: right;   
		  align-items: flex-end; 
		}	
		
		#confrontation .inner { 
		 text-align: right; 
		}

		#confrontation .inner blockquote {
			float: none;
			position: relative;
			margin: 0 auto;
			max-width: 90%;
			padding: 0;
			margin: 0;
			float: right;
		}
		  
	}	
	
	@media(max-width:600px){
		#confrontation {
		  background:url(img/bethany.confrontation.mobile.webp) #2b321e;
		  background-size:cover;
		  aspect-ratio: 5 /4;
		  display: flex;
		  justify-content: center;   
		  align-items: flex-end; 
		}	
		
	
		
		#confrontation .inner {
			text-align:center;
			padding:0;
			margin:0 0 2rem;
		}
		#confrontation br {
			display:none;
		}	
		
		#confrontation .inner blockquote {
			display: inline-block;
			position: relative;
			text-align: left;
			margin: 0 auto;
			max-width: 90%;
			font-size: 1.25rem;
		  }
	}
	
/* Madness */
	
	#madness {
		background:url(img/madness2.webp) #000;
		background-size:cover;
		aspect-ratio: 16 / 9;
		position:relative;
		padding-top:40px;
	}

	#madness .inner{
		margin:0;
		color:white;
		margin: 0 auto 40px;
		max-width:90%;
	}

	#madness .inner h1,
	#madness .inner blockquote {
		text-shadow:1px 1px 5px #000;
	}	
	
	@media (max-width:600px){
		#madness {
			display:flex;
			align-items: flex-end;
			background:url(img/madness.mobile.webp) #000;
			background-size:cover;
		}
	}	
		
	
/* */	


/* young bethany */
	
	#young_bethany {
		background:url(img/young_bethany.webp) #2b321e center;
		background-size:cover;
		aspect-ratio: 16 / 9;
		position:relative;
		padding-top:40px;
	}

	#young_bethany .inner{
		margin:0;
		color:white;
		margin: 0 auto 40px;
		max-width:90%;
	}

	#young_bethany .inner h1,
	#young_bethany .inner blockquote {
		text-shadow:1px 1px 5px #000;
	}	


	@media(max-width:1000px){
		
		#young_bethany {
		  position: relative;
		  display: flex;
		  justify-content: center;   /* horizontal center */
		  align-items: flex-end;     /* bottom align */
		}
		
		#young_bethany .inner {
		  width: fit-content;
		  max-width: 900px;
		  padding: 2rem;
		  margin-bottom: 40px;  /* spacing from bottom */
		  color: white;
		}
			
	}	
	
	@media(max-width:600px){
		
		#young_bethany {
			background:url(img/young_bethany.mobile.webp) #2b321e center;
			background-size:cover;
			aspect-ratio: 1 / 1; 
			position:relative;
			padding-top:40px;
		}
		
		#young_bethany .inner  {
			padding:0;
		}	
		
		#young_bethany .inner blockquote {
			margin:0;
			font-size:1.25rem;
		}
	
	}	
	
/* obeah man */	

#obeahman {
	background: #9b1800;
	padding:5vh;
	position:relative;
}	

#obeahman .inner {
	padding:0;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	color:white;
	gap:4rem;
	max-width:90%;
}	

#obeahman img {
	max-height:90vh;
}	

#obeahman h1 {
	color:white;
	margin-bottom:10rem;
	
}	

#obeahman .imageHolder {
	display:none;
}	

blockquote {
	position:relative;
}	


#intro .imageHolder {
	display:none;
}	

@media(max-width:1200px){
	#obeahman .inner {
		flex-direction:column;	
		align-items: center;
	} 
	
	#obeahman h1 {
		margin-bottom: 2rem;
	}
}	

@media(max-width:600px){
	#obeahman .inner {
		display: block;	
	} 
	
	#obeahman {
		padding: 2vh 0;
		position:relative;
	}
	
	#obeahman img {
		width: 100%;
	}
	

	
	blockquote {
		font-size: 1.5rem;
		margin-bottom:2rem;
	}
	
	
	

	
	#intro {
		/*background-image:url('img/parade.mobile.webp');*/
		/*background-size:cover;*/
		/*height:100vh;*/
	}	
	
	#intro .inner {
		width: 70%;
	}

	.inner {
		font-size: 1.25rem;
	}	
	
	
	

}

#roaches {
	color:white;
	width:100%;
	
	background:url("img/roaches.webp") bottom;
	background-size:cover;
	/*background-attachment:fixed;*/
	aspect-ratio: 16 / 9;
}	

#roaches .inner {
	max-width:90%;
}	

#roaches h1 {
	color:white;
}	

#roaches blockquote {
	color:white;
}	

@media (max-width:1000px){
	#roaches {
		aspect-ratio: 3 / 2;
	}	
}	

@media (max-width:600px){
		#roaches {
		  background:url("img/roaches.mobile.webp") bottom;
		  background-size:cover;
		  aspect-ratio: 4 /4;
		  display: flex;
		  justify-content: center;   
		  align-items: flex-end; 
		}	
		
		#roaches .inner h1 {
			text-shadow: 1px 1px 5px #000;
		}	
		
		#roaches .inner {
			text-align:center;
			padding:0;
			margin:0 0 2rem;
		}
		#roaches br {
			display:none;
		}	
		
		#roaches .inner blockquote {
			display: inline-block;
			position: relative;
			text-align: left;
			margin: 0 auto;
			max-width: 90%;
			font-size: 1.25rem;
			text-align:center;
			text-shadow: 1px 1px 5px #000;
		  }

	
}	

@media (max-width:900px){
	
	#home h1 {
		font-size:10vw;
	}	
	
	#home {
		height:auto;
		background-size:contain;
		aspect-ratio: 1.2/1;
	}	
	
}	

@media (max-width:900px){
	#home {
		height: 100vh;
		background-position: center;
		background-size: cover;
		aspect-ratio: auto;
    }
	
	#home h1 {
		font-size:11vw;
		padding-top:15%;
	}	
	
	#bethany {
		background-image: url(img/bethany.mobile.avif);
	}
	
}	

@media (max-width:800px){
	
}	

@media (max-width:400px){
	#home h1 {
		font-size:13vw;
	}
}



@media (max-aspect-ratio: 2/3){
	#home h1 {
        padding-top: 25%;
    }
}		

@media (max-aspect-ratio: 15/30){
	
	#bethany {
		
		background-size: cover;
		width: 100%;
		left: 0;
	}
	
}	

#courtroom {
		background:url(img/courtroom.webp) #9b1800;
		background-size:cover;
		aspect-ratio: 16 / 9;
		position:relative;
		padding-top:40px; 
		display:flex;
		align-items: flex-end;
	}

#courtroom .inner{
	margin:0;
	color:white;
	margin: 0 auto 40px;
	max-width:90%;
}

#courtroom .inner h1,
#courtroom .inner blockquote {
	text-shadow:1px 1px 5px #000;
}	

@media (max-width:600px){
	#courtroom {
		background:url(img/courtroom.mobile.webp) #9b1800;
		background-size:cover;
		aspect-ratio: 3 / 2;
	}	
	#courtroom .inner{
		padding:0;
		text-align:left;
	}	
}	

#contact {
	background:black;
	color:white;
}	

#contact img {
	max-height:400px;
}	

#contact .grid {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2rem;
	margin-top:2rem;
}	

#contact .inner {
	margin-top:0;
	margin-bottom:0;
	padding-top:2rem;
	padding-bottom:2rem;
	color:white;
}	

#contact h2 {
	color:#9b1800;
	text-align:center;
	margin:0;
}	

#contact a {
	font-size:1rem;
	display:inline-block;
	margin:0;
	color:#9b1800;
	text-decoration:none;
	border-bottom:dotted 1px #9b1800;
}	

#contact h3 {
	color:white;
	font-weight:bold;
	font-size:1.25rem;
	margin:10px 0 0 0;
}	
#contact h4 {
	color:white;
	font-family: "Jost", sans-serif;
	font-weight:normal;
	font-size:1.1rem;
	margin:0;
}

#contact p{
	margin:0;
}	

@media (max-width:1024px){
	#contact .grid {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 2rem;
		text-align:center;
		justify-items: center;
	}
	 #contact .grid > :last-child {
		grid-column: 1 / -1;
		justify-self: center;
	 }
}

@media (max-width:600px){
	#contact .grid {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align:center;
	}
}