@charset "UTF-8";
@font-face {
	font-family: "Highland Gothic";
	src: url("fonts/HighlandGothicFLF-Bold.ttf");
}

/* CSS Document */
body {
	background-color: black;
	color: white;
	background-image: url("../images/maze.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.header {
	text-align: center;
	background-color: black;
	margin: 5px 0px 100px 0px;
	border: 9px double #e6e6ff;
    border-radius: 10px;
  	box-shadow: 0px 0px 30px #cc0000, inset 0px 0px 30px #cc0000;
  	transition: all 0.1s;
}
.header img {
	max-width: 100%;
}
h3, h4, h5 {
	padding-top: 2rem;
	padding-bottom: 0;
	text-align: left;
	margin-top: 2rem;
	font-weight: 400;
}
h5 {
	padding: 40px;
}
h5.drop-cap:first-letter {
    font-size: 5rem;
	margin: 0 auto;
}
.cartridge {
	padding-right: 15px;
}

p.drop-cap:first-letter {
    font-size: 2.5rem;
	margin: 0 auto;
	
}
.main p {
	margin: 0 1rem 9rem 2rem;
	
}
.about {
	text-align: center;
	font-size: 5rem;
	font-weight: 400;
}
/*.about1, .about2, .about3 {
	text-align: justify;
}
.about2 h3 {
	text-align: right;
}
.about3 {
	margin-bottom: 15%;
}
.about1 img, .about2 img, .about3 img {
	border: 3px solid white;
	background-color: black;
}*/
.aboutText {
	text-align: center;
}
.nav {
	display: inline-flex;
	font-size: 2rem;
}
figure {
	vertical-align: top;
	max-width: 100%;
}
/*figcaption {
    text-align: center;
	color: black;
	font-family: arial;
	font-weight: bold;
	padding-top: 10px;
	padding-left: 10px;
}*/

.leftImg {
	max-width: 100%;
	padding: 5px;
	
}
.rightImg {
	max-width: 100%;
	padding: 5px;	
}
.crew {
	max-width: 1400px;
	padding: 20px;
	margin: 0 auto;
	position: inherit;
}
	
	

.section1 {
	border-bottom: thin solid;
	padding-bottom: 3rem;
	margin-bottom: 5rem;
}

.footer {
	text-align: center;
	padding-top: 3rem;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	background-color: black;
	border: 6px double #e6e6ff;
    border-radius: 10px;
  	box-shadow: 0px 0px 30px #cc0000, inset 0px 0px 30px #cc0000;
  	transition: all 0.1s;
}
.footer li, .footer a {
	text-decoration: none;
	display: inline;
	margin: 2rem;
}
.copy {
	padding-top: 1rem;
}
/* Form Styles */
#formoid {
	/*margin-left: 30%;
	margin-right: 20%;*/
	text-align: left;
	padding: 1% 9% 5% 9%;
	margin: 0 auto;
	width: 50%;
	background-color: black;
}
h3 {
	text-align: center;
}
.submit {
	color: black;
}
.contactImg {
	display: flex;
	border: solid white;
	margin-right: 20px;	
}
.wrapper {
	background-color: black;
	list-style-type: none;
	padding: 60px;
	border-radius: 3px;
	width: 90%;
}
.form-row {
	display: flex;
	justify-content: flex-end;
	padding: .5em;
}
.form-row > label {
	padding: .5em 1em .5em 0;
	flex: 1;
}
.form-row > input {
	flex: 2;
}
.form-row > input,
.form-row > button {
	padding: .5em;
}
.form-row > button {
   background: gray;
   color: white;
   border: 0;
}
.message {
display: flex;
flex-direction: column;
order: 1;
}
.message > textarea {
   flex: 1; 
   min-width: 18em;
}
@media (min-width: 550px) and (max-width: 750px){
	form {
		display: block;
	}
}
/* Social Media Styles */
.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}
.social a {
  padding: 10px;
  margin: .55em;
  border-radius: 1px;
  transition: all 0.3s ease;
  color: white;
  font-size: 15px;
}
.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.patreon {
  background: #f96854;
  color: white;
}

.twitch {
  background: #6441a5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}
.instagram {
  background: #bb0000;
  color: white;
}

.content {
  margin-left: 75px;
  font-size: 30px;
}
.giphy {
	text-align: center;
}
iframe {
	padding: 10px 60px 10px 0;
}
video {
	border: 3px;
	border-style: solid;
	border-color: black;
	border-bottom: 10px;
	border-top: 0;
	border-right: 0;
	padding: 10px;
	margin: 30px;
	background-image: -moz-linear-gradient(to top, #000, #bbb);
	background-image: -webkit-linear-gradient(to top, #000, #bbb);
	background-image: -o-linear-gradient(to top, #000, #bbb);
	background-image: -ms-linear-gradient(to top, #000, #bbb);
	background-image: linear-gradient(to top, #000, #bbb);
}