@charset "UTF-8";

html 
{
  font-size: clamp(12pt, 1.5vw, 24pt);
  margin:0;
  padding:0;
}

/*
* 
{
  outline: 1px solid red;
}
*/

.wrapper 
{
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-perspective: 2px;
          perspective: 2px;
  -webkit-perspective-origin: 50vw 0vh;
          perspective-origin: 50vw 0vh;
  height: 100vh;
  width: 100%;
  background: #467361;
}

.mobileOnly
{
	display: none;
}

main 
{
  background: #467361;
  background-image: url("../img/Map_Background.png");
  background-repeat:repeat-xy;
  position:relative;
  width:100%;
}

body, div, ul, img, picture, source 
{
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}

body 
{
  background: #0077dc;
  /*background: #467361;*/
  font-family: "Catamaran";
  text-shadow: 1px 1px 3px black;
  color: white;
  font-size: 2rem;
}

h3 
{	
	margin-top:0;
  text-transform: uppercase;
  position: relative;
}

.imagerow 
{
  display: grid;
  gap: 0;
  padding: 0;
  
  grid-template-columns: 1fr 1fr 1fr;
  width:90%;
  margin:auto;
}

.imagebox 
{
  position: relative;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.imagebox img
{
	width:100%;
	height: auto;
}

.featurerow
{
	display:grid;
	gap:0;
	padding:0;
	
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "left right";
	
	width:90%;
	margin:auto;
}

.featurerow.reverse
{
	grid-template-areas: "right left";
}

.featurebox
{
  position: relative;
  min-height: 3rem;
  min-width:3rem;
  display: flex;
  
  text-decoration: none;
}

.featurebox.left
{
	grid-area:left;
}

.featurebox.right
{
	grid-area:right;
}

.featurebox.image
{
	display:flex;
	min-height:3rem;
	align-items:center;
	justify-content:center;
}

.featurebox.image img
{
	width:100%;
	min-width:3rem;
	padding:0;
}

.featurebox.info
{
	display:flex;
	font-size: 1.15rem;
	align-items:center;
	justify-content:center;
}

.featurebox.info div
{
	min-width: 0;
	overflow-wrap: break-word;
}

.padder
{
	padding:1rem;
}

div.niceborder 
{
	background-position:0px, -2px;
	background-image: url("../img/Border_loop.png");
	background-repeat:repeat-x;
	height:50px;
	width:100%;
	padding-top:6px;
	padding-bottom:6px;
}

.needs-styling {
  display: block;
}

a {
  color: white;
  text-decoration: none;
  -webkit-transition: .2s;
  transition: .2s;
}

a:hover {
  color: yellow;
}

#parallax-scene {
  display: block;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 100%;
  height: 100%;
}

/*

#trailer {
  width: 70vw;
  height: 42vw;
  margin: 0 auto;
  padding: 4vw 5vw 6vw 5vw;
}

#trailer iframe {
  width: 100%;
  height: 100%;
}
*/

#trailer 
{
  width: 100%;
  max-width: 960px;          /* optional cap for large screens */
  margin: 0 auto;
  padding: 2vw 5vw;         /* vertical spacing only */
  box-sizing: border-box;
}

#trailer iframe 
{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  display: block;
}

#features 
{
  font-size: 1rem;
  margin:0;
  padding:0;
  width: 100%;
  padding-bottom: 1rem;
  background: rgba(0, 0, 0, 0.3);
}

#features .feature 
{
  padding-top: 2vw;
  padding-bottom: 2vw;
  border-radius: 2vw;
}

#features .dark {
  background: rgba(0, 0, 0, 0.3);
}

#thumbnail-wall 
{
  background: rgba(0, 0, 0, 0.3);
  padding-bottom:1.5rem;
}

footer {
  background-image: url("../img/Map_Background.png");
  background-repeat:repeat-xy;
  /*background: rgba(0, 0, 0, 0.3);*/
  /*background: rgb(70, 115, 97);*/
  text-align: center;
  padding: 2em;
}

.section 
{
  position: relative;
}

nav 
{
  position: relative;
  top: 0;
  height: 0;
  z-index: 50;
}

