@font-face {
  font-family: "Yonder Font";
  src: url("../assets/exo.extra-bold.otf");
}

@font-face {
  font-family: "YonderRegular Font";
  src: url("../assets/exo.regular.otf");
}

@font-face {
	font-family: "Chill Font";
	src: url("assets/ShortStack-Regular.ttf");
}

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  height: 100%;
  background: #333;
}

#body {
  height: 100%;
  width: 100%;
  margin: 0px;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y:scroll;
  /* touch-action: manipulation; */
}

.stop-scrolling {
	overflow-y:hidden;
}

/*
	TABLE:
*/

table {
	width:100%;
	height:100%;
	background-image: url("assets/background.png");
	background-position: center;
	background-size: cover;
}

tr {
	/* height:30vmin; */
}

iframe {
	width:90vmin;
	height:60vmin;
	border-width: 0;
	vertical-align: middle;
	margin-top: 2vmin;
}

#trailerWrapper {
	width:94vmin;
	height:64vmin;
	border-width: 0;
	margin-bottom: 10vmin;

	background-color: rgba(0,0,0,.7);
	text-align: center;
	border-radius: 2vmin;
	/* padding: 1vmin; */
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

/*
	YONDERWARE:
*/

#yonderwareDiv {
	background-color: rgba(255,255,255,.8);
	width: 10vmin;
	height: 10vmin;
	border-radius: 10vmin;
	position: absolute;
	top: 2vmin;
	left:2vmin;
	opacity: .25;
}

#yonderwareDiv:hover {
	opacity: 1.0;
}

#logoImg {
	width:8vmin;
	height:8vmin;
	left:0vmin;
	top:1vmin;
	position: relative;
}

/*
	LINKS:
*/

.smallBtn {
	margin-top:.25vmin;
	margin-bottom:.25vmin;
	margin-left:1vmin;
	margin-right:1vmin;
	display:inline-block;
	font-size: 5vmin;
	color:white;
	cursor: pointer;
	vertical-align: middle;
}

#linksDiv {
	background-color: rgba(0,0,0,.2);
	padding: 1vmin;
	border-radius: 1vmin;
	position: absolute;
	top: 1vmin;
	right:2vmin;
}

#presskitDiv {
	font-family: "YonderRegular Font";
	font-size: 3vmin;
	color: white;
	text-decoration: underline;
	display: inline-block;
	bottom:.1vmin;
	margin-right: 1vmin;
	position: relative;
	vertical-align: middle;
}

/*
	Actual content:
*/

#boogerTitleImage {
	width:90vmin;
	position: relative;
	margin: auto;
	margin-top: 10vmin;
	margin-bottom: 5vmin;
}

.textPanel {
	font-family: "Yonder Font";
	color:white;
	background-color: rgba(0,0,0,.5);
	width:30vmin;
	font-size: 3vmin;
	text-align: center;
	border-radius: 2vmin;
	transform: rotate(-5deg);
	padding: 1vmin;
	display: inline-block;
	font-weight: 50;
	text-shadow: 2px 2px rgba(0,0,0,.5);
	letter-spacing: .11em;
	vertical-align: middle;
	transform: rotate(-5deg) translate(0vw, 0);
	z-index: 2;
	position: relative;
}

#textPanel2 {
	transform: rotate(5deg) translate(-2vw, 0);
}

#textPanelBottom {
	transform: translate(0,0);
	width:70vmin;
	margin-top: 0vmin;
	margin-bottom: 15vmin;
	padding-top: 3vmin;
	padding-bottom: 3vmin;
}

.previewImage {
	width:60vmin;
	display: inline-block;
	position: relative;
	vertical-align: middle;
	transform: rotate(5deg) translate(-1vw, 0);
	margin-top:-3vw;
	margin-bottom:-3vw;
}

#previewImage2 {
	transform: rotate(-5deg) translate(0vmin, 0);
}

#screenshotsContainer {
	width:90vmin;
	height:80vmin;
	margin-bottom: 5vmin;
	margin-top:10vmin;

	font-family: "Yonder Font";
	color:white;
	background-color: rgba(0,0,0,.5);
	font-size: 4vmin;
	text-align: center;
	border-radius: 2vmin;
	padding: 1vmin;
	display: inline-block;
	font-weight: 50;
	text-shadow: 2px 2px rgba(0,0,0,.5);
	letter-spacing: .11em;
	vertical-align: middle;
	z-index: 2;
	position: relative;
}

#screenshotTitleDiv {
	margin-top:2vmin;
	margin-bottom:2vmin;
	
}

#screenshotCanvas {
	width:80vmin;
	height:60vmin;
	margin-bottom: 1vmin;
}

.chevron {
	display: inline-block;
	color:white;
	vertical-align: middle;
	margin-left: 5vmin;
	margin-right: 5vmin;
	cursor: pointer;
	width:10vmin;
	height:10vmin;
	/* background: rgba(255,255,255,.2); */
	background: rgba(0,0,0,.0);
	text-align: center;
	line-height: 10vmin;
	/* border-radius: 5vmin; */
	/* padding-top: 3vmin; */
}

.bullet {
	width: 2vmin;
	height:2vmin;
	vertical-align: middle;
	display: inline-block;
	position: relative;
	background-color: white;
	border-radius: 1vmin;
	margin-left: 1vmin;
	margin-right:1vmin;
	cursor: pointer;
}

#appstoreImage {
	height: 10vmin;
	/* margin-top: 3vmin;
	margin-bottom: 2vmin; */
	/* left:0vmin; */
	position:relative;
	display: inline-block;
	vertical-align: middle;
}

#boogerIconImage {
	display: inline-block;
	height:12vmin;
	vertical-align: middle;
	margin-right: 2vmin;
}

#appStoreButtonsWrapper {
	margin-top:10vmin;
	margin-bottom:5vmin;
	cursor: pointer;
	text-decoration: none;
}

#comingSoonWrapper {
	margin-top:0vmin;
	margin-bottom:5vmin;
}

#footerContentContainer {
	margin-top:2.0vh;
}

#releaseDateDiv {
	display: inline-block;
	vertical-align: middle;
}