@font-face {
	font-family: cafeteria;
	src: url(./../fonts/CafeteriaRegular.otf);
}

@font-face {
	font-family: zoocards;
	src: url(./../fonts/ZooCards.otf);
}

@font-face {
	font-family: zubajda;
	src: url(./../fonts/ZubajdaRg.ttf);
}

body {
	background-color: black;
	box-sizing: border-box;
}
	
	
/* 	
	flex-shrink: 0 means that an item will not shrink when the container is reduced in size
	flex-grow is the ratio of leftover space that an item grows into when there is extra space in a container 
	grow is ADDED to the width of any styled element width already applied

	flex-basis tells the math what size to treat the item when it needs to grow.
	if there is no basis, then a grow applies to the set width
	if there is a basis, the growth applies from that value, as if that is the size of the item when growing
	therefore, basis of zero will evenly apply remaining space, ignoring the fact that the item is already larger due to a styled value
	this means that basis zero with a width applied will be even assignment of remaining room PLUS styled width
*/


.background-box {
	background-image:url('./../images/background-extended-2b.jpg');
	background-color: #7a160a;
	background-size: auto 95vh;
	background-repeat: repeat-x;
	margin: 0;
}	
	
.flex-container {
	display:flex;
	margin: 0;
	padding: 0;
}

.primary-flex-container {
	flex-direction: column;	
}

.secondary-flex-container {
	width: 100%;
}
	
.left-border, .right-border {
	width:40px;
	height:120%;
	background-size: 50px auto;
	margin-top: -50px;
	padding: 0;
	background-repeat: repeat-y;
	position: fixed;
	top: 0;
}

.top-border, .bottom-border {
	height: 30px;
	background-size: auto 50px;
	flex-shrink: 0;
	margin: 0px;
	background-repeat: repeat-x;
}

.left-border {
	background-image: url('./../images/jagged-border-left.png');
	background-position: 100% 0;
	left: 0;
}

.right-border {
	background-image: url('./../images/jagged-border-right.png');
	background-position: 0 0;
	right:0;
}

.top-border {
	background-image: url('./../images/jagged-border-top.png');
	background-position: 0 100%;
}

.bottom-border {
	background-image: url('./../images/jagged-border-bottom.png');
	background-position: 0 0;
}

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

#copyright-text p {
	margin-bottom: 20px;
	color:rgb(75, 75, 75);
	padding: 0;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

.main {
	flex: 1; /* tells the container to fill all space down to the next element (grow) */
	width: 100%;
	display: flex;
	flex-direction: column;
	z-index: 50;
	position: relative;
	min-height: 90vh;
}

.btn, .placeholder {
	font-family: zubajda;
	font-size: 30px;
	
	background-image: url('./../images/button5.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: 0 0;
	min-width: 135px;

	cursor: pointer;
	display: inline-block;

	line-height: 1.3;
	text-decoration: none;
	text-align: center;

	color: #E7B85C;	
	filter: drop-shadow(0px 0px 5px #2b0106);

}

.placeholder {
	padding: 5px 5px;
}

.btn {
	padding: 5px 9px;
}

.expanding-nav .placeholder {
	
	filter: drop-shadow(0px 0px 5px #2b0106);
	display: flex;
	
	align-items: center;
	justify-content: center;
	
	width: 135px;

	/* Places the button in front of the parchment */
	position: relative;
    z-index: 150;
	
}

.placeholder:hover, .btn:hover {
	color:#FFE292;
}

/*
Doesn't work on Safari - don't know why, but it looks aweful
.btn:hover {
	filter: drop-shadow(0px 0px 5px #FFD880);
}
*/

.top-nav-bar {
	display: flex;
	align-items: center;
	padding: 0 53px;
	max-height: 110px;
}

	#signinContainer {
		flex: 0 1 auto;
		width: 150px;
		display:flex;
		margin-left: 15px;
	}

	#invisibleContainer {
		flex: 0 1 527px;
		width: 100px;
		visibility: hidden;
	}

#signinButton, #contactButton {
	align-items: center;
	position: relative;
}

.logo {
	display: block;
}

.logo a {
	display: block;
}

.logo img {
	width: 	100%;
	display: block;
	height: auto;
	max-width: inherit;
}

#contact-hut p {
	margin: 15px 30px;
}

.contact-container {
	justify-content: center;
	display: flex;
	width: 100%;
	margin-bottom: 20px;
	flex: 0 1 auto;
}

.h-navigation {
	position: relative;
	z-index: 75;
	padding: 0 53px;
	margin: 27px 0 0;
}

.middle-nav-bar, .single-nav-button {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-between;
	width: 50%;
	max-width: 850px;
}

.single-nav-button {
	width: unset;
}

.nav-container {
	position: relative;
}

.expanding-nav {
	position: relative;
	margin-right:20px;
}


.expanded-parchment {
	margin: -6px 0 0;
	overflow: hidden;
	background-image: url('./../images/parchment.png');
	background-size: 100% 100%;
	height: 0;
	width: 125px;
	transition: height 600ms;
	position:absolute;
	text-align: center;
	cursor: pointer;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
}

.expanded-parchment ul {
	list-style: none;
	padding: 8px 5px;
	margin: 0;
}