nav p 
{
  position: absolute;
  left: 0;
  top: auto;
  margin: 0;
  padding: 0;
  z-index: 50;
  /*margin: 2vw 2vw;*/
  padding: 0;
}


#dpadlink {
  text-indent: -9999em;
  background-image: url("../img/logo/dpadlogoV2.png");
  background-repeat:no-repeat;
  width: 13.9vw;
  height: 3.1vw;
  max-width: 147px;
  max-height: 36px;
  background-size: 100%;
  padding: 0;
  margin: 0;
  top: 0.5vw;
  right: 0.5vw;
  position:absolute;
}

#dpadlink a {
  display: block;
  height: 100%;
  width: 100%;
}

header 
{
  width: 100%;
  height: 50.5vw;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  z-index: -1;
}

header h1 
{
  z-index: -10000;
}

header picture img 
{
  width: 100%;
}

header picture char 
{
	width: 100%;
	z-index: -1000;
}

#main > p:first-child {
  margin-top: 0;
  padding-top: 0;
}

h1 
{
  position: absolute;
  left: 0;
  top: 6vw;
  width: 100%;
  -webkit-transform: translateZ(0) scale(1);
          transform: translateZ(0) scale(1);
   z-index:-1999;
}

h1 img 
{
  display: block;
  margin: 0 auto;
  width: 50vw;
  z-index:1999;
  position:relative;
  /*height: 16.23vw;*/
}

.scene 
{
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: auto;
  width: 100%;
}



.background-viking {
  position: absolute;
  z-index: 19;
  -webkit-filter: brightness(0.25);
          filter: brightness(0.25);
  display: none;
}

.viking {
  -webkit-transform-origin: 32px 32px;
          transform-origin: 32px 32px;
  z-index: 2;
}

.trampoline {
  -webkit-transform-origin: 32px 16px;
          transform-origin: 32px 16px;
  -webkit-clip-path: polygon(0 0, 55px 0, 55px 23px, 0 0);
          clip-path: polygon(0 0, 55px 0, 55px 23px, 0 0);
  z-index: 1;
}

.background {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  z-index: -2;
  background-color: blue;
  background-image: url("../img/play/blueprint.png");
  background-repeat: repeat;
  background-size: 4%;
}

button {
  background: none;
  color: white;
  border: none;
}



/* (perspective — distance) / perspective = scaleFactor,
perspective is 2 */
#sky {
  -webkit-transform: translateZ(-4px) scale(5);
          transform: translateZ(-4px) scale(5);
  z-index: 17;
  -webkit-transform-origin: 50.5% 0;
          transform-origin: 50.5% 0;
  background: #0077dc;
}

.para-1 {
  -webkit-transform: translateZ(-3px) scale(2.5);
          transform: translateZ(-3px) scale(2.5);
  z-index: 17;
  -webkit-transform-origin: 50.5% 0%;
          transform-origin: 50.5% 0%;
}

.para-2 {
  -webkit-transform: translateZ(-2px) scale(2);
          transform: translateZ(-2px) scale(2);
  z-index: 18;
  -webkit-transform-origin: 50.5% -20%;
          transform-origin: 50.5% -20%;
}

.para-3 {
  -webkit-transform: translateZ(-0.5px) scale(1.25);
          transform: translateZ(-0.5px) scale(1.25);
  z-index: 19;
  -webkit-transform-origin: 50.5% -60%;
          transform-origin: 50.5% -60%;
}

.para-4 {
  -webkit-transform: translateZ(-0.2px) scale(1.25);
          transform: translateZ(-0.2px) scale(1.25);
  z-index: 20;
  -webkit-transform-origin: auto;
          transform-origin: auto;
  top: 24vw;
}

.paraRed
{
	-webkit-transform: translateZ(-0.15px) scale(0.25);
          transform: translateZ(-0.15px) scale(0.25);
  z-index: -1000;
  -webkit-transform-origin: 18% 7%;
          transform-origin: 18% 7%;
}

.paraYellow
{
	-webkit-transform: translateZ(-0.15px) scale(0.29);
          transform: translateZ(-0.15px) scale(0.29);
   z-index: -1000;
   -webkit-transform-origin: 90% 2%;
          transform-origin: 90% 2%;
}

