/* links no decoration */
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
a:-webkit-any-link { color: inherit; }
a lin:focus-visible {
    outline: none;
}
body {
	font-family: 'League Spartan', sans-serif;
}
/* Index Style */
#indexBody {
	text-align: center;
	padding: 30px;
	margin: 0;
	overflow: hidden;
	align-items: center;
	height: 100vh;
      background: linear-gradient(45deg, #eacffc, #e0bcf7, #c4e2ff, #afc2fa);
      background-size: 400% 400%;
      animation: gradientAnimation 15s infinite;

	
}
  .p-b-30 {
padding-bottom: 30px;
}
 canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

#indexBody h1 {
	font-size: 4em;

}
#indexBody .title {
	/*
		height: 100px;
		width: 600px;
	*/
	max-width: 70vw;
	filter: drop-shadow(2px 4px 6px black);
}
#indexBody .ticket {
	/*
	height: 170px;
	width: 500px;
	*/
	max-width: 70vw;
	margin: 30px auto;
	filter: drop-shadow(2px 4px 6px black);

}
#indexBody img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}


#indexBody #enter {
	height: 300px;
	width: 300px;
	border-radius: 50%;
	background-color: #fa56b7;
	margin: auto;
	color: white;
	text-align: center;
	animation: circle linear infinite 3s;
	vertical-align: middle;
}
@keyframes circle {
	0% {
		height: 300px;
		width: 300px;
	}
	50% {
		height: 400px;
		width: 400px;
	}
	100% {
		height: 300px;
		width: 300px;
	}
}
/* Menu Style */
#menuBody {
	background: linear-gradient(45deg, #ffef73, #ff8c00, #ff69b4, #4b0082);
	background-size: 400% 400%;
    	animation: gradientAnimation 10s infinite;
    	text-align: center;
}
.menuBg {
	color: white;
  text-shadow: 15px 15px #fa56b7;
  font-weight: 700;
  font-size: 20em;
}
.menuOuter {
	margin: auto;
}
/* Tent Cards */
.tentCard {
	padding: 20px 20px 60px 20px;	
	-webkit-box-shadow: 10px 10px 10px 0px rgba(40, 40, 40, 0.7);
	box-shadow: 10px 10px 10px 0px rgba(40, 40, 40, 0.7);
	display: inline-block;
	background-color: #fcedfc;
margin: 15px;

}
.tentPicCard {
	height: 350px;
	width: 300px;
}

/* photoCards */
.photoCard {
	padding: 20px 20px 12px 20px;	
	-webkit-box-shadow: 10px 10px 10px 0px rgba(40, 40, 40, 0.7);
	box-shadow: 10px 10px 10px 0px rgba(40, 40, 40, 0.7);
	display: inline-block;
	background-color: #faf9f7;
	cursor: pointer;
}
.pictureCard {
	height: 400px;
	width: 350px;
}
.textCard {
	padding: 20px;
	text-align: center;
	font-size: 2em;
}
#card1 {
	transform: rotate(-10deg);
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
}
#card1:hover {
	transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
}
#card2 {
	transform: rotate(-5deg);
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
}
#card2:hover {
	transform: rotate(-8deg);
	-webkit-transform: rotate(-8deg);
}
#card3 {
	transform: rotate(7deg);
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
}
#card3:hover {
	transform: rotate(13deg);
	-webkit-transform: rotate(13deg);
}
#card4 {
	transform: rotate(12deg);
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
}
#card4:hover {
	transform: rotate(18deg);
	-webkit-transform: rotate(18deg);
}
#countdown {
	font-size: 4em;
	display: inline-block;
	padding: 15px 30px 15px 30px;
	border-radius: 15px;
	margin: 5px;
	background-color: #fa56b7;
	color: white;
	font-weight: 600;
	filter: drop-shadow(2px 4px 6px black);
}
/* Accomodation Style */
#accommodationBody {
	margin: 0;
	padding: 0;
}
/* Split the screen in half */
.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}
.left {
  left: 0;
  background-size: cover;
  background-color: #c7acfd;
  color: white;
}
.left h1 {
	font-size: 9em;
}
.right {
  right: 0;
  background-size: cover;
  background-color: #fb551b;

  color: white;
}
.right h1 {
	font-size: 9em;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  -webkit-display: flex;
  -ms-display: flex;
  display: flex;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
.stayLeft {
	display: inline-block;
}
.stayRight {
	display: inline-block;
	max-width: 500px;
	vertical-align: top;
}
.centered h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}
/* Dress Code Style */
#dressCodeBody {
	color: white;
	text-align: left;
	background-color: #fa56b7;
	animation: fadeFromPink 4s;
	padding: 30px;
}
#dressCodeBody h1 {
	font-size: 11em;
	margin: 0;
}
#dressCodeBody p {
	font-size: 2em;
}
@keyframes fadeFromPink {
	0% {
		color: #fa56b7;
	}
	100% {
		color: white;
	}
}
#travelBody  {
  text-align: center;
  margin: 0;
  background-color: #fce9bd;            
}

