/*Coded by GwaRAUE*/

@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap");

body {
	font-size: 1em;
	color: #ffffff;
	margin: 0 auto;
	padding: 0;

background-image:
      linear-gradient(45deg, #181818 25%, transparent 25%, transparent 75%, #181818 75%),
      linear-gradient(45deg, #181818 25%, #111 25%, #111 75%, #181818 75%);
  
    background-size: 50px 50px;
    
    background-position:
      0 0,
      25px 25px;
	}

#siteHolder {
	min-width: 650px;
	max-width: 1200px;
	border-style: none solid none solid; 
	border-color: #000;
	border-width: 7px;
	margin: 0 auto;
	padding: 0;
	}

img {
	border: none;
	}

a.book {
	text-decoration:underline;
}

a:link {
	color: #ffffff;
	  text-shadow: 0 0.1em 10px rgba(0, 0, 0, 1), 0.05em -0.03em 0 rgba(0, 0, 0, 1),
    0.05em 0.005em 0 rgba(0, 0, 0, 1), 0em 0.08em 0 rgba(0, 0, 0, 1),
    0.05em 0.08em 0 rgba(0, 0, 0, 1), 0px -0.03em 0 rgba(0, 0, 0, 1),
    -0.03em -0.03em 0 rgba(0, 0, 0, 1), -0.03em 0.08em 0 rgba(0, 0, 0, 1), -0.03em 0 0 rgba(0, 0, 0, 1);
	}

a:visited {
	color: #ffffff;
	text-decoration: none;
	}

a.menu {
	
	}

a.menu:hover {
	color: #7e11c6;
}

a.music {
	font-size: 5vw;
	}

a.music:hover {
	color: #7e11c6;
}

a.feature {
	display: block;
	padding-top: 5%;
	font-size: 3em;
	font-family: "Luckiest Guy", cursive;
	color: #ffffff;
	line-height: 1em;
}

a.feature:hover {
	color: #7e11c6;
}

p.serious {
	font-size: 1em;
	color: #ffffff;
	font-family: "helvetica", sans-serif;
	text-align: left;
}

#topbar {
	background: radial-gradient(
    circle,
    rgba(255, 252, 0, 1) 0%,
    rgba(240, 237, 23, 1) 100%
  );
	height: 200px;
	width: 100%;
	min-width: 650px;
	max-width: 1186px;
	position: sticky;
	top: 0;
	z-index: 100;
}

#menu {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 100%;
	max-width: 520px;
	font-size: 2em;
	white-space: nowrap;
	margin: auto;
}

#name {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  font-family: "Luckiest Guy", cursive;
}

h7 {
  margin: 0;
  font-size: 8em;
  padding: 0;
  color: white;
  text-shadow: 0 0.1em 20px black, 0.05em -0.03em 0 black, 0.05em 0.005em 0 black, 0em 0.08em 0 black, 0.05em 0.08em 0 black, 0px -0.03em 0 black, -0.03em -0.03em 0 black, -0.03em 0.08em 0 black, -0.03em 0 0 black;
}
h1 span {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  display: inline-block;
}
h1 span:first-child {
  -webkit-animation: bop 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards alternate;
          animation: bop 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards alternate;
}
h1 span:last-child {
  -webkit-animation: bopB 5s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards alternate;
          animation: bopB 5s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards alternate;
}

@-webkit-keyframes bop {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50%,
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes bop {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50%,
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes bopB {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  80%,
  100% {
    -webkit-transform: scale(1) rotateZ(-3deg);
            transform: scale(1) rotateZ(-3deg);
  }
}
@keyframes bopB {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  80%,
  100% {
    -webkit-transform: scale(1) rotateZ(-3deg);
            transform: scale(1) rotateZ(-3deg);
  }
}

img.bg {
max-width: 1300px;
}

.parallax {
  background-image: url("images/headerimage4.jpg");
  height: 350px;
  max-width: 1300px;
  min-width: 650px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.headerImage {
  background-image: url("images/headerimage4.jpg");
  height: 0;
  width: 100%;
  padding-bottom: 30%;
  background-repeat: no-repeat;
  background-size: contain;
  font-family: "Luckiest Guy", cursive;
  color: #ffffff;
  font-size: 1.5em;
  text-align: center;
}
	

.collapsibleOdd {
  background-color: #4d5eb3;
  font-family: "Luckiest Guy", cursive;
  font-size: 2em;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 2em;
}

.active, .collapsibleOdd:hover {
  background-color: #f0ed17;
}

.collapsibleOdd:after {
  content: '\002B';
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.collapsibleEven {
  background-color: #ff2323;
  font-family: "Luckiest Guy", cursive;
  font-size: 2em;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 2em;
}

.active, .collapsibleEven:hover {
  background-color: #f0ed17;
}

.collapsibleEven:after {
  content: '\002B';
  float: right;
  margin-left: 5px;
}

.content {
  text-align: center;
  padding: 0 18px;
  max-height: 0;
  color: #ffffff;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #181818;
}

.content2 {
  text-align: center;
  padding: 0 18px;
  color: #ffffff;
  background-color: #181818;
}

p.merch {
	font-family: "Luckiest Guy", cursive;
	color: #ffffff;
	font-size: 1.5em;
	text-align: center;
}

#marioBanner {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 80%;
	height: 75px;
	margin: auto;
}

#marioBox {
	width: 90px;
}

#marioTextBox {
	width: 50%;
}

span.wordwrap {
	display: inline-block;
}

#merchBanner {
	width: 100%;
	font-family: "Luckiest Guy", cursive;
}

