/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal
}
ul {
  list-style: none
}
button, input, select, textarea {
  margin: 0
}
html {
  box-sizing: border-box
}
*, *::before, *::after {
  box-sizing: inherit
}
img, video {
  height: auto;
  max-width: 100%
}
iframe {
  border: 0
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
td, th {
  padding: 0
}
td:not([align]), th:not([align]) {
  text-align: left
}
@font-face {
  font-family: "thaleahfat";
  src: url("../fonts/thaleahfat-webfont.woff2") format("woff2"), url("../fonts/thaleahfat-webfont.ttf") format("truetype");
  font-weight: 400;
}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	/*  background: #1c050f;*/
	color: #ffffff;
	font-family: "thaleahfat", helvetica;
	background-image: url(../img/bg.png);	
}
body {
  overflow-x: hidden;
  font-size: 16px;
}
p {
  font-size: 1.7em;
  margin-bottom: 1rem;
}
.container {
  height: 100%;
  position: relative;
  min-width: 320px;
  z-index: 2;
}
.logo {
  display: block;
  text-align: center;
  z-index: 9999;
  position: relative;
}
.logo img {
  display: block;
  margin: auto;
  width: 42vw;
}
.socials {
  position: absolute;
  z-index: 5;
  top: 10px;
  text-align: center;
  width: 100%;
}
.parallax-wrapper {
  overflow-y: hidden;
  height: 50%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.parallax {
  background-size: 100%;
  background-position: left bottom;
  height: 50%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  width: 100%;
  min-width: 320px;
}
#level0 {
  background-image: url('../images/background-1.png');
  background-size: cover;
  background-position: left top;
  z-index: 0;
}
#level1 {
  background-image: url('../images/level-1.gif');
  z-index: 1;
}
#level2 {
  background-image: url('../images/level-2.gif');
  z-index: 2;
}
#level3 {
  background-image: url('../images/level-3.gif');
  z-index: 3;
}
.content {
  /* padding:5rem; */
  margin: auto;
  width: 100%;
  position: relative;
  z-index: 99999;
  background: #1c050f;
}
.content > h2 {
  margin: auto;
  padding: 1rem 5vw;
  max-width: 1200px;
}
a.social-link {
  display: inline-block;
  margin: 20px 5px;
}
a.social-link svg {
  width: 30px;
  fill: #ffffff;
  position: relative;
}
a.social-link:hover svg {
  top: -3px;
  cursor: pointer;
  fill: #f7d621;
}
a.button {
  display: inline-block;
  margin: auto;
  padding: 13px 20px 12px;
  background: #f7d621;
  color: #1c050f;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  width: auto;
  position: relative;
  font-size: 1.8em;
  margin-top: 2rem;
  border-right: 7px solid #1c050f;
  border-bottom: 7px solid #1c050f;
}
a.button:hover {
  top: -3px;
  background: #ffffff;
  cursor: pointer;
  color: #1c050f;
}
h1, h2, h3, h4, h5 {
  font-weight: bold;
}
h2 {
  font-size: 2.3em;
}
.characters {
  margin: 2rem auto;
  padding: 1rem 5vw;
  max-width: 1200px;
  display: flex;
  justify-content: left;
  gap: 2rem;
  flex-wrap: wrap;
}
.character {
  width: 30%;
  margin-bottom: 3%;
  min-width: 200px;
}
.character h2 {
  margin: 1rem auto 0;
}
.character a, .character img {
  width: 100%;
  display: block;
}
.character a.button {
  display: inline-block;
  width: auto;
  margin: 1rem auto;
}
.footer {
  text-align: left;
  display: block;
  margin: auto;
  font-size: 1.2em;
  padding: 2rem 5vw;
  max-width: 1200px;
}
.footer span {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
}
/*/ MEDIA QUERIES START HERE //////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 768px) {
  /* Hand Held Device */
  body {
    font-size: 13px;
  }
  .parallax {
    background-size: 150%;
  }
  .logo img {
    width: 60vw;
  }
  .content {
    padding: 1rem;
  }
  .characters {
    gap: 1rem;
  }
  .character {
    width: 47%;
    margin-bottom: 3%;
    min-width: 200px;
  }
}
@media (max-width: 524px) {
  /*  Mobile */
  .parallax {
    background-size: 200%;
  }
  .logo img {
    width: 80vw;
  }
  .characters {
    justify-content: center;
  }
  .character {
    width: 97%;
    margin-bottom: 3%;
    min-width: 200px;
  }
}
@media screen and (min-width: 3240px) {
  /* 4K */
}