html, body {
	margin: 0;
	height: 100%;
	min-height: 100%;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('fonts/Avenir\ Next.ttc');
}

@font-face {
    font-family: 'Avenir Next-Bold';
    src: url('fonts/Avenir\ Next.ttc');
	font-weight: bold;
}

body {
	background-color: rgb(16, 16, 16);
	font-family: 'Avenir Next';
	overflow-x: hidden;
	overflow-y: scroll;
}

.page-content {
	width: 100%;
	display: none;
}

.white-background {
	background-color: #fff;
}

.gradient {
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 50%;
	background-image: url('./images/pink-gradient.png');
	background-size: 100% 100%;
	opacity: 0.15;
	animation-name: gradient-animation;
    animation-duration: 10s;
    animation-iteration-count: infinite;
	z-index: -11;
}

.background-character {
	position: fixed;
	background-size: 100% 100%;
	width: 600px;
	height: 600px;
	top: 50%;
	pointer-events: none;
	z-index: -10;
}

.section {
	z-index: 3;
	padding-top: 30px;
	padding-bottom: 50px;
	text-align: center;
	/* margin-bottom: 39px; - For use when investigating Diagonal looks*/
	/*transform: rotateZ(3deg) scale(1.25); - For use when investigating Diagonal looks*/
}

.section-text {
	color: white;
	width: 60%;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 10px;
}

.section-inner-holder {
	/*transform: rotateZ(-3deg) scale(0.8); - For use when investigating Diagonal looks*/
}

.seperator {
	width: 80%;
	height: 1px;
	margin: 0 auto;
	background-color: #ffffff44;
	margin-top: 8px;
	margin-bottom: 30px;
}

.video-container {
	opacity: 1;
}

.video-rounded-corner-container {
	width: 384px;
	margin: 0 auto;
}

.section-two .video-rounded-corner-container {
	width: 250px;
}

.video-container {
	width: 100%;
	text-align: center;
}

.video-rounded-corner-container {
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 4px 4px 15px 0px rgba(255,255,255,0.12);
}

.section-one {
	transform: none;
}

.section-two {
	background-color: rgba(255, 42, 148, 0.1);
}

.section-two .video-container {
	margin-bottom: 40px;
}


.section-three {
	background-color: rgba(212, 42, 255, 0.1);
	height: 700px;
}

.section-three .name {
	font-size: 1.3em;
	color: white;
	text-shadow: 2px 2px 3px #ffffff55;
	text-transform: uppercase;
}

.character-section img {
	margin: 0 auto;
	filter: drop-shadow(8px 6px 4px #ffffff33);
}

.section-three .slick-prev, .section-three .slick-next {
	top: 25%;
	height: 30px;
	width: 30px;
	z-index: 10;
}

.section-three .slick-dots {
	bottom: 110px;
}

.section .slick-prev:before, .section .slick-next:before {
	font-size: 30px;
}

.section-three .slick-prev {
	left: 8px;
}

.section-three .slick-next {
	right: 8px;
}

.section .slick-dots li button:before, .section .slick-dots li.slick-active button:before {
	color: white;
}

.monster-description {
	text-align: justify;
	color: white;
	margin: 0 auto;
	width: 60%;
}

.red-name {
	color: #ffabab;
}

.blue-name {
	color: #afd6fd;
}

.purple-name {
	color: #ff95f6;
}

.prototype-name {
	color: #c1c1c1;
}

.lock-name {
	color: #fc6cf1;
}

.key-name {
	color: #fffd5c;
}

.section-four {
	background-color: rgba(42, 78, 255, 0.1);
}

.section-five {
	background-color: rgba(42, 78, 255, 0.1);
}

.section-six {
	padding-bottom: 30px;
	background-image: linear-gradient(rgba(42, 78, 255, 0.1), transparent);
}

.section-title {
	font-size: 1.05em;
	margin-block-end: 0em;
	color: white;
}

h1 {
	font-size: 1.3em;
	margin-block-end: 0em;
	font-weight: bolder;
	color: white;
}

.section-header {
	font-size: 3em;
	font-weight: bolder;
	color: white;
	text-shadow: 3px 3px 4px #ffffff44;
	margin-top: 14px;
	text-align: center;
}


.key {
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
	left: 50px;
	animation-name: key-animation;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.lock {
    -moz-transform: translateX(50%) translateY(-50%);
    -webkit-transform: translateX(50%) translateY(-50%);
    transform: translateX(50%) translateY(-50%);
	right: 50px;
	animation-name: lock-animation;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

@keyframes key-animation {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0.2;
	}
	50% {
		opacity: 0.0;
	}
	100% {
		opacity: 0.0;
	}
}

@keyframes lock-animation {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0.0;
	}
	75% {
		opacity: 0.2;
	}
	100% {
		opacity: 0.0;
	}
}

@keyframes gradient-animation {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(360deg);
	}
}

.delay-2seconds {
	opacity: 0.0;
    animation-name: fade-in;
    animation-duration: 1s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

#about-section {
	display: flex;
	flex-flow: row;
	margin-top: 50px;
}