@media screen and (min-width: 887px) {
	#travelBody {
		text-align: left;
	}
}
#travelBody h1 {
	font-size: 4em;
	padding: 10px;
	background-color: black;
	color: white;
	text-align: center;
   box-shadow: -2px 3px 0 red, 2px -3px 0 #fb9111;
}
@media screen and (min-width:767px) {
	#travelBody h1 {
		font-size: 5em;
	}
}
.m-b-0 {
	margin-bottom: 0;
}
.m-b-10 {
margin-bottom: 10px;
}
.m-t-5 {
	margin-top: 5px;
}
#travelBody h4 {
	font-size: 2em;
}
#travelBody .travelPic {
	display: none;
}
.o-s {
text-shadow: 2px 2px #fb9111;
}
.shuttleBus {
	padding: 10px;
	background-color: #fb9111;
	color: white;
margin-bottom: 30px;
box-shadow: 5px 5px 0 red;

}
.travelPic2 {
	display: block;
}
@media screen and (min-width: 0px) {
	#travelBody .travelText {
		padding-left: 30px;
	}
}
@media screen and (min-width: 1064px) {
	#travelBody .travelPic {
	display: inline-block;
	max-height: 99.5vh;
	}
	.travelPic2 {
	display: none;
}
	#travelBody .travelText {
    padding-left: 0;
  }
}
@media screen and (min-width: 1156px) {
	#travelBody .travelText {
    padding-left: 90px;
  }
}
#travelBody .travelText {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 30px;
	max-width: 90%;
}

@media screen and (min-width: 1064px) {
	#travelBody .travelText {
		max-width: 50%;
}
}
#travelBody .container {
	font-weight: 700;
}
#travelBody .w3w {
  -webkit-display: flex;
  -ms-display: flex;
  display: flex;
}
#travelBody .w3w span {
	font-size: 1.5em;
  font-family: monospace;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
   /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  overflow: hidden;
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}   
.quarry {
	background-color: red;
font-size: 2em;
color: white;
display: inline-block;
padding: 5px;
}

.stack {

  display: grid;
  grid-template-columns: 1fr;
}
.stack span {
  grid-row-start: 1;
  grid-column-start: 1;
  font-size: 5rem;
  --stack-height: calc(100% / var(--stacks) - 1px);
  --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
  --clip-top: calc(var(--stack-height) * var(--index));
  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
  clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
  animation: stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
}
.stack span:nth-child(odd) { --glitch-translate: 8px; }
.stack span:nth-child(even) { --glitch-translate: -8px; }
@keyframes stack {
  0% {
    opacity: 0;
    transform: translateX(-50%);
    text-shadow: -2px 3px 0 red, 2px -3px 0 #fb9111;
  };
  60% {
    opacity: 0.5;
    transform: translateX(50%);
  }
  80% {
    transform: none;
    opacity: 1;
    text-shadow: 2px -3px 0 red, -2px 3px 0 #fb9111;
  }
  100% {
    text-shadow: none;
  }
}
@keyframes glitch {
  0% {
    text-shadow: -2px 3px 0 red, 2px -3px 0 #fb9111;
    transform: translate(var(--glitch-translate));
  }
  2% {
    text-shadow: 2px -3px 0 red, -2px 3px 0 #fb9111;
  }
  4%, 100% {  text-shadow: none; transform: none; }
}
/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #fb9111 }
}
/* Stay Style */
#stayBody {

	text-align: center;
	padding: 30px;
	margin: 0;
	overflow-x: hidden;
	align-items: center;

      background: linear-gradient(45deg, #380140, #200124, #29012e, #2f0f33);
      background-size: 400% 400%;
      animation: gradientAnimation 15s infinite;
}
#stayBody h1 {
	font-size: 7em;
	color: white;
	margin: 50px 0 0 0;
	font-family: 'Dawning of a New Day';
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;





}
#stayBody .box h1 {
	margin: 0;
	font-size: 5em;
}
#stayBody h2 {
	font-size: 5em;
	color: #fb9111;
  text-shadow: 3px 3px #fb551b;
  margin:0 0 35px 0;

}
@keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}
#stayBody .row .box {
	padding: 15px;
	height: 400px;
	width: 575px;
	background-size: cover;
	margin: 50px auto;	
	text-align: center;
	overflow: hidden;
	box-shadow: rgba(0, 0, 0, 0.6) 0px 30px 108px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
	display: block;
}
#stayBody .box a {
	height: 100%;
	width: 100%;
	display: block;

}
#stayBody  h3 {
	color: white;
	text-shadow: #FC0 1px 0 10px;
	margin-bottom: 15px;
	padding: 10px;
	font-size: 3em;
	}
