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

/*Global styles*/
body, #wrapper {background-color: #1c1817; font-family: CCSpellcaster;}

h1, h2 {color: #CE9209; font-family: CCSpellcaster;}

p, li, ul {font-family: CCSpellcaster;}

ul {font-size: 115%; margin-left: 1em;}

li {font-size: 115%; color: #FFFFFF; padding-top: 1em;}
li a {text-decoration: none; color: #CE9209;}
li a:hover {color: #FFFFFF;}

ul p {color: #FFFFFF; font-size: 100%; text-align: left; padding: .5em 1em;}

/*Header elements*/
header {background-color: #000000; background-image: url("../images/header_bkgrd.jpeg"); background-size: 100% 100%;
	background-repeat: no-repeat;
	margin: 0 1em; min-height: 200px; display: flex; justify-content: space-between; align-items: center; padding: 0 2em;}

header .logo {width: 200px;height: 200px;}

header .centered-content {text-align: center; flex-grow: 1;}

header h1 {font-size: 200%; margin: 0; text-decoration: underline;}

header h1 a {color: #CE9209;}

header h2 {font-size: 125%; margin-top: 0.5em;}

header h3 img {margin: 0; padding-right: 2em; height: 100px; width: 200px;}

/*Nav elements*/

nav {text-align: center; color: #CE9209; font-size: 120%; font-family: "Goudy Old Style"; font-weight: bold;
	margin: 0 auto; display: flex; justify-content: space-between; padding: 1em; background-color: #580A0A;}

nav a {color: #CE9209; text-decoration: none;}

nav a:link {color: #CE9209;}

nav a:hover {color: #FFFFFF;}

nav a:visited {color: #8B6204;}
nav a:active {color: #FFFFFF;}


main h1 {color: #CE9209; text-align: center; font-size: 145%; padding: .75em 1em;}
p {color: #CE9209; text-align: center; font-size: 115%; padding: 0 1em; margin-top: 15px;}
p a{color: #CE9209;text-decoration: underline; font-size: 145%;}

/*Landing/subscribe page classes*/
.subscribe-crest {text-align: center;}

.landing-bkgrd {background-image: url("../images/party.jpeg"); background-size: 100% 100%; background-repeat: no-repeat; margin-top: 1em;}

.landing-text {color: #FFFFFF}
.landing-text h1, .landing-text p {color: #FFFFFF;}
.landing-text h2 {color: #810305; text-align: center; font-size: 200%;}

.camp {background-image: url("../images/camp.jpeg");background-repeat: no-repeat; background-position: center; background-size: cover; z-index: 0;}

.parchment {background-image: url("../images/parchment.png"); width: 100%; margin: 0 auto; height: 450px; display: flex; justify-content: center; background-repeat: no-repeat; background-position: center; background-size: contain; align-items: center; text-align: center; position: relative; z-index: 1;}

.sign-up-form {font-size: 125%; padding: 5px 15px; margin: 0; z-index: 2;
	border: none; outline: none;
	background: none; max-width: 70%; box-sizing: border-box; display: block; color: #000000;}
.asterisk {color: #B3080B;}

/*thank you page styling*/
.victory {background-image: url("../images/victory.jpeg"); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: 0; height: 450px; margin-top: 1em;}
.victory-text { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
.victory-text h1, .victory-text p{font-size: 250%; max-width: 60%; text-align: center;}
.victory-text p {width: 100%;}



input[type="text"], input[type="email"] {width: 70%; padding: 10px; margin: 5px 0; border: none; border-bottom: 2px solid #000; background: none; font-size: 100%;}
input[type="text"], input[type="name"] {width: 60%; padding: 10px; margin: 5px 0; border: none; border-bottom: 2px solid #000; background: none; font-size: 100%;}

.button { background-color: transparent; color: #000000; padding: 10px 20px; border: 2px solid black; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: inherit; transition: color 0.3s ease, border-color 0.3s ease;}

/*Containers for Getting Started/Jump Right In*/
.image-container {display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 20px;}

.image-box {position: relative; width: 350px; height: 250px; margin: 0 20px;}

.image-box img {width: 100%; height: 100%; object-fit: cover;}

.text-overlay {position: absolute; left: 60%; transform: translateX(-110%); 
	color: #000000; font-size: 1.5rem; font-weight: bold; text-align: center; top: 40%;}

.text-overlay-right {position: absolute; left: 60%; transform: translateX(-75%);
	color: #FFFFFF; font-size: 1.5rem; font-weight: bold; text-align: center; top: 40%;}

/*Color change for names for distinction*/

.name {font-family: CCSpellcaster; color: #CE9209;}

/* about page img */
.about-img {display: flex; justify-content: center; align-items: center;}
.about-img img {height: 300px; width: auto; padding: 1em; border: thick solid #CE9209;}
.content {text-align: center; margin-bottom: 2em;}

.settings-img {display: flex; justify-content: center; align-items: center;}
.settings-img img{height: 300px; width: 90%; padding: 1em;}

footer {padding: 1em; background-color: #580A0A; display: flex; justify-content: center; margin: 0 auto; 
	font-family: CCSpellcaster; color: #CE9209;}

footer a {color: #CE9209; font-family: CCSpellcaster; font-size: 110%; padding-left: 3em;}