.expanded-parchment ul li {
	padding: 10px 0;
}

.expanding-nav .placeholder:hover + .expanded-parchment, .expanded-parchment:hover  {
	display:block;
	height: 270px;
}

	.expanded-parchment a {
		font-family: cafeteria;
		font-size: 24px;
		color: #a88328;
		text-decoration: none;
	}

	.expanded-parchment a:hover, a.active-page {
		color: #350000;
		text-decoration: none;
	}


/* Vertical Nav Bar */

.v-navigation {
	display:flex;
	flex-direction: column;
	margin: 0;
	padding: 0;

	transition: transform 0.25s ease-in-out;
	position: absolute;
	left: 0;
	top: -30px;
	
	width: 280px;
	height:calc(100% + 60px);
	background-image:url('./../images/background-extended-2b.jpg');
	background-color: #7a160a;
	background-size: auto 95vh;
	
	box-shadow: 7px 0 5px rgba(0, 0, 0, 0.75);
	
	overflow: hidden;
	transform: translateX(-350px); 
	
	text-align: center;
	z-index: 500;
}

.v-nav-display {
	transform: translateX(0px); 
}

.v-nav-buttons {
	height:100%;
	align-items: center;
	display:flex;
	flex-direction: column;
	/* gap: 20px; doesn't seem to work in Safari */
}


.v-nav-buttons .placeholder {
	width: 135px;
	margin-bottom: 20px;
}

.nav-active .v-navigation {
transform: translateX(0); 
}

.vertically-centered {
	height:100%;
	display:flex;
	align-items: center;
}

.displayCase {
	padding: 0 30px 25px;
	display: -webkit-flex;
	display: flex;
	flex: auto;
	justify-content: center;
	width: 95%;
}

	.displayedCard {
		background-color: #012b03;
		background-size:  100% 100%;
		background-repeat: no-repeat;
		margin-top: 10px;
		margin-left: 5px;
		margin-right: 5px;
		filter: drop-shadow(5px 5px 0 rgba(0,0,0,0.5));
		align-self: center;
	}

	.displayedCard img {
		width: 100%;
		max-height: 60vh;
	}

	/* when screen gets too small, change z-index on cards so they overlap correctly
		as screen shrinks, remove a couple from the stack
	*/
	.displayCase > .first {
		transform: rotate(-4deg);
		z-index: 15;
	}
	.displayCase > .second {
		transform: rotate(4deg);
		margin-top: 30px;
		z-index: 10;
	}
	.displayCase > .third {
		z-index: 5;
	}
	.displayCase > .fourth {
		transform: rotate(-4deg);
		z-index: 15;
	}
	.displayCase > .fifth {
		transform: rotate(5deg);
		z-index: 10;
	}


.nav-opener {
  width: 36px;
  height: 36px;
  transform: translateY(-8%);
  display: block;
}

.nav-opener:before,
.nav-opener:after,
.nav-opener span {
	background-color: #FFE292;
	opacity: 0.7;

	transition: all 0.25s ease-in-out;
	left: 0;
	height: 3px;
	width: 30px;
	content: '';
	position: absolute;
	margin-left: -15px;
	border-radius: 5px; 
}

.nav-opener:hover:before, 
.nav-opener:hover:after,
.nav-opener:hover span {
	opacity: 1;
}

.nav-opener:before {
	top: 9px;
}

.nav-opener:after {
	top: 50%;
	transform: translateY(-50%); 
}

.nav-opener span {
	bottom: 9px;
}


.nav-close {
  width: 40px;
  height: 40px;
  display: block;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
}

.nav-close:before, 
.nav-close:after {
	transition: opacity 0.25s ease-in-out;
	width: 24px;
	height: 3px;
	background: #000;
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 5px;
}

.nav-close:after {
	width: 3px;
	height: 24px;
}

.nav-close:hover:before, .nav-close:hover:after {
	opacity: 0.8;
}

.nav-logo img {
	width: 250px;
	margin-top: 20px;
	margin-bottom: 15px;
	
}


@media screen and (max-width: 1023px) {

	

	.middle-nav-bar {
		width:100%;
	}
		
	
}


@media screen and (max-width: 830px) {

	/* Hide the nav buttons in main-lodge */
	#supply-hut, #the-herd, #game-guide {
		display:none;
	}

	.expanding-nav {
		margin: 0 0 10px 0;
	}

	
	#signinContainer,
	.contact-container {
		display:none;
	}


	/* the side jagged edges create some crowding here */

	.right-border, .left-border {
		display:none;
	}


}

/* Everything here and bigger gets the full display */
@media only screen and (max-width: 1339px) {

	/* four cards visible */
	.displayCase > .fifth {
		display:none;
	}
	
}

@media only screen and (max-width: 1023px) {

	/* three cards visible */
	.displayCase > .fourth {
		display:none;
	}
}

@media only screen and (max-width: 830px) {

	/* two cards visible */
	.displayCase > .third {
		display:none;
	}
	
}



/* Small screens */
@media only screen and (max-width: 600px) {
	/* only one card for the smallest screens */
	.displayCase > .second {
		display:none;
	}

	.displayCase >.first {
		transform: unset;
		max-width: 375px;
	}
}