#cornmill {
	background-image: url("images/the-cornmill.png");
}
#king {
	background-image: url("images/kings-head.jpg");
}
#moors {
	background-image: url("images/moors-inn.jpg");
}
#swan {
	background-image: url("images/white-swan.jpg");
}
#burnley {
	background-image: url("images/burnley-house.jpg");
}
#crown {
	background-image: url("images/crown-square.png");
}
#stayBody {
	margin: 0;

  background-size: cover;
}
/* Camping Style */
#campingBody {
	color: white;
  
	text-align: center;
	padding: 30px 90px;
	margin: 0;
	overflow-x: hidden;
	align-items: center;
	height: 100vh;
      background: linear-gradient(45deg, #380140, #200124, #29012e, #2f0f33);
      background-size: 400% 400%;
      animation: gradientAnimation 15s infinite;
}


@keyframes gradientAnimation {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

#campingBody h1 {
	font-family: 'Agbalumo';
	color: #fb9111;
	margin: 0 0 10px 0;
	text-align: center;
	font-size: 10em;
	line-height: 1em
}
#campingBody h2 {
	font-family: 'Agbalumo';
	color: #fb9111;
	margin: 0 0 20px 0;
	text-align: center;
	font-size: 4em;
	line-height: 1em
}
#campingBody p {
	text-align: center;
	margin: 0;
	font-size: 2em;
line-height: 40px;
	
}



#campingBody .end {
	padding-bottom: 30px;
}
/* Menu Return Style */
.menuReturn {
	position: absolute;
	top: 50px;
	right: 150px;
}
.photoIcon {
	background-color: rgba(0, 0, 0, 0.4);
	height: 70px;
	width: 70px;
	border-top: solid white 10px;
	border-right: solid white 10px;
	border-bottom: solid white 40px;
	border-left: solid white 10px;
	display: inline-block;
	position: absolute;
	transition-duration: 0.3s;
	cursor: pointer;
}
#photoIcon1 {
	z-index: 1;
	transform: rotate(-6deg);
}
.menuReturn:hover #photoIcon1 {
	left: -40px;
	transform: rotate(-18deg);
	margin-top: 3px;
}
#photoIcon2 {
	z-index: 10;
	transform: rotate(-4deg);
}
.menuReturn:hover #photoIcon2 {
	left: -30px;
	transform: rotate(-12deg);
}
#photoIcon3 {
	z-index: 20;
	transform: rotate(-2deg);
}
.menuReturn:hover #photoIcon3 {
	left: -20px;
	transform: rotate(-6deg);
}
#photoIcon4 {
	z-index: 30;
	transform: rotate(0deg);
}
.menuReturn:hover #photoIcon4 {
	transform: rotate(-6deg);
}

#rsvpBody {
	background-color: #fa56b7;
	color: #fb9111;
	text-align: center;
}
#rsvpBody h1 {font-size: 6em; margin-bottom: 0;}

.form-submit-button {
	background-color: orange;
}