.about-section-container {
	width: 50%;
	display: flex;
}

.logo-container {
    z-index: 5;
	margin: 0 auto;
}

.logo {
	background-image: url('./images/logo.png');
	background-position: center;
    margin-left: auto;
    margin-right: auto;
	animation-timing-function: ease-in-ease-out;
	animation-fill-mode: forwards;
	width: 14.1em;
	height: 8em;
	background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position-y: 30px;
	filter: drop-shadow(2px 2px 2px rgba(255, 255, 255, 0.30));
	margin-top: 20px;
}

.logo.dark {
	background-image: url('./images/logo-dark.png');
}

@keyframes fade-in {
	0% {
		opacity: 0.0;
	}
	100% {
		opacity: 1.0;
	}
}

.phrase {
	margin-left: auto;
	margin-right: auto;
	color: #f357c3;
	font-size: 1.25em;
	text-align: center;
	opacity: 0;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-name: animate-phrase;
	animation-duration: 1s;
	animation-delay: 0.0s;
	margin-top: 1em;
}

@keyframes animate-phrase {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0.9;
	}
}

.legal-copy {
	color: #cdcdcd;
	font-size: 0.8125em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.social-row {
	width: 100%;
	height: 100px;
}

.contact {
	width: 100%;
	height: 100%;
}

.contact a {
	text-decoration: none;
}

.contact td {
	width: 25%;
	text-align: center;
	font-weight: bold;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 60%;
	cursor: pointer;
	transition: 0.2s;
}

.contact td:hover {
	background-size: auto 70%;
	transition: 0.2s;
}

.facebook {
	background-image: url('./images/social-icon-fb.png');
}

.twitter {
	background-image: url('./images/social-icon-tw.png');
	animation-delay: 2.75s;
}

.instagram {
	background-image: url('./images/social-icon-ig.png');
	animation-delay: 3s;
}

.email {
	background-image: url('./images/social-icon-mail.png');
	animation-delay: 3.25s;
}

@keyframes legal-copy-animation {
	0% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

.bright-focus {
	transition: 0.5s;
}

.bright-focus:hover {
	transition: 0.5s;
	opacity: 1.0;
}

.shift-focus {
	transition: 0.5s;
}

.shift-focus:hover {
	transition: 0.5s;
	opacity: 1.0;
	background-size: auto 70%;
}

.scaling-download {
	animation-name: animation-scaling;
	animation-iteration-count: infinite;
	animation-duration: 7s;
	margin-bottom: 30px;
}

@keyframes animation-scaling {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

.hyper-title {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 1.6em;
	animation-name: rainbow-colorize;
	animation-iteration-count: infinite;
	animation-duration: 20s;
}

@keyframes rainbow-colorize {
	0% {
		color: white;
	}
	10% {
		color: rgb(255, 149, 255);
	}
	20% {
		color: rgb(166, 111, 255);
	}
	30% {
		color: rgb(111, 221, 255);
	}
	40% {
		color: rgb(186, 255, 129);
	}
	50% {
		color: rgb(255, 255, 160);
	}
	60% {
		color: rgb(255, 113, 137);
	}
	70% {
		color: rgb(86, 69, 235);
	}
	80% {
		color: rgb(235, 69, 133);
	}
	90% {
		color: rgb(235, 158, 69);
	}
	100% {
		color: white;
	}
}

.menu-icon {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 101;
	width: 30px;
	height: 30px;
	background-image: url('./images/pancake-menu-icon.png');
	background-size: 100% 100%;
	filter: drop-shadow(2px 2px 2px rgba(255, 255, 255, 0.40));
	cursor: pointer;
	transition: 0.2s;
}

.menu-icon.menu-active {
	background-image: url('./images/exit-icon.png');
}

.menu-icon:hover {
	filter: drop-shadow(2px 2px 2px rgba(255, 255, 255, 0.70));
	transition: 0.2s;
	opacity: 1.0;
}

.menu {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: #000000f2;
	opacity: 0;
	transition: 0.2s;
	z-index: -10;
}

.menu.menu-active {
	opacity: 1;
	transition: 0.2s;
	z-index: 100;
}

.menu .section-header {
	margin-top: 44px;
}

.menu-item {
	color: white;
	font-size: 2em;
	text-align: center;
	margin-bottom: 30px;
	cursor: pointer;
	text-shadow: 3px 3px 4px #ffffff44;
}

.scroll-lock {
	overflow-y: hidden;
}

.background-stars {
	opacity: 0.2;
	width: 100%;
	position: fixed;
	height: 50%;
	z-index: -10;
}

@media (orientation: landscape) and (min-width: 835px) {
	.gameplay-video-section {
		display: flex;
		width: 100%;
	}
}

@media (orientation: portrait) and (max-width: 650px) {
	#about-section {
		flex-flow: column;
	}

	.about-section-container {
		width: auto;
		margin: 0 auto;
	}
}

@media (orientation: landscape) {
	.video-and-text {
		width: 100%;
	}
}