#wrapper{ 
	margin-left: auto;
	margin-right: auto;
}

header{
	background-image: url(banner1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-color: #FACABC;
	background-position: center;
	display: block;
	position: relative;
}

#homelink{
	text-align: left;
	text-decoration: none;
	padding-left: 2%;
	font-size: 135%;
	font-family: RedRock, "Times New Roman", sans-sarif;
	color: #FACABC;
	text-shadow: 1px 1px 2px black;
}

.container{
	position: sticky;
	top: 0;
	position: -webkit-sticky;
	background: #FACABC;
	z-index:1;
}

body{
	font-family: RedRock, "Times New Roman", sans-sarif;
	margin: 0;
	overflow-x: hidden;
	overflow-y: scroll;
}

/* Nav bar*/
	
.container nav{
	width: 100%;
	height: 76px;
}

.container nav a{
	text-align: center;
	text-decoration: none;
	color: #987b74;
}


.container nav ul{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	list-style-type: none;
	transition: all 0.5s ease;
}

.container nav ul li{
	width: 10%;
	float: left;
	text-align: center;
	color: #987b74;
	font-size: 41px;
	font-weight: bold;
	transition: all 0.5s ease;
	position: sticky;
	cursor: pointer;
	top: 0;
	padding-right: 50px;
}

.container nav ul li:hover{
	color: #5E4C47;
}	

.container nav ul li ul.sub-nav {
	position: absolute; 
	background-color: #FACABC; /* Background of drop down */
	width: 75%;
	height: auto;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.14), -1px 0px 1px rgba(0,0,0,0.14); /*Border around dropdown*/
	top: 74px;
	visibility: hidden;
	opacity: 0;
}

.container nav ul li ul.sub-nav li{

	font-size: 35px;
	font-family: primer, "Times New Roman", sans-sarif;
	width: auto;
}

.container nav ul li:hover ul.sub-nav{ /* Drop down menu visibility */
	visibility: visible;
	opacity: 75%;
	margin-top: 2px;
	padding-left: 10%;
	padding-right: 35%;
}

.container li{
	display: inline-block;
}

.container nav ul li ul.sub-nav a:hover{
	color: #5E4C47;
	transition: all 0.5s ease;
}

.tabs {
  display: flex;
  justify-content: space-around;
}

.title h1{
	font-size: 1000%;
	margin-top: 225px;
}

header h2{
	margin-bottom: 70px;
}

main h2{
	padding-right: 10em;
	padding-left: 10em;
	margin-top: 85px;
}

main .learn-more{
  border-radius: 2px;
  background-color: #FACABC;
  border: none;
  color: #987b74;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 275px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 0;
  margin-top: 25px; /*spacing from h2 text to button*/
  position: absolute;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
font-family: primer, "Times New Roman", sans-sarif;
}

main .learn-more span{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

main .learn-more span:after{
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

main .learn-more:hover span{
  padding-right: 25px;
}

main .learn-more:hover span:after{
  opacity: 1;
  right: 0;
} 

ion-icon:hover{
	color: #FACABC;
	transition: all 0.5s ease;
}

main ul li{
	list-style-type: none;
	display: inline;
	padding-left: 2%;
	padding-right: 0%;
}

main h1{
	font-size: 60px;
	margin-top: 85px;
}

h1, h2, h3, footer{
	text-align: center;
}

h1{
	color: #FACABC;
	font-family: RedRock, "Times New Roman", sans-sarif;
	line-height: 5px;
}

h2{
	font-family: primer, "Times New Roman", sans-sarif;
	font-size: 200%;
	text-shadow: 1px 1px 2px #FACABC;
	color: #987b74;
}

.video-trailer{
	background-image: radial-gradient(#f8f8f8, #FACABC, #f8f8f8);
	margin-top: 170px;
}

.video-trailer h2{
	padding-top:100px;
	padding-bottom: 60px;
}

#sponsor-space h2{
	padding-top: 0px;
}

#sponsor-space h1{
	padding-bottom: 0px;
}


.image{
	width: 50%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.video-trailer h2 a{
	color: #987b74;
}
.video-trailer h2 a:hover{
	color: #FACABC;
}

.trailer-top h2{
	padding-top: 75px;
	padding-bottom: 40px;
}

.video-trailer h1{
	padding-top: 130px;
	padding-bottom: 45px;
	color: #987b74;
}

.trailer{
	height: 64%;
	width: 62%;
	border: 2px solid #FACABC;
}

.trailer-bottom h2{
	margin-top: 0px;
	padding-bottom: 80px;
	padding-top: 70px;
}

.space{
	padding-bottom: 4%;
}

.space h2{
	padding-bottom: 1%;
	padding-top: 2%
}

table {
  font-family: primer, "Times New Roman", sans-sarif;
  color: #987b74;
  font-weight: bold;
  border-collapse: collapse;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

table td, table th {
  padding: 8px;
}

table tr:nth-child(even){
	background-color: #f8f8f8;
	}

table tr:hover {
	background-color: #f8f8f8;
}

table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  color: #987b74;
  font-size: 200%;
}

table td{
  border-top: 1px solid #987b74;
  border-bottom: 1px solid #987b74;
  border-right: 1px solid #987b74;
  text-align: center;
}

td:last-child{
	border-right: 0px;
}

.button{
	padding-bottom: 100px;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: top;
  width: 100%;
  margin-top: 6px;
  color: #987b74;
  font-size: 150%;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 100%;
  margin-top: 6px; 
}

.lastform{
	height: 200px;
}

#msg, #subject, #contact, #uname, #cname{
	font-family: primer, "Times New Roman", sans-sarif;
	font-weight: bold;
}

input[type=submit]:hover{
	color: #987b74;
	background-color: #FACABC;
}

input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #FACABC; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
  outline: none;
}

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/* Style the submit button */
input[type=submit] {
  background-color: #987b74;
  color: #FACABC;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  transition: 0.5s;
}

