@font-face {
  font-family: "rox";
  src: url("Roxborough CF.ttf");
}

:root{
	--fjalla: 'Fjalla One', Helvetica,Arial,sans-serif;
	--nunito: 'Nunito', sans-serif;
	--nunsans: 'Nunito Sans', sans-serif;
	--roboto: 'Roboto', sans-serif;
	--rox: 'rox', 'serif';

	--body-font: var(--nunsans);
	--title-font: var(--rox);
	--cta-font: var(--nunsans);

	--gold1: #f1b842;
	--gold2: #df9606;

	--thick-black: black -2px -2px 3px, 
		black 2px 2px 3px,
		black -2px 2px 3px,
		black 2px -2px 3px;
	--thickest-black:black -3px -3px 5px, 
		black 3px 3px 5px, 
		black -3px 3px 5px, 
		black 3px -3px 5px,
		black -2px -2px 3px, 
		black 2px 2px 3px, 
		black -2px 2px 3px, 
		black 2px -2px 3px;

}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
		font-family: var(--nunsans);
		/* outline: 1px solid red; */
}

*::selection{
	background:var(--gold1);
}

body{
		min-height: 100%;
		display: flex;
		flex-direction: column;
		background: black;
}
.content{
		flex: 1 0 auto;
		color: white;
		overflow-x: hidden;
}
h1{
	font-family: var(--title-font);
}
h2{
	text-shadow: var(--thick-black);
}
header{
    background: black;
    font-size: 18px;
    width: 100%;
		position: sticky;
		top:0;
    height: 100px;
    z-index: 99;
}
.nav_bar{
    display: flex;
}
a.inline-link{
	color: var(--gold1);
	text-decoration: none;
}
header .nav_bar a{
    text-decoration: none;
    color: white;
    font-family: var(--body-font);
    letter-spacing: 0.025em;
    padding: 20px;
		font-size: 1.8rem;
		text-align: center;
		text-transform: uppercase;
}
header a:hover{
	color: var(--gold1);
	transition: all 0.25s;
}
header .button{
	margin-right: 20px;
}
.header_container{
	display: flex;
	justify-content: space-between;
	max-width: 1280px;
	margin: auto;
	height: 100%;
	align-items: center;
}
header .logo{
	text-decoration: none;
	height: 100%;
	width: 60px;
	color: white;
	font-family: var(--body-font);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 3%;
}
header .logo svg {
	fill: white;
	fill: var(--gold1)
}

.button{
	position: relative;
	display: inline-block;
	padding: 15px 33px 12px;
	border: 0;
	background: black;
	color: var(--gold1) ;
	border: var(--gold1) 2px solid;
	border-radius: 7px;
	font-size: 22px;
	font-size: 2.2rem;
	font-family: var(--cta-font);
	font-weight: 900;
	text-transform: uppercase;
	text-decoration: none;
	transition: all .2s ease-in-out;
	text-align: right;
	min-width: 180px;
	white-space: nowrap;
}

.splash-section .button:hover{
	text-shadow: none;
	transition: all .2s ease-in-out;

}
.button:hover{
	background: var(--gold1);
	color: black;
	text-shadow: none;
	border: black 2px solid;
	transition: all .2s ease-in-out;
}

section{
	background-position: center;
	background-size: cover;
	border-bottom: 2px solid #333;
}

