body {
	font-family: 'Open Sans';
	background: #fff;
}

h1 {
	font-family: 'Montserrat';
	font-size: 1.6em;
}

p {
	font-size: 1.2em;
	font-weight: 700;
}
.navbar {
	opacity: 0.8;
	padding-left: 15px;
	padding-right: 15px;
}
  
.retro {
	font-family: 'Press Start 2P', cursive;
	font-size: 1.4em;
}

.masthead-container {
	position: absolute;
	margin: auto;
}

.masthead-image {
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right:auto;
}

.masthead-text-container {
	top: 45%;
	position: absolute;
}

.masthead-text {
	background-color: blue;
	color: white;
	padding: 4px;
}
.masthead-image-container {
    top: 20%;
    position: absolute;
 }
 
.socials-img-container {
    position: absolute;
    bottom: 10%;
    margin: 10px auto 15px auto;
}

.heart-img-container{
	width: 50%;
	margin: 10px auto 15px auto;
}

.coin-img-container{
	width: 45%;
	margin: 10px auto 15px auto;
}

.pixel-img {
	width: 50%;
	padding:10px;
}

.retrobtn {
	display: inline-block;
  padding: 10px 16px;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: red;
  border: none;
  border-radius: 24px;
  box-shadow: 0 3px darkred;
	
}

.retrobtn:hover {
  background-color: lightcoral;
  text-decoration: none;
  color: white;
}

.retrobtn:active{
  background-color: maroon;
  box-shadow: 0 0px #666;
  transform: translateY(3px);
}

.retrobutton:focus,.retrobutton:active {
   outline: none !important;
   box-shadow: none;
}

#IamThorno .fp-tableCell {
  vertical-align: top;
}

#About{
  background-image: url(Playing.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.white {
	color: white;
	text-shadow: 0px 0px 2px  #000, 0px 0px 2px  #000, 0px 0px 2px  #000, 0px 0px 2px  #000;
}

#myVideo{
	position: absolute;
	right: 0;
	bottom: 0;
	top:0;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
	background-position: center center;
	background-size: contain;
	object-fit: cover; /*cover video background */
	z-index: 3;
}

#Watch .layer{
	position: absolute;
	z-index: 4;
	width: 100%;
	top: 43%;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	/*
	* Preventing flicker on some browsers
	* See http://stackoverflow.com/a/36671466/1081396  or issue #183
	*/
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.footer {
	color: white;
	height: 10%;
	margin: auto;
	margin-bottom: 100px;
}

@media (min-width: 576px) {
	h1 {
		font-family: 'Montserrat';
		font-size: 1.8em;
	}
	
	.retro {
		font-family: 'Press Start 2P', cursive;
		font-size: 1.8em;
	}
	
	.masthead-image {
		margin: auto;
	}
	
	.masthead-text-container {
		top: 60%;
	}
	

.heart-img-container{
	width: 55%;
	margin: 10px auto 15px auto;
}

.coin-img-container{
	width: 40%;
	margin: 10px auto 15px auto;

}
	
	#IamThorno .fp-tableCell {
    vertical-align: middle;
  }
  
}

@media (min-width: 768px) {
	h1 {
		font-family: 'Montserrat';
		font-size: 1.8em;
	}
	
	.retro {
		font-family: 'Press Start 2P', cursive;
		font-size: 2em;
  }
	
	.masthead-image {
		width: 70%;
		margin: auto;
	}

	.masthead-text-container {
		top: 60%;
	}
	
	.masthead-text {
		background-color: blue;
		color: white;
		padding: 6px;
		margin: 2px;
  }

.socials-img-container {
    position: absolute;
    bottom: 5%;
    margin: auto;
}
 
.heart-img-container{
	width: 25%;
	margin: 10px auto 15px auto;
}

.coin-img-container{
	width: 20%;
	margin: 10px auto 15px auto;
}
  
  #IamThorno .fp-tableCell {
    vertical-align: middle;
  }
}