@charset "utf-8";
/* CSS Document */

/***** Basic Rules *****/
body {
	font-size: 16px;
	font-family: "scandia-web", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #f07619;
	margin: auto;
}

a:link {
	color: black;
}

a:hover, a:active {
	color: #25938F;
}

h1 {
	font-family: "puffin-arcade-liquid", sans-serif;
    font-weight: 800;
    font-style: normal;
	font-size: 35px;
	padding: 10px;
	background-color: #fff;
}

h2 {
	font-family: "puffin-arcade-nerf", sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 30px;
	padding: 10px;
	background-color: #fff;
}
h3 {
	font-family: "puffin-arcade-yoko", sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 27px;
	padding: 10px;
	background-color: #fff;
}

#join {
	padding: 20px;
	margin: auto;
	display: block;
	border: 2px solid #F7C864;
	text-align: center;
	background-color: #F7C864;
	width: 10vw;
	color: #1C0D18;
	font-size: 2.5vw;
}

#join a {
	text-decoration: none;
}

#tickets p, #about p, #about ul li {
	background-color: #fff;
}


/***** Navigation Rules *****/

nav {
	display: block;
	margin: auto;
}

nav ul li {
	display: inline-block;
}

nav ul li a{
	display: flex;
	text-decoration: none;
	padding: 15px;
	text-align: right;
}

/***** Header Styles *****/

header {
	display: flex;
	align-items: flex-start;
	border-bottom: 3px solid #25938F;
	padding-bottom: 20px;
	background-color: #fff;
}

#logo {
	width: 30%;
}

/***** Section Styles *****/

#intro {
	border-bottom: 3px solid #25938F;
	margin: 10px;
	padding: 20px;
}

#intro img {
	margin: auto;
	display: block;
	padding-top: 20px;
	padding-bottom: 20px;
	border-radius: 25px;
}

#intro h1 {
	text-align: center;
}

#rules {
	border-bottom: 3px solid #25938F;
	margin: 10px;
	padding: 20px;
}

#rules h2 {
	text-align: right;
	position: relative;
}

#rules h3 {
	text-align: center;
}

#disclaimer {
	margin: auto;
	display: block;
	width: 65%;
	border: 1px solid #F07619;
	padding: 5px;
	border-radius: 5px;
	background-color: #fff;
}

#dracularaImg {
	margin: auto;
	display: block;
	border-radius: 25px;
}

#tickets {
	border-bottom: 3px solid #25938F;
	margin: 10px;
	padding: 20px;
	align-self: center;
}

#tickets img {
	border-radius: 25px;
}


#tixSoloFlex {
	margin: auto;
	display: block;
}

.ticketType {
	align-content: center;
	display: block;
	margin: auto;
	padding: 10px;
	background-color: #fff;
}

#about {
	margin: 10px;
	padding: 20px;
}

#about h2 {
	text-align: right;
}

#groupCos {
	display: block;
	margin: auto;
	border-radius: 25px;
}

.aboutNavDetails {
	display: flex;
	padding-top: 30px;
}

.aboutNavDetails p {
	padding-top: 10%;
	background-color: #fff;
}

.pixelBlock {
	width: 25%;
	align-self: flex-start;
}

/***** Footer Styles *****/

footer {
	background-color: #25938F;
	padding: 20px;
	line-height: 25px;
}

footer address {
	color: #fff;
}

footer a {
	text-decoration: none;
}

/***** Media Queries *****/

@media only screen and (max-width: 579px) {
	body {
		background-image: url("images/iphone-background.jpg");
		background-repeat: repeat-y;
		background-size: contain;
	}
	
	.tixFlexGroup {
        display: flex;
		justify-content: center;
	}
}

@media only screen and (max-width: 799px) {
	body {
		background-image: url("images/ipad-background.jpg");
		background-repeat: repeat-y;
		background-size: contain;
	}
	
	h1 {
		font-size: 6.5vw;
		padding: 30px;
	}
	
	h2 {
		font-size: 5.5vw;
		padding: 30px;
	}
	
	h3 {
		font-size: 4.5vw;
		padding: 30px;
	}
	
	nav ul li {
		font-size: 2.5vw;
		float: right;
	}
	
	#disclaimer {
		font-size: 2.5vw;
	}
	
	.tixFlexGroup {
        display: flex;
		justify-content: center;
	}
	.aboutNavDetails p {
		font-size: 2.5vw;
		padding-top: 8%;
	}
	
	.pixelBlock {
		width: 18%;
		align-self: flex-start;
	}
	
	footer address {
		font-size: 1.8vw;
	}
	
}

@media only screen and (min-width: 800px) {
	body {
		background-image: url("images/desktop-background.jpg");
		background-repeat: repeat-y;
		background-size: contain;
	}
	
	#logo {
		width: 40%;
	}
	
	h1 {
		font-size: 7.5vw;
		padding: 30px;
	}
	
	h2 {
		font-size: 6.5vw;
		padding: 30px;
	}
	
	h3 {
		font-size: 5.5vw;
		padding: 30px;
	}
	
	nav ul li {
		font-size: 2.5vw;
		float: right;
	}
	
	
	#introFlexContainer {
		display: flex;
		justify-content: space-between;
	}
	
	#tixFlexGroupP {
		display: flex;
		justify-content: space-between;
	}
	
	#disclaimer {
		font-size: 3.5vw;
	}
	
	.aboutNavDetails p {
		font-size: 2.5vw;
		padding-top: 6%;
	}
	
	.pixelBlock {
		width: 15%;
		align-self: flex-start;
	}
	
	footer address {
		font-size: 1.8vw;
	}
}