.section-content h3{
	text-align: center;
}
section.quest-select{
	h1{
		margin: 30px auto 0; 
	}
}
.quest-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	flex-direction: row;
	align-items: stretch;
	
	.quest{
		max-width: 45%;
		padding: 20px;
		margin: 20px 0;
		border: 3px solid white;
		border-radius: 15px;
		overflow: hidden;
		flex: 1 1 40%;
		transition: all .3s ease-in-out;
		
		&:hover{
			border: 3px solid var(--gold1);
			cursor: pointer;
			.quest-image-container{
				filter: brightness(1.3);
			}
		}
		h2{
			font-family: var(--title-font);
			text-align: center;
			margin-top: 40px;
			margin-bottom: 20px;
			font-size: 2.5em;
			color: var(--gold1);
		}
		.quest-description{
			font-family: var(--body-font);
			text-align: center;
			margin-bottom: 20px;
			line-height: 2em;
			font-size: 1.2em;
			font-family: var(--body-font);
			margin: 2em 0;
		}
		.buttons-container{
			display: flex;
			justify-content: center;
			margin: 20px;
		}

		.quest-image-container{
			height: 300px;
			margin: -20px;
			overflow: hidden;
			background-position: 50% 50%;
			background-size: cover;

			transition: all .3s ease-in-out;
			filter: brightness(1);


			&.ghost{background-image: url(/smol-img/ghost3-smol.jpg);}
			&.roman{
				background-image: url(/smol-img/constantine2.jpg);
				background-position: 50% 5%;
			}
			
			img{
				max-width: 100%;
				display: none;
			}
		}
		.quest-info{
			display: flex;
			flex-wrap: wrap;
			gap: 15px;
			justify-content: center;;
			p{
				background-color: white;
				color: black;
				border-radius: 40px;
				padding: 10px;
				text-align: center;
				span{
					vertical-align: bottom;
				}
			}
		}
	}
}

article li ol{ 	padding: 0 40px; }

section.guarantee{
	background: var(--gold1);
	color: black
}
section.guarantee .section-content{
	display: flex;
	justify-content: center;
	gap: 20px;
}
section.guarantee h1{
	margin-bottom: 0;
}

section.guarantee svg {
	fill: black;
	width: 150px;
}
section.guarantee :nth-child(3){
	transform: scaleX(-1);
}

.section-content{
	max-width: 1280px;
	margin: auto;
	height: fit-content;
	padding: 60px 0;
}

footer{
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	a {
		color: white;
	}
}
.centre{text-align: center;}

section.romans{
	background-color: var(--gold1);
	color: black;
	article p{
		text-shadow: none;
	}
	.section-img{
		padding: 30px;
		min-height: unset;
		img{
			max-height: 300px;
			border: black 3px solid;
		}
	}
	.buttons-container{
		display: flex;
		justify-content: center;
	}
}
.splash-section{
	background-image: url(/smol-img/ghost\ splash2.jpg);
	min-height: 100vh;
	display: flex;
	color: #FFF;
	background-position-x: 33%;
	background-position-y: 65%;
}
#ghost .splash-section{
	background-image: url(/smol-img/ghost_splash_cropped2.jpg);
	background-position-x: 75%;
}

.splash-section h1{
	font-family: var(--title-font);
	font-weight: 300;
	text-align: center;
	margin: auto;
	margin-bottom: 28px;
	font-size: 5rem;
	text-shadow: var(--thickest-black)
}
.splash-section h3{
	font-size: 2rem;
	font-family: var(--body-font);
	margin: auto;
	text-align: center;
	margin-bottom: 30px;
	text-shadow: var(--thick-black);
}
.splash-section .button{
	text-align: center;
	display: block;
	margin: auto;
	width: fit-content;
	text-shadow:var(--thick-black);
}



section.accreds div.accred-container{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 30px;
}

#yorkMumblerContainer{
	padding: 25px;
}

#yorkMixContainer{ 
	background-color: black;
	overflow: hidden;
	padding: 25px;
}

