html {
            scroll-behavior: smooth;
        }

        body {
        	background-color: #060e18;
        	color: #f4ede5;
        	font-family: "Inter", sans-serif;
        	font-size: 20px;
        }

        img {
        	max-width: 100%;
        	display: block;
        }

        .kraken-container {
        	width: 90%;
            max-width: 1640px;
            height: 100%;
            margin: auto;
            position: relative;
            padding: 60px 0px;
        }

        .game-container {
        	border-radius: 15px;
        	overflow: hidden;
			transition: ease .2s;
        }

        .game-container:hover {
        	transform: scale(1.03);
        	-webkit-box-shadow: 10px 10px 16px -3px rgba(1,5,10,1);
			-moz-box-shadow: 10px 10px 16px -3px rgba(1,5,10,1);
			box-shadow: 10px 10px 16px -3px rgba(1,5,10,1);
        }

        .game-inner {
        	min-height: 550px;
        	background: rgb(1,5,10);
			background: linear-gradient(90deg, rgba(1,5,10,0.8016456582633054) 32%, rgba(1,5,10,0) 50%);
        }

        .game-inner-reverse {
        	min-height: 550px;
        	background: rgb(1,5,10);
			background: linear-gradient(270deg, rgba(1,5,10,0.8016456582633054) 32%, rgba(1,5,10,0) 50%);
        }

        #bitcastle {
        	background-image: url(./images/1-bit-castle.png);
        	background-size: cover;
        	background-position: right center;
        }

        #unnanounced {
        	background-image: url(./images/unnanounced-bg.jpg);
        	background-size: cover;
        	background-position: right center;
        }

        .highlight-box  {
        	background-color: #142329;
        	border-radius: 15px;
        }

        .highlight-box i {
        	font-size: 3.4rem;
        	text-align: center;
        	color: #91d9bf;
        	margin: 14px 0px 0px 0px;
        }

        .highlight-box h4 {
        	margin: 10px 0px 0px 0px;
        }

        .highlight-box p {
        	margin: 10px 0px 10px 0px;
        }

        /*Fonts*/

        p {
        	color: #f4ede5;
        	font-family: "Inter", sans-serif;
        	font-size: 20px;
        	line-height: 1.4em;
        	margin: 1em 0;
        }

        h1 {
        	font-family: "Titan One", sans-serif;
        	text-transform: uppercase;
        	font-size: 4.7rem;
        	line-height: 1em;
        	letter-spacing: -1px;
        }

        h2 {
        	font-family: "Titan One", sans-serif;
        	text-transform: uppercase;
        	letter-spacing: -1px;
        	font-size: 3rem;
        	margin: .4em 0;
        }

        h3 {
        	font-family: "Titan One", sans-serif;
        	text-transform: uppercase;
        	letter-spacing: -1px;
        	font-size: 2rem;
        	margin: .4em 0;
        }

        h4 {
        	font-family: "Inter", sans-serif;
        	font-weight: bold;
        	font-size: 1.3rem;
        	margin: .4em 0;
        }

        

        .kraken-btn-primary {
        	display: inline-block;
        	background-color: #91d9bf;
        	border-radius: 14px;
        	color: #060e18;
        	font-family: "Titan One", sans-serif;
        	text-transform: uppercase;
        	font-size: 1.8rem;
        	transition: ease .2s;
        	margin: .5em 0;
        	text-decoration: none;
        	cursor: pointer;
        	padding: 12px 20px;
        }

        .kraken-btn-primary:hover {
        	background-color: #72f9c8;
        	color: #060e18;
        }


        /*Nav*/

        header {
        	position: fixed;
        	width: 100%;
        	top: 0;
        	left: 0;
        	z-index: 999;
			background: rgb(6,14,24);
			background: linear-gradient(180deg, rgba(6,14,24,1) 20%, rgba(6,14,24,0) 100%);
        }

		nav ul, nav li {
			display: inline-block;
		}

		nav ul {
			width: 50%;
			height: 100%;
			padding: 60px 80px;
			margin: 0;
			float: left;
			list-style: none;
		}

		nav ul li {
			display: block;
			height: 100%;
			float: left;
			margin: 0px 60px;
		}

		nav a {
			color: #f4ede5;
			font-weight: 800;
			transition: ease .2s;
			text-decoration: none;
			text-transform: uppercase;
		}

		nav a:hover {
			color: #91d9bf;
		}

		nav ul:first-of-type li {
			float: right;
		}

		nav:after {
			content: "";
		    display: table;
		    clear: both;
		}

		.logo {
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.logo img {
			width: 100%;
			max-width: 100px;
		}

		.burgermenu {
			display: none;
		}


		/*Hero*/

		#home {
			height: 100vh;
			max-height: 1600px;
			background-image: url(./images/hero-sky-bg.jpg);
			background-size: cover;
			background-attachment: fixed;
			background-repeat: no-repeat;
			background-position: top center;
			position: relative;
			overflow: hidden;
		}

		#home .row {
			height: 100%;
		}

		#home span {
			display: block;
			font-family: "Inter", sans-serif;
        	font-weight: 900;
        	font-size: 1.8rem;
        	letter-spacing: 0px;
        	line-height: 1em;
        	margin: 1em 0;
		}

		.hero-wave-front {
			width: 100%;
			height: 100%;
			position: absolute;
			background-image: url(./images/hero-waves-front.png);
			background-size:contain; 
			background-repeat: no-repeat;
			background-position: bottom center;
		}

		.hero-wave-mid {
			width: 100%;
			height: 100%;
			position: absolute;
			background-image: url(./images/hero-wave-mid.png);
			background-size:contain; 
			background-repeat: no-repeat;
			background-position: bottom center;
		}

		.hero-wave-back {
			width: 100%;
			height: 100%;
			position: absolute;
			background-image: url(./images/hero-wave-back.png);
			background-size:contain; 
			background-repeat: no-repeat;
			background-position: bottom center;
		}

		#pitchgame {
			background-color: #142329;
		}

		#pitchgame h2 {
			font-size: 5rem;
			color: #91d9bf;
        }


		/*footer*/

		footer {
			background-color: #1b2c41;
		}

		footer a {
        	color: #f4ede5;
        	transition: ease .2s;
        	text-decoration: none;
        	display: block;
			font-size: 28px;
        }

        footer a:hover {
        	color: #91d9bf;
        }

        footer i {
        	margin-right: 10px;
        	color: #91d9bf;
        }

        /*Contact Form*/

        .kraken-form input, .kraken-form textarea, .kraken-form button {
        	width: 100%;
        	border: 0px;
        	border-radius: 4px;
        	background-color: #f4ede5;
    		color: #060e18;
    		padding: 10px;
    		margin: 10px 0px; 
        }

        .kraken-form button {
        	background-color: #91d9bf;
        	color: #060e18;
        	font-family: "Titan One", sans-serif;
        	text-transform: uppercase;
        	font-size: 1.8rem;
        	transition: ease .2s;
        }

        .kraken-form button:hover {
        	background-color: #72f9c8;
        	color: #060e18;
        }

        #about, #games, #publishing, #pitchgame {
        	scroll-margin-top: 150px;
        }

         @media only screen and (min-width: 2400px) {

			#home .row {
			    height: 70%;
			}
		}

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

			nav ul li {
			    margin: 0px 20px;
			}

        }

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

			.burgermenu {
				display: block;
				position: absolute;
				height: 40px;
				width: 40px;
				top: 10px;
				right: 5%;
				z-index: 3;
			}

			header {
				height: 90px;
			}

			nav {
				height: 0;
				overflow: hidden;
				transition: ease .4s;
				background-color: #91d9bf;
				
				font-family: "Titan One", sans-serif;
			}

			nav a {
				color: #060e18;
			}

			nav ul {
			    width: 100%;
			    height: auto;
			    padding: 0px;
			    margin: 0;
			    float: none;
			    list-style: none;
			    text-align: center;
			    display: flex;
  				flex-direction: column;
			}

			nav ul li {
			    display: block;
			    height: 100%;
			    float: none;
			    margin: auto;
			    padding-bottom: 20px;
			    padding-top: 20px;
				font-size: 2.6rem;
				font-weight: 900;
			}

			nav ul li:first-child {
			    order: 2;
			}

			nav ul:first-of-type li {
			    float: none;
			}

			.nav-active {
				height: 100vh;
				padding-top: 30%;
			}

			.logo {
				top: 10px;
				left: 5%;
				transform: none;
			}

			.logo img {
				width: 70px;
			}

        }

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

			.game-container {
				width: 90%;
				background-color: #01070d;
				border: 1px solid #91d9bf;
			}

			.game-inner, .game-inner-reverse {
	        	min-height: 100%;
	        	padding-top: 85%;
	        	background: transparent;	     
			}

	        #bitcastle {
	        	background-image: url(./images/1-bit-castle-mob.jpg);
	        	background-size: contain;
	        	background-repeat: no-repeat;
	        	background-position: center top;
	        }

	        #unnanounced {
	        	background-image: url(./images/unnanounced-bg-mob.jpg);
	        	background-size: contain;
	        	background-repeat: no-repeat;
	        	background-position: center top;
	        }

	        h1 {
	        	font-size: 3.2rem;
	        }

	        .highlight-box i {
			    font-size: 2.8rem;
			}

			.hero-text, #games,#publishing, #contact {
				text-align: center;
			}

			.hero-wave-front {
			    background-size: 630px;
			    background-position: bottom right;	
			}

			.hero-wave-mid {
				background-size:contain; 
				background-size: 630px;
			}

			.hero-wave-back {
				background-size:contain; 
				background-size: 630px;
			}

			#home {
				background-size: 2000px;
			}
		}