.backgroundcolor{ /* To get that cream color background!*/
	background-color: #f8f8f8;
}

.backgroundcolor h1, .backgroundcolor hr{
	margin-bottom: 90px;
}

html{
	background-color: #f8f8f8; /*fills in the blank spots in the background! */
}

footer{
	color: #987b74;
	padding-bottom: 4px;
}

.backgroundcolor ul{
	padding-bottom: 70px;
}

.backgroundcolor a
{
	color: #987b74;
}

.alignicons{
	display: flex;
	justify-content: space-around;
	padding-bottom: 100px;
}

ion-icon{
	font-size: 41px;
	color: #987b74;
}

.adjusttext{
	white-space: nowrap;
}

iframe{
	width: 560px;
	height: 315px;
	margin: auto;
}

.mainparagraph h2{
	padding-bottom: 5px;
	margin-top: 0px;
}

.hrspacing hr{
	margin-bottom: 8px;
}

hr.line{
	border-top: 2px solid #987b74;
}

#outer{
	width: 100%;
	text-align: center;
	margin-top: 90px;
	margin-bottom: 100px;
}

#outer a{
	display: inline-block;
}

/* Style buttons */
.btn {
  background-color: #FACABC; 
  border: none; /* Remove borders */
  color: #987b74; /* White text */
  padding: 12px 16px; /* Some padding */
  font-size: 24px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
  border-radius: 2px;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: #987b74;
  color: #FACABC;
}

.backgroundform
{
	background-image: radial-gradient(#f8f8f8, #FACABC, #f8f8f8);
}
.backgroundform h1
{
	color: #987b74;
}

/* Style the container */
.form {
  border-radius: 5px;
  width: 600px;
  margin: 0 auto;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Clear floats after image containers */
.fanartrow::after {
  content: "";
  clear: both;
  display: table;
}

.fanartrow{
	text-align: center;
}

.fanarttext h2{
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	font-size: 150%;
	padding-top: 0;
}

.fanartcolumn {
	display: inline-block;
    margin-left: auto;
	margin-right: auto;
	width: 500px;
}

h3{
	color: #FACABC;
	font-family: primer, "Times New Roman", sans-sarif;
}

.contributor h3{
	color: #987b74;
}

.merch-images{
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 200px;
}

.merch-images img{
	margin-left: 5px;
	margin-right: 5px;
	width: 500px;
}

.video-trailer a{
	color: #987b74;
}

.support-space h1{
	padding-top: 0px;
}


@media screen and (max-width: 640px)
{
	body, html{
		overflow-x: hidden;
		padding: 0.8em 0;
		width: 100vw;
	}
	.col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
  .tabs{
	flex-direction: column;
    align-items: center;
  }
  h2{font-size: 100%;} 
  
   .title{
		font-size: 25%;
   }
   container {
   height: 180px;
   width: 100%;
   display: flex;
   align-items: center;
 }
iframe{
	width: 300px;
	height: 200px;
	 margin-left: 50vw;
  transform: translate(-50%);
}
main .learn-more{
  font-size: 12px;
   width: 100px;
}

.fanarttext{
	font-size: 25%;
	}

.merch-images img{
	width: 200px;
}
  
}

@media (max-width: 1200px) {
	.container nav{
	width: 95%;
	height: 76px;
}	
.container nav ul li {font-size: 25px; width: fit-content; height: fit-content;}
 .container nav ul li ul.sub-nav li{
	 font-size: 20px; 
	 
 }
 .container nav ul li:hover ul.sub-nav{ /* Drop down menu visibility */
	padding-left: 10%;
	padding-right: 40px;
}
 main h2{
	padding-right: 2em;
	padding-left: 2em;
}

iframe{
	width: 300px;
	height: 200px;
	 margin-left: 50vw;
	transform: translate(-75%);
}

.merch-images img{
	width: 300px;
}

#outer{
	width: 106%;
}

.btn {
  padding: 8px 10px; /* Some padding */
  font-size: 16px; /* Set a font size */
}

h2{
	font-size: 200%;
}

}