section.accreds{
	background: repeating-linear-gradient(
		45deg,
		black,
		black 10px,
		#111 10px,
		#111 20px
	);
}
.accred-img-container{
	width: min(400px, calc(100vw - 20px));
	height: 200px;
	background: white;
	border: var(--gold1) 10px solid;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
section.moneyBack2 article{
	background: white;
	border: var(--gold1) 5px solid;
	color: black;
	padding: 50px;
	text-align: center;
}
section.moneyBack2 p{
	text-shadow: none
}

section.accreds img{
	max-width: 100%;
	padding: 15px;
}

section.moneyBack{
	position: relative;
}
section.moneyBack .section-content{
	padding: 0;
}
section.moneyBack p{
	font-size: 1.4em;
	text-align: center;
}
p.smoller{
	font-size: 1rem;
}

.quests-in-york, .about{
	background-image: url(/smol-img/samuel-ryde-hT3bzm3Us_Y-unsplash.jpg);
}
.quests-in-york h1, .about h1{
	color: var(--gold1);
	font-size: 3rem;
	padding-bottom: 30px;
}
.quests-in-york article, .about article, article{
	max-width: 550px;
	margin: auto;
}
.quests-in-york .buttons-container, .about .buttons-container{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.quests-in-york .buttons-container .button, .about .buttons-container .button{
	margin-bottom: 20px;
}

.single-button-container{
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 20px;
}
article p{
	line-height: 2em;
	font-size: 1.2em;
	font-family: var(--body-font);
	margin: 2em 0;
	text-shadow: var(--thick-black);
}


.testimonial-container{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.testimonial{
	max-width: 24%;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 15px;
}

.quote{
	width: 100%;
}
.name{
	font-style: italic;
	width: 50%;
}
.portrait img{
	max-height: 100px;
	border-radius: 100%;
}

.about .portrait img{
	float: right;
	max-height: 150px;

}


.faqs{
	background-image: url(/smol-img/smoke.jpg);
	min-height: 100vh;
}
.testimonials{
	background-image: url(/smol-img/shambles-bg.jpg);

}
section.contact{
	background-image: url(/smol-img/dark-minster.jpg);
}

section.contact a{
	margin: 20px auto;
	display: flex;
	width: fit-content;
}
section.contact a.contact{
	padding: 15px 22px;
	font-family: var(--body-font);
	font-size: 1.5rem;
	align-items: center;
	justify-content: center;
	text-transform: unset;
}

section h1{
	font-size: 3rem;
	text-align: center;
	margin-bottom: 60px;
}
section.contact a.contact svg{
	fill:white;
	height: 3rem;
	width: 3rem;
	margin-right: 2rem;
}

section.contact a.contact:hover svg{
	fill: black;
	transition: all .2s ease-in-out;
}
section.quests{
	background-image: url(/smol-img/shambles-bg.jpg);
	min-height: 100vh;
}
section.quests h1{
	font-size: 7rem;
	font-family: var(--title-font);
	text-align: center;
	margin: auto;
	letter-spacing: 2px;
	margin-bottom: 80px;
	text-transform: uppercase;
}
section.quests .quests-container{
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-around;
}
section.quests .quest-item{
	padding: 30px;
	border: var(--gold1) 2px solid;
	border-radius: 5px;
	max-width: 900px;
	display: flex;
	background-color: black;
	flex-direction: column;
}
section.quests .quest-item .header{
	margin: -30px;
	margin-bottom: 0;
	background-position: center;
	background-size:100%;
	min-height: 200px;
	display: flex;
	justify-content: start;
	align-items: end;
}
section.quests h3{
	font-size: 2rem;
	font-family: var(--title-font);
	text-align: center;
	padding: 20px;
	text-shadow: var(--thick-black);
	letter-spacing: 0.1em;
}

section.email-signup{
	background: var(--gold1);
}

section.email-signup .ml-embedded h4{
	font-family: var(--title-font) !important;
	font-size: 4rem !important; 
	text-align: center !important;
	font-weight: bold !important;
}

section.email-signup .ml-embedded p{
	text-align: center !important;
	font-size: 1.1rem !important; 
	font-family: var(--body-font) !important;
}


section.quests .quest-item.ghosts .header{
	background-image:  url(smol-img/ghost-lan-gao-m3pfOQKgVAM-unsplash.jpg);
}
section.quests .quest-item.wizards .header{
	background-image:  url(smol-img/wizard-larm-rmah-sMs2M-yiqCY-unsplash.jpg);
}
section.quests .quest-item.cats .header{
	background-image:  url(smol-img/cat-mathias-reding-SBIbbqH2olU-unsplash.jpg);
}
section.quests .quest-item p.description{
	font-family: var(--body-font);
	font-size: 1.2em;
	padding-top: 30px;
	margin-bottom: 20px;
	line-height: 2em;
	letter-spacing: 0.07em;
}
section.quests .quest-item .stats{
	font-family: var(--body-font);
	padding-top: 30px;
	margin-bottom: 20px;
	line-height: 2em;
	letter-spacing: 0.07em;
}
.stats .attr{
	font-weight: bold;
}
.stats .challenge{
	vertical-align: text-bottom;
}
.stats svg{
	fill: white;
	height: 2rem;
	width: 2rem;
}
.stats div{
	white-space: nowrap;
}
.quest-item .button{
	text-align: center;
	margin: auto;
	margin-top: 50px;
	margin-bottom: 50px;
}

.quest-item .button.disabled{
	border: none;
	font-size: 2em;
}

.quiero{
	opacity: 0;
	font-size: 0.1;
}

footer{
	color: white;
	background-color: black;
	position: relative;
	flex-shrink: 0;
	min-height: 60px;
}
.footer_content{
		max-width:1280px;
		margin: auto;
}

.disabled {
	cursor: no-drop;
	pointer-events: none;
	user-select: none;
}


.socials-container{
	display: flex;
	justify-content: center;
	gap: 25px;
}

section.contact a.social{
	margin: 0;
}

a.social svg{
	fill: white;
	height: 5rem;
	width: 5rem;
	transition: fill 0.4s;
}

a.social svg:hover{
	fill: var(--gold1);
}


.thirds{
	display: flex;
	flex-direction: row;
}
.thirds > div{
	width: 35%;
}
.thirds .bigger{
	width: 65%;
}
.section-img{
	display: flex;
	justify-content: center;
	align-items: center;
}
.thirds .section-img img{
	max-width: 100%;
	margin: 50px 0;
	max-height: 700px;
}

.thirds article{
	max-width: 700px;
}

.thirds article p, .thirds article h2{
	text-align: center;
}

.thirds .section-img.single-polaroid{
	padding: 20px;
}

.how-it-works section:nth-child(2){ background-image: url(smol-img/tunnel-bg.jpg); }
.how-it-works section:nth-child(3){ background-image: url(smol-img/dark-minster.jpg); }
.how-it-works section:nth-child(4){ background-image: url(smol-img/samuel-ryde-hT3bzm3Us_Y-unsplash.jpg); }
.how-it-works section:nth-child(5){ background-image: url(smol-img/shambles-bg.jpg); }
.how-it-works section:nth-child(6){ background-image: url(smol-img/smoke.jpg); }

a.inline-link{
	color: var(--gold1);
	text-decoration: none;
}

.polaroid-pile{
	position: relative;
}

.polaroid{
	border: white solid 15px;
	border-bottom: white solid 50px;
	box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);
}
.polaroid-pile img.polaroid{
	position: absolute;
	max-width: 400px;
	max-height: 300px;
}
.polaroid-pile .polaroid:nth-child(1){	transform: translateX(140px) translateY(-63px) rotate(20deg);}
.polaroid-pile .polaroid:nth-child(2){	transform: translateY(-39px) translateX(-80px) rotate(-14deg); }
.polaroid-pile .polaroid:nth-child(3){	transform: translateX(-4px) translateY(158px) rotate(6deg) }

/*Accordion*/
.accordion-container{
	width: 50%;
	margin: auto;
}
.accordion {
  background-color: black;
  color: var(--gold1);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 17px;
  transition: 0.4s;
}

.accordion:nth-child(4n+2){
	background-color: #111;
}

.active, .accordion:hover {
  background-color: #222;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: black;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.panel p{
	padding: 18px 0;
	letter-spacing: 1px;
}

.splash-section .buttons-container{
	display: flex;
	gap: 10px;
}

.content.how-it-works .splash-section{
	background: rgba(0, 0, 0, 0.5);
	min-height: 80vh;
	position: relative;
}
.content.how-it-works .splash-section:after{
	background: url(smol-img/smiling-girls-york.jpg) 50% 80% / cover;
	z-index: -2;
	content: '';
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}

article.ppp p{ margin: 0;}
article h2 { margin: 20px 0;}


/* laptop */
@media only screen and (max-width:1279px) {
	body{	
		font-size: 14px;
	}
	header .nav_bar a{
		font-size: 1.3rem;
	}
	.stats svg{
		height: 1.3rem;
    width: 1.3rem;
	}
	.quest-item .button{
		padding: 10px;
	}
	.testimonial{
		max-width: 49%;
	}

	.thirds{
		flex-direction: column;
	}
	.thirds > div.bigger, .thirds > div {
		width: 100%;
		padding: 20px;
	}
	.thirds .section-img{
		order: 2;
		min-height: 500px;
	}
	.thirds .section-img img{
		max-height: 500px;
		margin: 0;
	}
	.thirds .polaroid-pile img.polaroid{
		max-height: 300px;
	}
	.polaroid-pile .polaroid:nth-child(1){	transform: translateX(140px) translateY(-70px) rotate(20deg);}
	.polaroid-pile .polaroid:nth-child(2){	transform: translateY(-80px) translateX(-80px) rotate(-14deg); }
	.polaroid-pile .polaroid:nth-child(3){	transform: translateX(-4px) translateY(58px) rotate(6deg) }

}

/* tablet */
@media only screen and (max-width:959px) {

	.nav_bar a:nth-child(1){
		display: none;
	}
	header .nav_bar a{
		font-size: 1.1rem;
	}
	.quests-container{
		flex-wrap: wrap;
	}
	section.quests .quest-item{
		width: 90%;
		margin-bottom: 50px;
	}

	header{    
		height: 130px;
	}
	header .logo {
		margin: 5%;
		width: 50px;
    font-size: 0.8rem;
	}

	header a.button{
		margin-right: 20px;
    font-size: 1.2rem;
    padding: 15px 20px 12px;
    text-align: center;
		min-width: unset;
		top: 20px;
	}

	article.ppp { 		padding: 20px; 	}
	section.quests h1 {
		font-size: 4rem;
    margin-bottom: 30px;
	}
	.accordion-container{
		width: 100%;
	}
	.quest-item.ghosts{
		order: -1;
	}

	.splash-section .buttons-container{
		flex-direction: column;
	}

	section.quest-select{
		padding: 10px;
	}
	.quest-container{
		flex-direction: column;
		.quest{
			max-width: 100%;
			h2{
				line-height: 1.2em;
			}
		}
	}
}


/* mobile */
/* @media only screen and (max-width:479px) { */
@media only screen and (max-width:575px) {

	section.contact a.contact {
		font-size: 1.1rem;
	}
	section.contact a.contact svg {
    height: 1.7rem;
    width: 1.7rem;
    margin-right: 1.2rem;
	}
	.nav_bar{
		display: none;
	}
	section.guarantee svg{
		display: none;
	}
	article li ol{ 	padding: 0 40px; }
	#parchment, #contain{
		padding: 2em;
	}
	.nav_bar{
    flex-grow: 1;
    justify-content: space-evenly;
	}

	.splash-section h1{
		font-size: 3rem;
	}
	.splash-section a.cta{
		font-size: 1.5rem;
	}
	.splash-section h3{
		font-size: 1.6rem;
	}
	.accreds h1{
		font-size: 2rem;
	}

	article { 		padding: 10px; 	}

	.testimonial{
		max-width: 100%;
	}
	a.social svg {
    height: 3rem;
    width: 3rem;
	}
	.logo-text{
		display: none;
	}
	header {
    height: 75px;
	}
	.thirds .section-img{
		padding: 0;
	}

}