img.merchImg {
	width: 80%;
	padding-bottom: 18px;
}

.musicMenuContainer {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.musicMenuItem {
}

.clearFix {
	clear: both;
}

#video {
	position: relative;
	margin: auto;
	width: 640px;
	height: 360px;
	text-align: center;
}

#merchImg {
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	width: 100%;
	text-align: center;
	justify-content: space-around;
}

#merchItem {
	width: 30%;
}

#video iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

#musicVideo {
	position: relative;
	margin: auto;
	width: 100%;
	height: 0;
	padding-bottom: 56%;
	text-align: center;
}

#musicVideo iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

#music {
	display: inline-block;
	justify-content: center;
	align-items: center;
	margin: auto;
	width: 80%;
	height: 56%;
	text-align: center;
	vertical-align: top;
}

#musicLeft {
	width: 50%;
	height: 100%;
	padding-top: 18px;
	padding-bottom: 18px;
	float: left;
	clear: left;
	color: #ffffff;
	font-size: 1.5em;
	text-align: center;
	font-family: "Luckiest Guy", cursive;
}


#seriousTextBox {
	width: 100%;
	height: 460px;
	padding: 0;
	margin: 0;
	overflow: auto;
}
	

#musicRight {
	padding-top: 18px;
	padding-bottom: 18px;
	padding-left: 18px;
	width: 50%;
	height: 100%;
	float: right;
	clear: right;
	color: #ffffff;
	font-size: 1.5em;
	text-align: center;
	font-family: "Luckiest Guy", cursive;
}

#book {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	width: 640px;
	height: 396px;
	text-align: center;
}

#bookLeft {
	width: 218px;
	height: 360px;
	padding-top: 18px;
	padding-bottom: 18px;
	float: left;
	font-family: "helvetica", sans-serif;
	font-size: 1em;
}

#bookRight {
	text-align: left;
	padding-bottom: 18px;
	padding-left: 18px;
	width: 404px;
	height: 360px;
	float: left;
	font-family: "helvetica", sans-serif;
	font-size: 1em;
}

#press {
	display: flex;
	justify-content: left;
	align-items: left;
	margin: auto;
	width: 80%;
	height: 56%;
	text-align: center;
}


div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 300px;
}

div.gallery:hover {
  border: 1px solid #f0ed17;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}






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

#siteHolder {
	width: 100%;
	min-width: 10px;
	margin: 0 auto;
	padding: 0;
	border: none;
	}

.parallax {
    background-attachment: scroll;
	width: 100%;
	min-width: 10px;
  }

#menu {
	font-size: 5vw;
	padding-bottom: 5px;
}

h1 {
	font-size: 3em;
}


h7 {
	font-size: 3em;
}

a.feature {

	font-size: 1.5em;
	padding-top: 50%;
}

a.music {
	font-size: 15vw;
}

#marioBanner {
	width: 100%;
}


#marioTextBox {
	width: 100%;
}

#topbar {
	position: sticky;
	min-width: 10px;
	max-width: 100%;
	width: 100%;
	height: 110px;
}

.headerImage {
  font-size: 1em;
  background-image: url("images/headerimage4-mobile.jpg");
  padding-bottom: 73.6%;

}

#sections {
	width: 100%;
}

.content {
	padding: 0;
	clear: both;
}

#video {
	/*If you're having problems it's the height here*/
	height: 0px;
	padding-top: 56.25%;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

#merchImg {
	width: 100%;
	padding-top: 15px;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

#merchItem {
	width: 45%;
}

#musicVideo {
	height: 0px;
	padding-top: 56.25%;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

img.merchImg {
	width: 100%;
}

#music {
	width: 100%;
	padding-top: 15px;
	padding-left: 0;
	padding-right: 0;
	display: flow-root;
	text-align: center;
}

#seriousTextBox {
	height: 100%;
	overflow: visible;
}

#musicLeft {
	padding-top: 15px;
	width: 100%;
	padding: 0;
}

#musicRight {
	width: 100%;
	padding: 0;
}

#book {
	width: 100%;
	padding-top: 15px;
	padding-left: 0;
	padding-right: 0;
	height: 900px;
	display: flow-root;
	text-align: center;
}

#bookLeft {
	padding-top: 15px;
	width: 100%;
	padding: 0;
}

#bookRight {
	height: 600px;
	width: 80%;
}

#emailList {
	width: 100%;
	padding-top: 15px;
	padding-left: 0;
	padding-right: 0;
	height: 900px;
	display: flow-root;
	text-align: center;
}


.form-top{
  margin-top: 15px;
}
.panel{
  box-shadow: 0 1px 6px 0 rgba(0,0,0,.12), 0 1px 6px 0 rgba(0,0,0,.12);
  border-radius: 6px;
    border: 0;
}
@-moz-document url-prefix() {
    .form-control{
      height: auto;
    }
}
.panel-primary{
  background-color: #2c3e50;
  color: #fff;
}
.panel-primary>.panel-heading {
    color: #fff;
    font-size: 20px;
    background-color: #2c3e50;
    border-color: #2c3e50;
}
.btn-warning{
  background-color: transparent;
  border-color: #bdc3c7;
}





}