.paraGreen
{
	-webkit-transform: translateZ(-0.07px) scale(0.32);
          transform: translateZ(-0.07px) scale(0.32);
   z-index: -999;
   -webkit-transform-origin: 90% 65%;
          transform-origin: 90% 65%;
}

.paraBlue
{
	-webkit-transform: translateZ(-0.1px) scale(0.25);
          transform: translateZ(-0.1px) scale(0.25);
   z-index: -1002;
   -webkit-transform-origin: 8% 35%;
          transform-origin: 8% 35%;
}

/*#charRed
{
	-webkit-transform: translateZ(3px) scale(0.5);
    transform: translateZ(3px) scale(0.5);
	-webkit-transform-origin: auto;
    transform-origin: auto;
	z-index: 30;
	-webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
	  -webkit-transform-origin: 50.5% -60%;
          transform-origin: 50.5% -60%;
}*/

#storelinks {
  position: absolute;
  left: 0;
  /*top: 42vw;*/
  top: 34vw;
  right: 0;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  z-index: 60;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 1.2vw;
  margin: 0 auto;
  width: 28vw;
  font-size: 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 7vw;
}

#storelinks li {
  margin-left: 1.2vw;
  padding: 0.6vw 0.6vw 0 0.6vw;
  min-height: 2.4vw;
  color: white;
  display: block;
}

#storelinks p {
  margin: 0;
  position: relative;
  top: .75vw;
}

#storelinks a {
  position: relative;
  top: 0;
  -webkit-transition: ease top .2s;
  transition: ease top .2s;
}

#storelinks a:hover {
  top: -6px;
}

#store-1 {
  width: 6.3vw;
}

#store-2 {
  width: 5.064vw;
}

#store-3 {
  width: 8.292vw;
}

@media only screen and (max-width: 1200px) 
{
	.imagerow 
	{
	  grid-template-columns: 1fr 1fr;
	}
}

@media only screen and (max-width: 1000px) 
{
  /*#features { font-size: 1.5rem; }
    #stores h3 { font-size:2rem }*/
}

@media only screen and (max-width: 800px) 
{
	html
	{
		font-size: clamp(14pt, 3vw, 32pt);
	}
	
	#storelinks 
	{
		display: none;
	}

	h1 
	{
		top: 4vw;
	}

	#navlist 
	{
		display: none;
	}

	#dpadlink 
	{
		width: 27.8vw;
		height: 6.2vw;
	}

	#mobile-navigation 
	{
		position: absolute;
		left: 0;
		top: 35vw;
		
		-webkit-transform: translateZ(0);
				transform: translateZ(0);
				
		right: 0;
		z-index: 50;
		width: 75vw;
		font-size: 1rem;
		margin: 0 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
	}
  
	#mobile-navigation li 
	{
		color: white;
		text-align: center;
		background: rgba(0, 0, 0, 0.5);
		margin: 0 2vw;
		border-radius: 2vw;
		padding: 2vw;
	}

	/*.imagerow 
	{
		grid-template-columns: 1fr;
	}*/
	
	.featurerow
	{
		grid-template-columns: 1fr;
		grid-template-areas: "left" "right";
	}
	
	.featurerow.reverse
	{
		grid-template-columns: 1fr;
		grid-template-areas: "left" "right";
	}
	
	.imagebox
	{
		aspect-ratio: 1 / 1;   /* square */
		overflow: hidden;
	}
	
	.imagebox img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}
	
	.padder
	{
		padding:0;
		padding-top:1.5rem;
		padding-bottom:1rem;
	}
	
	.mobileOnly
	{
		display: block;
	}

  
  /*#stores h3 { font-size:1.5rem }*/
}

@media only screen and (max-width: 600px) {
  /*body { font-size: .75rem; }
    #stores h3 { font-size: 1rem }
    #features { font-size: .75rem; }*/
}

/*@font-face {
    font-family: "berlin";
    src: url("berlin.ttf");
}*/
/*# sourceMappingURL=style.css.map */